文档章节

学习 AngularJS (三) module

刘军兴
 刘军兴
发布于 2015/12/08 09:39
字数 1208
阅读 98
收藏 2

再看 kityminder-editor 部分代码, 上来就是 angular module:

angular.module('kityminderEditor', [
    'ui.bootstrap',
    'ui.codemirror',
    'ui.colorpicker'
])
       .config(...) ...

看不明白, 怎么办? 只能接着学习了!

查 angularjs 英文官网, 终于找到 module 的网页了:
    https://docs.angularjs.org/guide/module

 

所以, 什么是一个 Module?

原文: You can think of a module as a container for the different parts of your app - controllers,
  services, filters, directives, etc.

这样从用途上定义了模块(module)是一个我的应用的(杂七杂八的)各种东西的总容器.
于是, 自然而然的问题产生了, 一个 app 对应一个还是多个 module? 一个 module 的生命周期如何?

Why?

大部分应用有一个 main 方法来实例化对象, 并将应用的各个不同部分 wires(关联起来)在一起.
Angular 的应用没有这个 main 方法. 而是用 modules 来声明应用是如何启动(bootstrap)的.

* 声明式语法容易理解.
* 代码打包为可重用的 module.
* module 可按照任意顺序加载, 甚至并行加载, 因为模块延迟执行
* 单元测试只需要加载所需模块而非所有, 从而快一些
* end-to-end 测试可使用 module 重载配置.

看一下 module 的接口, 似乎是一组注册/定义各种类部件的函数集合: 
   https://docs.angularjs.org/api/ng/type/angular.Module

class angular.Module {
  provider(name, providerType) -- 注册 provider?
  factory(name, providerFunction) -- 注册 factory?
  service(name, ctor) -- 注册 service
  value(name, object) -- 变量 name=object ?
  constant(name, object) -- 常量 name=object ...?
  decorator(The, This) ...修饰器 ?
  animation(name, animationFactory)
  filter(name, filterFactory) -- 注册过滤器
  controller(name, ctor) -- 注册控制器
  directive(name, directiveFactory) -- 应是注册指令
  config(configFn) -- 注册当模块加载时执行的代码块, 一般对 service 配置有用.
  run(initialitionFn) -- 注册当 injector 结束加载了所有模块时运行的代码块...

  string[] requires: 依赖的其它模块列表, injector 会加载它们在此模块之前.
  string name -- 模块名
}

这里 requires[] 显然用于解决依赖注入问题.

引用这个 myApp 模块: 如使用 <div ng-app='myApp'>. 这将启动这个 app 使用定义的模块.

(这样的话, 一个 app 大概就是一个 module, 估计还可以有多个其它 module).

 

Recommended Setup

推荐将 app 分解为多个 module, 如这样:
* 一个 module 为一个特性
* 一个 module 为可重用的组件 (尤其是 directives, filters)
* 一个应用级 (application level) module 依赖上面的 modules, 并包含初始化代码.

(这样, angluar module 的概念大致 对应一个js文件, 里面含模块功能代码, 及所依赖的其它模块.
  与 NodeJS 中的使用 define(module_name, dependence, factory() {...}) 定义的模块应是类似概念)

 

Module Loading & Dependencies

最简单形式包含两种可执行的代码块:
* 配置 -- 在 provider 注册和配置阶段执行. 此时只有 providers 和 constant 可被注入.
* 执行 -- 注入器(iinjector)创建之后执行, 用于启动 app. 只有 instances 和 contants 可被注入.

angular.module('myModule', [])  // 声明一个名为 myModule 的模块, 依赖列表为 emtpy
  .config(function(injectables-providers) {
    // 配置块, 可以有任意个. 只能注入 providers (非 instances)
  })
  .run(function(injectables-instances) {
    // 运行块, 可以有任意个. 只能注入 instances (非 providers)
  });


(可能这里分两阶段才能正确完成 module 的初始化, 以防止模块相互依赖, 初始化不完全的情况)

 

Configuration Blocks

module.value() 方法等价于 $provide.value();
   .drective() 等价于 $compileProvider.directive() 等等.
这些在 module.config() 中以各种 $provide 方式提供.

现学现查, 从 kityminder-editor 中任意找了一个 ui/directive/arrange/arrange.directive.js:

angular.module('kityminderEditor') // 如果模块已经存在, 估计会取出该模块.
  .directive('arrange', [... {  // 定义指令 arrange, 依赖部分略.
    return { 此指令的实现对象 };
  }]);

再看其它 directive 形式也类似, 另再看一个 filter lang.filter.js:

angular.module('kityminderEditor')
  .filter('lang', [... function(config, lang) {
    return 工厂方法;
  }]);

估计是定义 lang 过滤器, 返回一个工厂方法, 细节先略去.

(还是买本 angularjs 的最新技术图书看看吧...)

 

Run Blocks

用于启动应用, 如 angular.module('myModule').run( function () {...} );

(在 kityminder 中暂时没找到这种块... 只有 config 块. 可能是用 ng-app 的方式启动应用的.)

 

Creation vs. Retrieval

(每次我瞎猜之后, 都能看到一些推翻我猜测的文档...)

* 使用 angular.module('myModule', []) 将创建名为 myModule 的模块, 覆盖原有的.
* 使用 angular.module('myModule') 获取已存在的 module. (? 如果不存在呢)

于是下面两个对比就终于弄明白了(其实原来也没注意到有什么区别...) :

// 被最先引入的 kityminder.app.js, 创建了模块.
angular.module('kityminderEditor', [dependencies ... 略])
  .config(...);


// 后面引入的, 例如 commandBinder.service.js, 向模块中添加 service,filter,directive 等.
angular.module('kityminderEditor')  // 注意这里没有 [...] 参数
  .service(...);

引入当然是用 script 标记:

<!-- 前面大量各种库 js 引入 -->

<script src="ui/kityminder.app.js"></script>
<script src="ui/service/commandBinder.service.js"></script>
<!-- dev 模式下的 kityminder index.htm 后面还有大量的 js 引入 -->

由于使用了这么多 js 库, 我都有点担心机器内存不够...

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 184
码字总数 226359
作品 0
昌平
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen
05/21
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
0
0
Android中的设计模式之状态模式

参考 《设计模式:可复用面向对象软件的基础 》5.8 State 状态 对象行为型模式 《Android源码设计模式解析与实战》第7章 随遇而安--状态模式 意图 允许一个对象在其内部状态改变时改变它的行...

newtrek
昨天
0
0
xshell端 vim没有颜色

说明 使用xshell连接服务器的时候,使用vim打开文档没有颜色 解决方法: 1.在更目录home或者etc下找到vim的配置文件vimrc 2.vim打开它找个坑,添加下面这个东西 set t_Co=256 3.保存退出,就...

杉下
昨天
0
0
spring 资料

spring boot http://www.ityouknow.com/springboot/2016/01/06/spring-boot-quick-start.html

zaolonglei
昨天
2
0
TypeScript基础入门 - 函数 - 简介

转载 TypeScript基础入门 - 函数 - 简介 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.1.6 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接...

durban
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部