一、定义

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

  先看下全局定义的控制器

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. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  2. System.Drawing.Color

    System.Drawing.Color color=Color.Red; System.Drawing.Color color=Color.FromArgb(,,); System.Drawing. ...

  3. [手机取证] “神器”IP-BOX的一些问题

    网上最近传的纷纷扬扬的iOS密码破解神器IP-BOX,很多人感兴趣,作为一个该产品的老用户,来破除一下迷信,顺便做个普及~ Q1:这东西好神奇,是不是所有都能破解? A1:支持简单密码的穷举,有条件的 ...

  4. (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 ...

  5. 一些常用的sql语句

    1.查询表里的null值:is null 和 is not null  select*from student where email is null       返回的该表里面邮箱为null的结果集 ...

  6. JS 学习(三)DOM

    HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. HTML DOM树: Java ...

  7. eclipse+android+opencv环境搭建的步骤

    ---恢复内容开始--- 2016年4月12日编写 一.第一步:搭建eclipse开发环境 1.在eclipse官网中下载eclipse.zip进行解压即可.没有版本要求,但要和电脑的位数相匹配.如: ...

  8. ubuntu访问supermicro ikvm

    https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-get-on-ubuntu-16-04 安装 ...

  9. Hash函数及其应用

    本文部分内容摘自网络,参考资料链接会在文后给出,在此感谢原作者的分享. 计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数 ...

  10. 构建最小的docker容器

    创建一个最小的基本镜像: tar cv --files-from /dev/null | sudo docker import - skycn/base 建一个hello.go: package ma ...