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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞