angular.module 详解

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



原文:https://www.jianshu.com/p/d06cf28677ca

猜你喜欢

转载自www.cnblogs.com/showcase/p/10620688.html