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 ...
随机推荐
- Linux基础之常用命令(1)
一 linux命令的格式 1.命令 [选项] [参数] ls list 显示目录下内容 ① 命令名称:ls 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 功能 ...
- 第二周：If判断语句程序当中的作用简介
1.If语句的作用: 在我们编写程序时经常会遇到内容判断的问题,比如判断内容的真假或者值的大小分别输出内容的问题 这时就会用到我们的If判断语句了,顾名思义,if在英文单词中意思为如果,在Java中他 ...
- assert断言基础用法
Python的assert是用来检查一个条件,如果它为真,就不做任何事.如果它为假,则会抛出AssertError并且包含错误信息
- 删除项目中的.svn信息
有时候我们新开发一个项目时,会将以前的项目从svn上down下来,然后复制一份.这样就会有个问题,项目中的svn信息就会一直存在.下面介绍删除方法: 1.新建一个.txt的文档.然后将下面代码粘贴到文 ...
- JAVA 判断Socket 远程端是否断开连接
最近在做项目的时候,遇到这样一个问题,如何判断 Socket 远程端连接是否关闭,如果关闭的话,就要重建连接Socket的类提供了一些已经封装好的方法, 如 isClosed().isConnect ...
- MCV之行为
在Controller中的方法都称为行为,所以的公共方法都可以在浏览器中调用,返回值为:ActionResult的类型或其子类,这个类为抽象类,所以这为抽象编程,方法的结果返回为直接或间接继承自Act ...
- Mysql 数据库创建基本步骤
1.创建数据库 create database school; 2.使用数据库 Use school; 3.创建用户 create user jame@localhost identified by ...
- shell命令快捷键
在shell命令终端中,Ctrl+n相当于方向向下的方向键,Ctrl+p相当于方向向上的方向键. 在命令终端中通过它们或者方向键可以实现对历史命令的快速查找.这也是快速输入命令的技巧. 在命令 ...
- MS - 2 - 设计包含 min 函数的栈
定义栈的数据结构,要求添加一个 min 函数,能够得到栈的最小元素. 要求函数 min.push 以及 pop 的时间复杂度都是 O(1). template<typename T> st ...
- android 非activity如何得到布局文件 （java文件中获取布局文件）
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...