javascript Angular JS 错误：[$injector:modulerr]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22287269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS Error: [$injector:modulerr]
提问by ryandawkins
Edit: Now that I have actually worked using angularjs, I do not recommend anyone do what I was trying to accomplish.
编辑：现在我已经实际使用 angularjs，我不建议任何人做我想要完成的事情。
This is my first Angularjs application so I am a nooby, and still trying to figure things out. But I am receiving an error in my chrome console that says this:
这是我的第一个 Angularjs 应用程序，所以我是个菜鸟，并且仍在努力解决问题。但是我在我的 chrome 控制台中收到一个错误，上面写着：
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.1/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...1) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:30
r angular.min.js?1394393789:7
e angular.min.js?1394393789:29
cc angular.min.js?1394393789:32
c angular.min.js?1394393789:17
bc angular.min.js?1394393789:18
cd angular.min.js?1394393789:17
(anonymous function) angular.min.js?1394393789:208
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S
Which sends me to this page: http://docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E
这将我发送到此页面：http: //docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs。 org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E
I am not porting any application over from a 1.2 and under. I followed the documentation for some simple code below..
我不会从 1.2 及以下版本移植任何应用程序。我按照下面的一些简单代码的文档..
This is the angular doc this code is based off of: http://docs.angularjs.org/tutorial/step_02
这是此代码基于的角度文档：http: //docs.angularjs.org/tutorial/step_02
What is shown in the browser is the header tag with {{split.description}}. Any thoughts?
浏览器中显示的是带有 {{split.description}} 的标题标记。有什么想法吗？
My HTML
我的 HTML
<html lang="en" ng-app="app">
<head>
<!-- My CSS Here -->
</head>
<body>
<div ng-controller="SplitController">
<div ng-repeat="split in splits">
<h4>{{split.description}}</h4>
</div>
</div>
</body>
</html>
My JavaScript
我的 JavaScript
var Split = function(data)
{
this.description = data['description'];
}
function getSplits(parentid) {
var url = "/transaction/split/get";
var ajax = $.ajax({
type: 'GET',
dataType: 'json',
url: url,
data: {
parentid: parentid
},
beforeSend: function(data){
},
success: function(data){
data = JSON.parse(data, true);
var splits = [];
for(var i = 0; i < splits.length; i++)
{
splits.push(new Split(splits[i]));
console.log(splits[i]);
}
var app = angular.module("app", []);
app.controller('SplitController', function($scope){
$scope.splits = splits;
});
},
error: function(data){
//$('body').html(JSON.stringify(data));
}
}).done(function(data){
});
}
$(document.ready(function(){
getSplits(1);
});
采纳答案by pcw216
I really wouldn't suggest doing this, for reasons that others already stated, but you can always get a handle to the angular $scope of a given element in some jquery handler. Just define your controller as anybody normally would (in the body of a script).
我真的不建议这样做，因为其他人已经说过的原因，但您总是可以在某些 jquery 处理程序中获得给定元素的 angular $scope 句柄。只需像往常一样（在脚本正文中）定义您的控制器。
success: function(data){
... //splits and whatnot
var $scope = angular.element($("div[ng-controller='SplitController']")).scope()
$scope.$apply(function(){
$scope.splits = splits;
})
}
You can't define a controller like you're doing because ng-app is going to run on document.ready. It will be looking for the controller you specified with ng-controller which has yet to be defined. It's perfectly okay for you to define a SplitController that doesn't initialize 'splits' or any data, because ng-repeat will be watching for changes to 'splits' and will keep the DOM up to date.
您不能像现在这样定义控制器，因为 ng-app 将在 document.ready 上运行。它将寻找您使用 ng-controller 指定的尚未定义的控制器。您可以定义一个不初始化 'splits' 或任何数据的 SplitController，因为 ng-repeat 将监视对 'splits' 的更改并使 DOM 保持最新。
回答by Shimon Rachlenko
You are mixing angular and jQuery code in a wrong way. When programming angular you should consider jQuery as a low level. No need fordocument.ready- angular will do it for you. On the other hand, you should define an application module and put it's name in ng-appdirective. All the other stuff, like controllers, are defined on that module.
您以错误的方式混合了 angular 和 jQuery 代码。在对 angular 进行编程时，您应该将 jQuery 视为低级。不需要document.ready- angular 会为你做。另一方面，您应该定义一个应用程序模块并将其名称放在ng-app指令中。所有其他东西，如控制器，都在该模块上定义。
回答by Charlie Martin
This is a typo...
这是笔误...
ng-app"app"
It obviously needs to be..
显然需要..
ng-app="app"
Also, I wouldn't wait until your ajax call finishes to bootstrap angular. You should just do it on page load and consider using the angular tools for making your ajax call such as the $http service and potentially the ngRoute resolve property
另外，我不会等到你的 ajax 调用完成来引导 angular。您应该只在页面加载时执行此操作，并考虑使用 angular 工具进行 ajax 调用，例如 $http 服务和潜在的 ngRoute 解析属性
回答by Matsemann
Your code isn't even close to the one you're saying it's based off of. You shouldn't use document.ready, not use $.ajax and your controller should be the one making the ajax request, not the result itself of the ajax request.
您的代码甚至与您所说的基于的代码都不接近。您不应该使用 document.ready，而不是使用 $.ajax，并且您的控制器应该是发出 ajax 请求的人，而不是 ajax 请求的结果本身。
The code for step 2looks like this:
第 2 步的代码如下所示：
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM? with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM?',
'snippet': 'The Next, Next Generation tablet.'}
];
});
If you would like to use ajax instead, you should inject the $httpservice into your controller and use that.
如果您想改用 ajax，您应该将该$http服务注入您的控制器并使用它。
var app = angular.module('app', []);
app.controller('SplitController', function($scope, $http) {
$http.get( // or post, put, delete
'/transaction/split/get',
{some data}
).success(function(returndata) {
$scope.splits = returndata;
});
});
回答by Blasanka
If anyone use $routeProvider, below may be the mistake:
如果有人使用$routeProvider，以下可能是错误的：
In my case I used $routeProvider.when({})without url as first parameter and that was the case, when I add the url like below, error was gone.
在我的情况下，我$routeProvider.when({})没有使用url 作为第一个参数，就是这样，当我添加如下所示的 url 时，错误消失了。
$routeProvider.when('/post/:id', {
templateUrl: 'views/post.html',
controller: 'PostController'
})
