Помощь новичкам в отладке Angular JS через ошибки консоли

AngularJS является новым для меня (и сложным). Поэтому я хотел бы научиться отлаживать. В настоящее время я следую за курсом и что-то напутал. Хотелось бы узнать, как интерпретировать ошибку консоли и устранить ошибку.

код plnkr.co

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 Не Найдено)

Любая помощь будет оценена.

Источник

3 ответа

Решение

В вашей форме, action ты написал это

<form action="searchUser"

Он попытается отправить URL-адрес с помощью currentHostName \ searchUser, так что в этом случае вы тестируете на plunker, следовательно, url plunker.

Вы можете изменить URL-адрес, куда отправляется форма. Если вы хотите искать 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>
Источник
Другие вопросы по тегам