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

Beginners help to Angular JS debugging via console errors

本文关键字：Angular JS 调试 帮助 控制台 错误 初学者      更新时间：2023-09-26

AngularJS对我来说是新的(而且很难(。所以我想学习如何调试。目前我正在学习一门课程，搞砸了一些事情。想知道如何解释控制台错误并解决错误。

plnkr.co 代码

索引.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>

脚本.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);
}());

控制台只说

搜索用户：1 获取 http://run.plnkr.co/lZX5It1qGRq2JGHL/searchUser？ 404 (未找到(

任何帮助将不胜感激。

在你的表格中，你写了这个action

<form action="searchUser"

这样做是它会尝试提交到具有currentHostName''searchUser的url，因此在这种情况下，您正在plunker上进行测试，因此plunker网址。

您可以更改提交表单的网址。如果你想搜索ajax明智，那么你甚至不需要指定动作部分。您可以让您的服务/工厂为您做出这样的决定。

虽然与调试这个特定错误并不完全相关，但有一个 chrome 扩展"ng-inspector"，它对 angularJS 新手非常有用。您可以在范围内查看每个角度变量的值及其值。希望对您有所帮助！这是chrome扩展程序的链接：https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=en

由于您使用的是ng-submit页面在响应到达之前被重定向，并且您提供了任何操作URL作为searchUser，这不是状态或任何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>
相关文章：