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

最新文章

  1. Excel转Html
  2. POJ2479 Maximum sum[DP|最大子段和]
  3. 【51Nod 1616】【算法马拉松 19B】最小集合
  4. C# byte数组与Image的相互转换
  5. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理
  6. mysql优化之连接优化(open-files-limit与table_open_cache)
  7. PHP程序员最常犯的11个MySQL错误
  8. Chrome 浏览器各版本下载大全
  9. hdu 1540 Tunnel Warfare (区间线段树(模板))
  10. [每日一题] 11gOCP 1z0-053 :2013-09-30 ASMCMD.......................................................8
  11. 鸟哥之安裝 CentOS7.x
  12. POJ3624--01背包
  13. 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”
  14. MIDle生命周期详解,以及工作原理
  15. Codeforces 375B Maximum Submatrix 2 (DP)
  16. 【Dalston】【第二章】客户端负载均衡(Ribbon)
  17. python turtle 绘制图像
  18. 用SQL实现的BASE64加密及解密函数(SQL2005以上有效)
  19. LeetCode 138——复制带随机指针的链表
  20. How to install local .deb packages

热门文章

  1. maven项目中,添加依赖后,出现&quot;Dependency &#39;xxxx‘ not found&quot;解决过程
  2. Wpf 关闭当前窗体 打开新窗体
  3. Java中使用Socket连接判断Inputstream结束,java tcp socket服务端,python tcp socket客户端
  4. spring 多个切面如何有序执行
  5. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
  6. Python第一阶段03
  7. CSS3 mask 遮罩蒙版效果
  8. Windows 2016 服务器安全配置和加固
  9. CF1237D Balanced Playlist
  10. 图解JavaScript闭包面试题