Angularjs学习笔记(二)----模块
一、定义
如何将全局定义的控制器模块化
先看下全局定义的控制器
var HelloCtrl=function($scope){
$scope.name='World';
}
模块化后代码
angular.module('hello',[])
.controller('HelloCtrl',function($scope){
$scope.name='World';
});
AngularJS为自己定义了全局命名空间angular,他提供多种功能及不少便利函数,module就是其中之一。
定义新的模块,需要传入名字,作为调用module的第一个参数,而第二个参数则表达此模块依赖哪些其他模块(上例中的模块不依赖其他模块)。
angular.module的调用会返回新创建模块的实例,然后就开始定义新的控制器。controller函数的参数如下:
- 控制器的名字(字符串类型)
- 控制器的构造函数
模块已经定义好了,现在要告知AngularJS它的存在,这只要为ng-app属性赋值即可。
<body ng-app="hello">
二、模块的生命周期
2.1 配置阶段
2.2 编译阶段
2.3 不同阶段与不同的注册方法
| 对象种类 | 可以在配置阶段注入 | 可以在运行阶段注入 | |
| Constant | 常量值 | Yes | Yes |
| Variable | 变量值 | — | Yes |
| Service | 构造函数创建的新对象 | — | Yes |
| Factory | 工厂函数返回的新对象 | — | Yes |
| Provider | $get工厂函数创建的新对象 | Yes | — |
三、模块依赖
angular.module('app',['engines'])
.factory('car',function($log,dieselEngine){
return{
start:function(){
$log.info('Starting'+dieselEngine.type);
};
}
});
angular.module('engines',[])
.factory('dieselEngine',function(){
return{
type:'diesel'
};
});
car服务在app模块中定义,app模块依赖于engines模块,后者定义dieselEngine服务,因此car可以注入dieselEngine.
下面这个例子说明兄弟模块的服务也互相可见。car也注入了dieselEngine。
angular.module('app',['engines','cars'])
angular.modul('cars',[])
.factory('car',function($log,dieselEngine)
return{
start:function(){
$log.info('Starting'+dieselEngine.type);
}
};
});
angular.module('engines',[])
.factory('dieselEngine',function(){
return{
type:'diesel'
};
});
下面这个例子来说明每个名字只存在唯一的服务,我们可以利用这点,在依赖某模块的同时去覆盖此模块提供的服务。
angular.module('app',['engines','cars'])
angular.modul('cars',[])
.factory('car',function($log,dieselEngine)
return{
start:function(){
$log.info('Starting'+dieselEngine.type);
};
}
})
.factory('dieselEngine',function(){
return{
type:'diesel'
};
});
car服务里的dieselEngine服务是自己模块的服务,它将兄弟模块engines里的同名服务给覆盖掉了。
Angularjs学习笔记(二)----模块的更多相关文章
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJS学习笔记(二)
一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...
- AngularJS 学习笔记二
AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Modules
原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- 锋利的jQuery学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
- System.Drawing.Color
System.Drawing.Color color=Color.Red; System.Drawing.Color color=Color.FromArgb(,,); System.Drawing. ...
- [手机取证] “神器”IP-BOX的一些问题
网上最近传的纷纷扬扬的iOS密码破解神器IP-BOX,很多人感兴趣,作为一个该产品的老用户,来破除一下迷信,顺便做个普及~ Q1:这东西好神奇,是不是所有都能破解? A1:支持简单密码的穷举,有条件的 ...
- (Collection)347. Top K Frequent Elements
Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2 ...
- 一些常用的sql语句
1.查询表里的null值:is null 和 is not null select*from student where email is null 返回的该表里面邮箱为null的结果集 ...
- JS 学习(三)DOM
HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. HTML DOM树: Java ...
- eclipse+android+opencv环境搭建的步骤
---恢复内容开始--- 2016年4月12日编写 一.第一步:搭建eclipse开发环境 1.在eclipse官网中下载eclipse.zip进行解压即可.没有版本要求,但要和电脑的位数相匹配.如: ...
- ubuntu访问supermicro ikvm
https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-get-on-ubuntu-16-04 安装 ...
- Hash函数及其应用
本文部分内容摘自网络,参考资料链接会在文后给出,在此感谢原作者的分享. 计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数 ...
- 构建最小的docker容器
创建一个最小的基本镜像: tar cv --files-from /dev/null | sudo docker import - skycn/base 建一个hello.go: package ma ...