关于 angularjs：Angular 模块仅适用于内联 javascript

Angular module only works with inline javascript

我正在学习 Angular，并且仅当所有代码都内联在页面上时，才能将控制器添加到我的模块中。如果我用 <script src=”myModuleFile.js”> 替换它，它会失败

“Error: [$injector:unpr]
http://errors.angularjs.org/1.3.11/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20personController

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html ng–app=“app”>
<head>
<meta charset=“UTF-8”>

<link rel=“stylesheet” href=“web/stylesheets/app.css”/>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js”>
<!– wont work if I include it this way –>
<script src=“web/js/app.min.js”>
<!– but works if I put it in here –>

</head>
<body>
<label>Name:</label>
<input type=“text” ng–model=“yourName” placeholder=“Enter a name here”><hr />
Hello {{ yourName }}!

<p>My first expression: {{ 5 + 5 }}</p>

First Name: <input type=“text” ng–model=“firstName”>
Last Name: <input type=“text” ng–model=“lastName”>

Full Name: {{firstName +“” + lastName}}

<ul>

<li ng–repeat=“x in names”>
{{ x.name + ‘, ‘ + x.country }}

</li>

</ul>

<button ng–click=“count = count + 1”>Click me!</button>
<p>{{ count }}</p>
</body>
</html>

相关讨论

你在缩小你的来源吗？您似乎没有使用 $inject，并且似乎也没有使用依赖项数组。您需要一些方法来注入您的依赖项，否则它们会在缩小时中断。
由于您使用的是 var app = angular.module(‘app’, [])，您是否在 myModuleFile.js 中重新初始化了您的模块？
顺便说一句，您是否向我们提供了完整的错误消息？
@claies 在任何教程中都没有表明控制器具有依赖关系。当 angularJS 文档位于具有类似错误的外部文件中时，许多关于 angularJS 文档的教程都不起作用。
@rebornix javascript 的第一个代码块是该文件中的内容。我错过了一步吗？是的，这就是完整的信息。

正如您现在可能已经发现的那样(通过您接受给定的答案)， $scope 实际上是您的控制器的依赖项。不幸的是，JavaScript 代码在缩小时崩溃是很常见的，但这是 JavaScript 的一个怪癖，它不是 Angular 特定的。不要让它阻止您使用这个惊人的框架！
这是我使用 javascript 3 年来第一次遇到它。主要是 jQuery 和 canvas 动画。 AngularJS 材质和基础应用程序看起来非常好。迫不及待地无法与他们一起做事。

正如 Claies 在评论中提到的，错误消息看起来像是在尝试为依赖项”a”寻找提供者，这可能是缩小的结果。

如果你喜欢：

1	angular.module(..).controller(“SomeCtrl”, function($scope){});

它可能会将$scope 缩小为a。因此，您应该使用：

1	angular.module(..).controller(“SomeCtrl”, [“$scope”, function($scope){}]);

因为字符串不会被缩小，Angular 会知道哪个依赖是哪个。当然，另一种方法是使用 $injector，正如 Claies 也提到的那样。

Angular module only works with inline javascript

猜你喜欢