Angular模块仅适用于内联javascript
Angular module only works with inline javascript
我正在学习Angular,只有当所有代码都在页面上内联时,才能向模块添加控制器。如果我用<script src="myModuleFile.js"></script>
替换它,会失败
"错误:[$injector:unp]http://errors.angularjs.org/1.3.11/$injector/unp?p0=a提供商%20%3C-%20a%20%3C/%20人员控制器
var app = angular.module('app', [])
.config([function(injectables){
console.log('configuring app');
}]).run([function(injectables){
console.log('running app');
}]).controller("personController", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="web/stylesheets/app.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<!-- wont work if I include it this way -->
<script src="web/js/app.min.js"></script>
<!-- but works if I put it in here -->
<script></script>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"><hr />
<h1>Hello {{ yourName }}!</h1>
<div ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
<div ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</body>
</html>
正如Claies在评论中提到的,错误消息看起来像是试图为依赖项"a"找到提供程序,这可能是缩小的结果。
如果你喜欢:
angular.module(..).controller("SomeCtrl", function($scope){});
它可能会将$scope
缩小为仅a
。因此,您应该使用:
angular.module(..).controller("SomeCtrl", ["$scope", function($scope){}]);
因为字符串不会被缩小,Angular会知道哪个依赖项是哪个。另一种方法当然是使用$injector,正如Claies也提到的那样。
相关文章:
- JavaScript警报适用于int,但不适用于string
- Javascript仅适用于alert()和Debug模式
- Javascript仅适用于jQuery mobile中的页面刷新
- Javascript上传按钮问题,适用于Wordpress
- 支持 JavaScript 的检查例程适用于 Chrome/Opera/IE,但不适用于 Firefox/Safari
- 如何调试遗留的javascript代码(适用于IE,但在Google Chrome中不正常)
- JavaScript调整iFrame大小-适用于Firefox/IE,但不适用于Chrome
- 读取本地文件的Javascript适用于Windows,但不适用于Linux
- Javascript适用于jsfiddle,但不适用于我的网站
- Javascript 适用于 Firefox 和 Chrome,但不适用于 IE
- Javascript适用于Firefox而不是IE.为什么
- JavaScript适用于IE,但不适用于Firefox和Chrome
- 如何从javascript(适用于Chrome)注册GCM主题
- Javascript 适用于 doctype html4,但不适用于 html5
- Javascript 适用于 Chrome 和 Opera & Edge,但不适用于 FireFox 或 IE
- 用于填充下拉列表的Javascript适用于IE9以外的所有应用程序
- Javascript适用于Firefox、Chrome和Safari,但不适用于IE
- Javascript适用于iPhone,但不适用于iPad
- javascript适用于Chrome和Firefox,但不适用于IE
- internetexplorer8-为什么这个JavaScript适用于FF而不是IE8