angular.module 详解

2023年1月12日 159次阅读 来源: 邪人君子

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