文档章节

学习 AngularJS (三) module

刘军兴
 刘军兴
发布于 2015/12/08 09:39
字数 1208
阅读 94
收藏 2
点赞 0
评论 0

再看 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
博文 150
码字总数 226172
作品 0
昌平
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

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

readilen ⋅ 05/21 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud 微服务 (六) 服务通信 RestTemplate

壹 通信的方式主要有两种,Http 和 RPC SpringCloud使用的是Http方式通信, Dubbo的通信方式是RPC 记录学习SpringCloud的restful方式: RestTemplate (本篇)、Feign 贰 RestTemplate 类似 Http...

___大侠 ⋅ 11分钟前 ⋅ 0

React创建组件的三种方式

1.无状态函数式组建 无状态函数式组件,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。 无状态函数式组...

kimyeongnam ⋅ 18分钟前 ⋅ 0

react 判断实例类型

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。 这里附上一个讲的很全面的文章: https://www.cnblogs.com/onepixel...

球球 ⋅ 24分钟前 ⋅ 0

Centos7备份数据到百度网盘

一、关于 有时候我们需要进行数据备份,如果能自动将数据备份到百度网盘,那将会非常方便。百度网盘有较大的存储空间,而且不怕数据丢失,安全可靠。下面简单的总结一下如何使用 bypy 实现百...

zctzl ⋅ 38分钟前 ⋅ 0

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 41分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 48分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 今天 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部