初学者通过控制台错误帮助Angular JS调试
[英]Beginners help to Angular JS debugging via console errors
问题描述
AngularJS is new to me (and difficult). 
AngularJS对我来说是新的（而且很难）。 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. 想知道如何解释控制台错误并解决错误。
index.html 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 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 ?
Any help would be appreciated. 任何帮助，将不胜感激。
3 个解决方案
解决方案1
1 2015-12-09 07:00:23
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 . 由于您正在使用ng-submit，因此在响应到达之前页面已被重定向，并且您以searchUser形式提供了任何操作URL ，而该状态不是状态或任何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>
解决方案2
1 已采纳 2015-12-09 07:04:40
In your form, action you have written this 以你的形式，你已经写了这个action
<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. 这是因为它将尝试使用currentHostName \\ searchUser提交到url，因此在这种情况下，您将在plunker上进行测试，因此将在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. 如果您想明智地搜索Ajax，则甚至无需指定操作部分。 You can let your service/factory make that call for you. 您可以让您的服务/工厂代您致电。
解决方案3
1 2015-12-09 07:08:36
Though not exactly related to debugging this particular error, there is a chrome extension "ng-inspector" which is very useful for angularJS newbies. 尽管与调试此特定错误并不完全相关，但是有一个chrome扩展名“ ng-inspector”，对于angularJS新手来说非常有用。 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 这是chrome扩展程序的链接： https : //chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=zh-CN
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.