AngularJS 模块
模块包含了主要的应用代码。
一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。
可以将module理解成一个容器,可以往其中放入controllers、services、filters、directives等应用的组成部分。
创建模块
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
AngularJS允许我们使用angular.module()方法来声明模块。
这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。
angular.module('myApp', []);
这个方法相当于AngularJS模块的setter方法,是用来定义模块的。
参数
"myApp" 参数对应执行应用的 HTML 元素。
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。
调用这个方法时如果只传递一个参数,就可以用它来引用模块。例如,可以通过以下代码来引用myApp模块:
angular.module('myApp')
这个方法相当于AngularJS模块的getter方法,用来获取对模块的引用。
接下来,就可以在angular.module('myApp')返回的对象上创建我们的应用了。
module导入
上面的例子中,可以发现.module方法第二个参数是一个空数组,这个空数组是为了指定在此module中需要用到哪些其他的modules。
现在,我们定义另一个module,然后将其导入到我们定义好的名为myApp的module中:
angular.module('myApp.services', [])
.factory('testFactory', function(){
return {
Hello: function(){
return "Hello World!";
}
}
});
可以看到,我们将此module命名为myApp.services并且为其定义了一个factory。注意到首行最后没有分号。
现在,将我们新定义的module导入到第一个module里:
angular.module('myApp', ['myApp.services']);
我们需要做的只是,将module使用引号包裹放入到.module方法第二个参数的空数组里面,多个modules使用逗号隔开。
现在我们就可以使用第二个module里的方法了:
angular.module('myApp', ['myApp.services'])
.run(function(testFactory){
var hello = testFactory.Hello();
console.log(hello);
});
控制台输出:Hello World!
添加控制器
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
添加指令
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
不同module间的依赖注入
第一个module里定义一个factory
angular.module('myApp1', [])
.factory('Chats', function() {
return{
all: function() {
return '123';
}
}
});
第二个module里定义一个controller,在这个controller里注入module1的factory
注:这时在页面里调用是不行的,要么在[ ]里写入对module1的依赖['myApp1'],要么再写一个module3同时依赖于module1和module2
angular.module('myApp2', [])
.controller('c2', function($scope, Chats) {
$scope.pp=Chats.all();
});
写第三个module,同时依赖于module1和module2
angular.module('myApp3', ['myApp1','myApp2']);
然后在页面里调用module3的app和module2的controller,这样就行了
<div ng-app="myApp3" ng-controller="c2">
<h1>Hello {{pp}}</h1>
</div>
输出结果: Hello 123