Beginners help to Angular JS debugging via console errors

Question

AngularJS is new to me (and difficult). So I would like to learn how to debug. Currently I'm following a course and messed something up. Would like to know how to interpret the console error and solve the bug.

plnkr.co code

index.html

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{message}}</h1>

    {{ username }}
    <form action="searchUser" ng-submit="search(username)">
      <input  type="search" 
              required placeholder="Username to find" 
              ng-model="username"/>
      <input type="submit" value="search">
    </form>

    <div>
      <p>Username found: {{user.name + error}}</p>
      <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}"/>    
    </div>

  </body>

</html>

script.js

(function() {

  var app = angular.module("githubViewer", []);

  var MainController = function($scope, $http) {

    var onUserComplete = function(response) {
      $scope.user = response.data;
    };

    var onError = function(reason) {
      $scope.error = "could not fetch data";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username)
        .then(onUserComplete, onError);
    };

    $scope.username = "angular";
    $scope.message = "GitHub Viewer";   };

  app.controller("MainController", MainController);

}());

The console only says

searchUser:1 GET http://run.plnkr.co/lZX5It1qGRq2JGHL/searchUser? 404 (Not Found)

Any help would be appreciated.

Yasser Shaikh · Accepted Answer · 2015-12-09 07:04:40Z

1

In your form, action you have written this

<form action="searchUser"

What this does is it will try to submit to a url with currentHostName\searchUser, so in this case your are testing on plunker hence the plunker url.

You can change the url where the form is submitted. Incase you want to search ajax wise then you dont even need to specify the action part. You can let your service/factory make that call for you.

answered Dec 9, 2015 at 7:04

Yasser Shaikh

47.9k50 gold badges208 silver badges290 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Isha Aggarwal · Accepted Answer · 2015-12-09 07:08:36Z

1

Though not exactly related to debugging this particular error, there is a chrome extension "ng-inspector" which is very useful for angularJS newbies. You can view the value each of your angular variable scopewise and their value. Hope it helps! Here is the link of the chrome extension: https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=en

answered Dec 9, 2015 at 7:08

Isha Aggarwal

4421 gold badge5 silver badges15 bronze badges

2 Comments

Isha Aggarwal Over a year ago

I have already mentioned that in the very first line of my answer. Just wanted to let the person know of an another debugging tool.

ngLover Over a year ago

OP asked for debugging but it was not related to that in accordance with OP perspective @ishaaggarwal is right

ngLover · Accepted Answer · 2015-12-09 07:10:13Z

1

Since you are using ng-submit page is being redirected before the response arrives and you provided any action URL as searchUser which is not a state or any html file so it being used to unknown address, it is async call so it will take some time you can use input types as button instead of submit.

Here is the working plunker.

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{message}}</h1>

    {{ username }}
    <form >
      <input  type="search" 
              required placeholder="Username to find" 
              ng-model="username"/>
      <input type="button"  ng-click="search(username)" value="search">
    </form>

    <div>
      <p>Username found: {{user.name + error}} {{user}}</p>
      <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}"/>    
    </div>

  </body>

</html>

edited Dec 9, 2015 at 7:10

answered Dec 9, 2015 at 7:00

ngLover

4,6183 gold badges24 silver badges42 bronze badges

2 Comments

Vivek Over a year ago

There is no need of action="searchUser" in your html.

ngLover Over a year ago

ya you are right just forgot to remove , just copy pasted that's why

Collectives™ on Stack Overflow

Beginners help to Angular JS debugging via console errors

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related