初學者有助於通過控制檯錯誤進行Angular JS調試

AngularJS對我來說是新的（也是困難的）。所以我想學習如何調試。目前我正在關注一門課程，並搞砸了一些東西。想知道如何解釋控制檯錯誤並解決錯誤。初學者有助於通過控制檯錯誤進行Angular JS調試

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

}());

控制檯只是說

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

任何幫助，將不勝感激。

來源

2015-12-09 Norfeldt

在您的形式，action你寫了這

<form action="searchUser"

這樣做是什麼，它會嘗試提交，以currentHostName \ searchUser一個URL，所以在這你的情況下，你正在測試的運動員，因此plunker網址。

您可以更改提交表單的網址。 Incase你想要明智地搜索ajax，那麼你甚至不需要指定動作部分。您可以讓您的服務/工廠爲您打電話。

來源

2015-12-09 07:04:40 Yasser

由於您使用的NG-提交頁面的響應到達之前將被重定向到你所提供的任何行動URL爲searchUser這是不是一個國家或任何HTML文件，因此它被用於未知的地址，它是異步調用，因此需要一段時間才能使用輸入類型button而不是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>

來源

2015-12-09 07:00:23 ngLover

在您的html中不需要** action =「searchUser」**。 – Vivek

你是對的只是忘了刪除，只是複製粘貼，這就是爲什麼 – ngLover

雖然與調試這個特定的錯誤並不完全相關，但是有一個chrome擴展名「ng-inspector」，對於angularJS新手來說非常有用。您可以在範圍內查看每個角度變量的值及其值。希望能幫助到你！以下是Chrome擴展的鏈接：https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=en

來源

2015-12-09 07:08:36

我已經提到，在我的答案的第一行。只是想讓這個人知道另一個調試工具。 –

OP要求進行調試，但與OP的觀點不符@ishaaggarwal是正確的 – ngLover

初學者有助於通過控制檯錯誤進行Angular JS調試

回答

相關問題