初学者通过控制台错误帮助Angular JS调试

Question

AngularJS对我来说是新的（而且很难）。 所以我想学习如何调试。 目前，我正在学习课程，弄乱了一些东西。 想知道如何解释控制台错误并解决错误。

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);

}());

控制台只说

searchUser：1 GET http://run.plnkr.co/lZX5It1qGRq2JGHL/searchUser吗？ 404（未找到）

任何帮助，将不胜感激。

Answer 1

由于您正在使用ng-submit，因此在响应到达之前页面已被重定向，并且您以searchUser形式提供了任何操作URL ，而该状态不是状态或任何html文件，因此它被用于未知地址，因此它是异步调用，因此需要花费一些时间您可以将输入类型用作button而不是submit 。

这是工作中的笨蛋。

<!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>

Answer 2

以你的形式，你已经写了这个action

<form action="searchUser"

这是因为它将尝试使用currentHostName \\ searchUser提交到url，因此在这种情况下，您将在plunker上进行测试，因此将在plunker url上进行测试。

您可以更改提交表单的网址。 如果您想明智地搜索Ajax，则甚至无需指定操作部分。 您可以让您的服务/工厂代您致电。

Answer 3

尽管与调试此特定错误并不完全相关，但是有一个chrome扩展名“ ng-inspector”，对于angularJS新手来说非常有用。 您可以按范围查看每个角度变量的值及其值。 希望能帮助到你！ 这是chrome扩展程序的链接： https : //chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=zh-CN

初学者通过控制台错误帮助Angular JS调试

问题描述

3 个解决方案

解决方案1
1 2015-12-09 07:00:23

解决方案2
1 已采纳 2015-12-09 07:04:40

解决方案3
1 2015-12-09 07:08:36

初学者通过控制台错误帮助Angular JS调试

问题描述

3 个解决方案

解决方案1 1 2015-12-09 07:00:23

解决方案2 1 已采纳 2015-12-09 07:04:40

解决方案3 1 2015-12-09 07:08:36

解决方案1
1 2015-12-09 07:00:23

解决方案2
1 已采纳 2015-12-09 07:04:40

解决方案3
1 2015-12-09 07:08:36