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 ...
随机推荐
- asp.net 4.0+ webform 程序中集成mvc4混合应用
vs2015之后新建web站点可以很轻松的搭建mvc与webform的混合应用,vs2012下其实也可以通过简单的几部也可以实现,具体如下: 1.新建packages.config文件,里面加上必要的 ...
- [手机取证] CelleBrite UFED Touch系列使用视频
CelleBrite UFED Touch系列产品使用指导视频 (持续更新中) 1. CelleBrite UFED Touch产品介绍
- UI和3D场景同时都需要响应触摸事件
比如战斗场景,UI和3D场景同时都需要响应触摸事件,如果同时响应可能就会出现触摸UI的时候影响到了3D部分.为了解决这个问题在判断3D响应之前要先判断手指是否点击在UI上. 以前NGUI的时候都是自己 ...
- VS 远程调试之 “The visual studio remote debugger does not support this edition of windows”
The error message "The visual studio remote debugger does not support this edition of windows&q ...
- Android学习起步 - 新建工程及相关
新手起步迷迷糊糊,以下记录迷惑之处,大家共勉!!! 1.创建安卓应用工程 选择Andriod Application Project 点下一步直到完成. 二.下面是新建工程注意的地方 (1)首选删除系 ...
- chadang saidui
http://www.freehacktools.com/ wen http://www.hackyshacky.com/2013/02/Must-have-hacking-tools.html ...
- md5算法
md5算法 不可逆的:原文-->密文.用系统的API可以实现: 123456 ---密文 1987 ----密文: 算法步骤: 1.用每个byte去和11111111做与运算并且得到的是int类 ...
- 《Linux企业应用案例精解(第2版)》新书发售啦
本书在出版当年就获得了不错的销量,同时被中国科学院国家科学图书馆.中国国家图书馆.首都图书馆.清华大学.北京大学等上百所国内综合性大学图书馆收录为馆藏图书,在IT业界赢得了良好的口碑.随后2012年年 ...
- linux ssh publickey登录
一.公钥认证的基本思想: 对信息的加密和解密采用不同的key,这对key分别称作private key和public key,其中,public key存放在目标服务器上,而private key为特 ...
- angularjs中文社区
http://angularjs.cn/ 中文社区 https://angular.cn/features.html 官方文档中文版