AngularJS高级程序设计读书笔记 -- 模块篇
一. 模块基础
1. 创建模块
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Test</title>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller('dayCtrl', function ($scope) {
// controller statements will go here
});
</script>
</head>
<body>
<div class="panel" ng-controller="dayCtrl">
<!-- HTML code here -->
</div>
</body>
</html>模块的三种重要角色:
- 将一个 AngularJS 应用程序 与 HTML 文档中的一部分相关联
- 起到通往 AngularJS 框架的关键特性的门户作用.
- 帮助组织一个 AngularJS 应用程序中的代码和组件.
angular.module 方法所接受的参数
| 名称 | 描述 |
|---|---|
| name | 新模块的名称 |
| requires | 该模块所以来的模块集合 |
| config | 盖默快的配置, 等效于调用 Module.config 方法. |
angular.module 方法返回一个 Module 对象. 该 Module 对象的成员方法如下表:
| 名称 | 描述 |
|---|---|
| animation(name, factory) | 支持动画特性, 见 第23章 |
| config(callback) | 注册一个在模块加载时对该模块进行配置的函数,见 9.4.1 |
| constant(key, value) | 定义一个返回一个常量的服务, 见 9.4.1 |
| controller(name, constructor) | 创建一个控制器, 见 13 章 |
| directive(name, factory) | 创建一个指令, 对标准HTML词汇进行扩展, 见 15-17 章 |
| factory(name, provider) | 创建一个服务, 见 14 章 |
| filter(name, factory) | 创建一个对显示给用户的数据进行格式化的过滤器.见 14 章 |
| provider(name, type) | 创建一个服务. |
| name | 返回模块名称 |
| run(callback) | 注册一个在 Angular 加载完毕后用于对所有模块进行配置的函数. |
| service(name, constructor) | 创建一个服务 |
| value(name, value) | 定义一个返回一个常量的服务. |
| factory, service, provider 的区别 | 见 14,18 章 |
可以按照任何顺序创建组件, AngularJS 将保证在开始调用工厂函数和执行依赖注入之前一切都已正确创建.
2. fluent API
Module 对象定义的方法返回的结果仍然是 Module 对象本身. 这是的能够使用 fluent API , 即多个方法调用可以链式调用链接在一起.
如下示例:
<script type="text/javascript">
angular.module('exampleApp', [])
.controller('dayCtrl', ['$scope', function ($scope) {
var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Staturday"]
$scope.day = dayName[new Date().getDay()];
}])
.controller('tomorrowCtrl', ['$scope', function ($scope) {
var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Staturday"]
$scope.day = dayName[(new Date().getDay() + 1) % 7]
}])
</script>
# angular.module 方法得到 Module 对象作为返回结果, 在这个对象上直接调用 controller 方法创建 dayCtrl 控制器. 从 controller 方法得到的结果与调用 angular.module 方法得到的结果是同一个 Module 对象, 所以可以使用它调用 controller 方法来创建 tomorrowCtrl .3. ng-app 与 模块
将 ng-app 指令应用到 HTML 中. ng-app 属性是在 AngularJS 生命周期的 bootstrap 阶段被使用.
4. 模块创建/查找陷阱
var myApp = angular.module('exampleApp'); # 查找名称为 exampleApp 的模块
var myApp = angular.module('exampleApp', []); # 创建名称为 exampleApp 的模块二. 使用模块组织代码
1. 模块依赖
任何 AngularJS 模块都可以依赖于在其他模块中定义的组件, 在复杂的应用程序中这是一个能够使得组织代码更为容易的特性.
模块的定义可以按照任何顺序定义. AngularJS 会加载定义在程序中的所有模块并解析依赖, 将每个模块中包含的构件进行合并.这个合并使得无缝的使用来来自其他模块的功能成为可能.
<script>
var controllersModule = angular.module("exampleApp.Controllers", [])
controllersModule.controller("dayCtrl", function ($scope, days) {
$scope.day = days.today;
});
controllersModule.controller("tomorrowCtrl", function ($scope, days) {
$scope.day = days.tomorrow;
});
angular.module("exampleApp.Filters", []).filter("dayName", function () {
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];
return function (input) {
return angular.isNumber(input) ? dayNames[input] : input;
};
});
var myApp = angular.module("exampleApp",
["exampleApp.Controllers", "exampleApp.Filters",
"exampleApp.Services", "exampleApp.Directives"]); // 依赖注入.
angular.module("exampleApp.Directives", [])
.directive("highlight", function ($filter) {
var dayFilter = $filter("dayName");
return function (scope, element, attrs) {
if (dayFilter(scope.day) == attrs["highlight"]) {
element.css("color", "red");
}
}
});
var now = new Date();
myApp.value("nowValue", now);
angular.module("exampleApp.Services", [])
.service("days", function (nowValue) {
this.today = nowValue.getDay();
this.tomorrow = this.today + 1;
});
</script>
// 模块的定义可以按照任何顺序定义. AngularJS 会加载定义在程序中的所有模块并解析依赖, 将每个模块中包含的构件进行合并.这个合并使得无缝的使用来来自其他模块的功能成为可能.如 exmapleApp.service 模块中的 days 服务依赖来自于 exampleApp 模块中的 nowValue 值服务, exmapleApp.directives 模块中指令依赖于来自 exampleApp.filter 模块中的过滤器.2. Module.config
传给 config 方法的函数在当前模块被加载后调用;
config 方法接受一个函数, 该函数在调用方法的模块被加载后调用. config 方法通常通过注入来自其他服务的值的方式用于配置模块.
3. Module.run
传给 run 方法的函数在所有模块被加载后调用
run 方法接受的函数只会在所有模块加载完成后以及解析完他们的依赖后才会被调用.
<script>
var myApp = angular.module("exampleApp",
["exampleApp.Controllers", "exampleApp.Filters",
"exampleApp.Services", "exampleApp.Directives"]);
// constant 方法与 value 方法类似, 但是创建的能够作为 config 方法所声明的依赖使用 (value 服务做不到).
myApp.constant("startTime", new Date().toLocaleTimeString());
myApp.config(function (startTime) {
console.log("Main module config: " + startTime);
});
myApp.run(function (startTime) {
console.log("Main module run: " + startTime);
});
angular.module("exampleApp.Directives", [])
.directive("highlight", function ($filter) {
var dayFilter = $filter("dayName");
return function (scope, element, attrs) {
if (dayFilter(scope.day) == attrs["highlight"]) {
element.css("color", "red");
}
}
});
var now = new Date();
myApp.value("nowValue", now);
angular.module("exampleApp.Services", [])
.service("days", function (nowValue) {
this.today = nowValue.getDay();
this.tomorrow = this.today + 1;
})
.config(function() {
console.log("Services module config: (no time)");
})
.run(function (startTime) {
console.log("Services module run: " + startTime);
});
</script>AngularJS高级程序设计读书笔记 -- 模块篇的更多相关文章
- AngularJS高级程序设计读书笔记 -- 大纲篇
零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...
- AngularJS高级程序设计读书笔记 -- 过滤器篇
一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...
- AngularJS高级程序设计读书笔记 -- 服务篇
服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- AngularJS高级程序设计读书笔记 -- 控制器篇
作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...
- javascript高级程序设计读书笔记-事件（一）
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- JavaScript高级程序设计-读书笔记（2）
第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age ...
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
随机推荐
- Servlet追忆篇：那些年一起学习的Servlet
title: servlet notebook: javaWEB tags:servlet --- Servlet是什么? Servlet是JavaWeb的三大组件之一. 作用类似银行前台接待: 接收 ...
- php web开发安全之csrf攻击的简单演示和防范（一）
csrf攻击,即cross site request forgery跨站(域名)请求伪造,这里的forgery就是伪造的意思.网上有很多关于csrf的介绍,比如一位前辈的文章浅谈CSRF攻击方式,参考 ...
- ASP.NET Core：部署项目到Ubuntu Server
概述 基于上一篇成功安装Ubuntu Server 16.10的基础上,接下来继续我们ASP.NET Core项目的部署之旅! 只是对于这些年整天和Windows打交道的我,初次使用Linux确实有点 ...
- SQL语法考核
--继上一篇MySQL的开发总结之后,适当的练习还是很有必要的-- SQL语法多变,不敢保证唯一,也不敢保证全对,如果错误欢迎指出,即刻修改. 一.现有表结构如下图 TABLENAME:afinfo ...
- AngularJs 常用的过滤器
date格式化 {{ 1304375948024 | date }} //结果:May 3, 2011 {{ 1304375948024 | date:"MM/dd/ ...
- SparkMLlib分类算法之支持向量机
SparkMLlib分类算法之支持向量机 (一),概念 支持向量机(support vector machine)是一种分类算法,通过寻求结构化风险最小来提高学习机泛化能力,实现经验风险和置信范围的最 ...
- .Net程序员学用Oracle系列(29)：PLSQL 之批量应用和系统包
1.批量数据操作 1.1.批量生成数据 1.2.批量插入数据 2.批量生成脚本 3.生成数据字典 4.常见系统包 4.1.DBMS_OUTPUT 4.2.DBMS_RANDOM 4.3.其它系统包及常 ...
- 开涛spring3(2.2) - IoC 容器基本原理及其helloword
2.2.1 IoC容器的概念 IoC容器就是具有依赖注入功能的容器,IoC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IoC ...
- 初步了解asp.net运行机制
客户通过客户端浏览器输入url地址请求资源,服务器接收到客户端请求,首先为http请求分配应用程序池,然后在应用程序池中创建请求需要的管道,这个管道对http请求的各个步骤进行了分配. 当用户第一次请 ...
- 容器扩展属性 IExtenderProvider 实现WinForm通用数据验证组件
大家对如下的Tip组件使用应该不陌生,要想让窗体上的控件使用ToolTip功能,只需要拖动一个ToolTip组件到窗口,所有的控件就可以使用该功能,做信息提示. 本博文要记录的,就是通过容器扩展属性 ...