文档章节

学习 AngularJS (三) module

刘军兴
 刘军兴
发布于 2015/12/08 09:39
字数 1208
阅读 110
收藏 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 库, 我都有点担心机器内存不够...

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 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
AngularJs学习笔记--bootstrap

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

武文海
2015/02/05
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
angular-async-loader 1.3.0 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载module/controller/services/filters/directive等模块功能组件。 2016-05-20 angular-async-loader 1.3.0 发布 增加 app.us......

Sub
2016/05/20
856
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

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

readilen
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kiss原则

KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”。换句话说来,”简单就是美“。KISS 原则源于 David Mamet(大卫马梅)的电...

NB-One
8分钟前
0
0
Spring Cloud Stream消费失败后的处理策略(三):使用DLQ队列(RabbitMQ)

应用场景 前两天我们已经介绍了两种Spring Cloud Stream对消息失败的处理策略: 自动重试:对于一些因环境原因(如:网络抖动等不稳定因素)引发的问题可以起到比较好的作用,提高消息处理的...

程序猿DD
13分钟前
0
0
MYSQL事务处理

INNODB 事务里,所有表引擎必须为INNODB,在非实务表上操作,不会警告,不会报错,但没有效果

关元
52分钟前
3
0
cmake 编译脚本

#!/bin/sh test -d build || mkdir -p build cd build cmake .. make

shzwork
今天
2
0
从零开始实现Vue简单的Toast插件

概述: 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。 1. 实例 在Vue组件的methods内,调用如下代码 `this``.$toast({...

前端小攻略
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部