一、定义

  如何将全局定义的控制器模块化

  先看下全局定义的控制器

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学习笔记(二)----模块的更多相关文章

  1. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  2. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  3. AngularJS学习笔记(二)

    一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...

  4. AngularJS 学习笔记二

    AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...

  5. AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

    这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...

  6. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  7. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  10. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. 使用Ninject进行DI(依赖注入)

    Ninject是一个快如闪电.超轻量级的基于.Net平台的依赖注入框架.它能够帮助你把应用程序分离成一个个松耦合.高内聚的模块,然后用一种灵活的方式组装起来.通过使用Ninject配套你的软件架构,那 ...

  2. PHP常用函数总结(不定期更新)

    array_merge函数和两个数组相加的区别 array_merge函数,在出现相同的索引数组,会把两个数组中的索引数组,进行融合,以第一个数组的索引最大值往后相加,如果是关联数组,后面数组的值覆盖 ...

  3. [转载]《民航科技》2012年4月专家论坛:程延松《关于中国民航SWIM框架及技术实现探讨》

    专家介绍:程延松,现任成都民航空管发展有限公司总经理,理学博士,高级工程师,长期从事空管技术研究和产品研发工作,作为课题负责人,参与了国家863计划.国家科技支撑计划.国家空管委重点课题.民航局重点课 ...

  4. js 循环

    //数组循环var a = [1, 2, 3, 4, 5, 6];for (var i = 0, l = a.length; i < l; i++) { console.log(a[i]);} ...

  5. git上传到阿里云code

    一.在阿里云code(kelude)注册用户,新建项目.二.安装Git后使用GitBash生产ssh key:(https://zhidao.baidu.com/question/1303468264 ...

  6. oracle并发请求异常,运行时间超长(一般情况下锁表)

    1.如果前台无法取消请求出现错误: 则后台更新 update fnd_concurrent_requests    set status_code = 'X', phase_code = 'C'  w ...

  7. 剑指Offer:面试题32——从1到n整数中1出现的次数(java实现)

    问题描述: 输入一个整数n,求1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11,12,1一共出现了5次. 思路:(不考虑时间效率的解法,肯定不 ...

  8. (转)You might not need jQuery

    You might not need jQuery You certainly can support IE 9 and below without jQuery, but we don't. Ple ...

  9. 小小收获for python

    包导入问题: 包之外导入:还是按照sys.path的搜索路径进行模块的导入 包内的导入:python3.0+     完全区分绝对导入和相对导入 from . import string     #在 ...

  10. lintcode-【中等】恢复IP地址

    题目 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址.链接. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.255.11. ...