译自Angular's module docs

1.模块

大部分的应用都有一个主要的方法来实例化,链接,引导。angular应用没有这个方法,而是用模块声明来替代。

这种方式的优点:

*程序的声明越详细越容易理解

*单元测试不需要加载所有的模块,有助于模块书写

*

*第三方的代码可以打包作为复用的代码

*模块可以以任何顺序加载(由于模块延迟执行的特性)

2.基本示例

 <doc:example module='myApp'>
<doc:source>
<script>
// declare a module
var myAppModule = angular.module('myApp', []); // configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
}); </script>
<div>
{{ 'World' | greet }}
</div>
</doc:source>
</doc:example>

3.推荐的模块划分

*服务模块,服务的声明

*管理模块,声明管理相关

*过滤器模块

*依赖于上述模块的应用级模块(包含初始化代码)

这样划分的原因是在测试时,常常需要忽略初始化代码(很难测试)。把它放在单独的模块,可以只用加载相关测试模块。

<doc:example module='xmpl'>
<doc:source>
<script>
angular.module('xmpl.service', []).
value('greeter', {
salutation: 'Hello',
localize: function(localization) {
this.salutation = localization.salutation;
},
greet: function(name) {
return this.salutation + ' ' + name + '!';
}
}).
value('user', {
load: function(name) {
this.name = name;
}
}); angular.module('xmpl.directive', []); angular.module('xmpl.filter', []); angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).
run(function(greeter, user) {
// This is effectively part of the main method initialization code
greeter.localize({
salutation: 'Bonjour'
});
user.load('World');
}) // A Controller for your app
var XmplController = function($scope, greeter, user) {
$scope.greeting = greeter.greet(user.name);
}
</script>
<div ng-controller="XmplController">
{{ greeting }}!
</div>
</doc:source>
</doc:example>

4.模块加载和依赖

最简单的模块包含配置块和运行块,在应用的引导流程提供依赖。

(1)配置块:在注册和配置阶段执行。只有供应者和常量能够添加到配置块。这是为了防止在服务被完全配置之前意外的实例化。

(2)运行块:在注入被创建后执行,被用来安装应用。只有实例和常量能够注入运行块。这是为了阻止应用运行期间系统进一步

配置。

angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into the config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into the run blocks
});

4.1配置块

模块中一些简便的方法相当于配置块

angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...); // is same as angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
});

配置块应用的顺序取决于它们注册的顺序,常量例外(常量在所有配置项之前)

4.2运行块

运行块类似主方法,用于安装应用。在所有的服务的配置和注入被创建后执行。换句话说,配置块在运行块之前引入。每个模块只加载一次,即使有多个其它模块依赖它。

4.3异步加载

module.ngdoc的更多相关文章

  1. Android Studio 编译单个module

    前期自己要把gradle环境变量配置好 在Terminal中gradle命令行编译apk 输入gradle assembleRelease 会编译全部module编译单个modulecd ./xiru ...

  2. ABP源码分析三:ABP Module

    Abp是一种基于模块化设计的思想构建的.开发人员可以将自定义的功能以模块(module)的形式集成到ABP中.具体的功能都可以设计成一个单独的Module.Abp底层框架提供便捷的方法集成每个Modu ...

  3. nodejs模块中exports和module.exports的区别

    通过Node.js的官方API可以看到Node.js本身提供了很多核心模块 http://nodejs.org/api/ ,这些核心模块被编译成二进制文件,可以require('模块名')去获取:核心 ...

  4. ES6之module

    该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...

  5. [python] CSV read and write using module xlrd and xlwt

    1. get data from csv, skip header of the file. with open('test_data.csv','rb,) as csvfile: readCSV = ...

  6. Yii2.0.7 限制user module登录遇到的问题

    在Yii2.0.6的时候我是在以下文件通过以下方法实现的. frontend/modules/user/Module.php namespace frontend\modules\user; clas ...

  7. Android Studio导入github下载的project和module

    前言:我们以前eclispe时代, 经常都是跑到github浏览第三方开源资源,然后下载下来,运行一下sample之类的,学习没有接触的第三方安卓库,但是到了Android Studio,在githu ...

  8. Android Studio导入Project、Module的正确方法

    Gradle Project项目.Module模块导入 最近看到网上很多人在抱怨,Android Studio很难导入github上下载下来的一些项目,主要包括: 1.导入就在下载Gradle2.根本 ...

  9. ImportError: No module named 'requests'

    补充说明: 当前环境是在windows环境下 python版本是:python 3.4. 刚开始学习python,一边看书一边论坛里阅读感兴趣的代码, http://www.oschina.net/c ...

随机推荐

  1. 弱网测试-Network Emulator 网络模拟工具使用

    参考链接 https://www.jianshu.com/p/6a3d38aafac1

  2. Bloom Filter(布隆过滤器)如何解决缓存穿透

    本文摘抄自我的微信公众号"程序员柯南",欢迎关注!原文阅读 缓存穿透是什么? 关于缓存穿透,简单来说就是系统处理了大量不存在的数据查询.正常的使用缓存流程大致是,数据查询先进行缓存 ...

  3. Linux下的crontab

    Ubuntu服务器/var/log下没有cron日志,这里记录一下如何ubuntu server如何查看crontab日志 crontab记录日志 修改rsyslog sudo vim /etc/rs ...

  4. .Net上传图片的一些问题

    1.IIS上传文件大小限制和上传时间限制 异常详细信息: System.Web.HttpException: 超过了最大请求长度 打开iis找到部署的网站的配置编辑器 2.设置上传时间限制 3.设置上 ...

  5. 图解从 URL 到网页通信原理

    前言 一.文本对话--从请求到响应 二.TCP/IP 协议族介绍 三.基于TCP/IP通信过程 四.TCP建立连接及断开(重点补充) 小结 前言 互联网的原始目的,就是为了传输文本(文本对话).那我们 ...

  6. Sass 笔记

    Sass 笔记 1. 安装,依赖Ruby sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装 $ gem install sass 2. 两种文件格式 sass scss ...

  7. kafka依赖zookeeper原因解析及应用场景

    kafka简介: kafka是一个发布订阅消息系统,由topic区分消息种类,每个topic中可以有多个partition,每个kafka集群有一个多个broker服务器组成,producer可以发布 ...

  8. SpringBoot自动装配源码解析

    序:众所周知spring-boot入门容易精通难,说到底spring-boot是对spring已有的各种技术的整合封装,因为封装了所以使用简单,也因为封装了所以越来越多的"拿来主义" ...

  9. Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误

    1.全局配置 在application.java文件添加CorsRegistry配置 package com.ypnh.authority; import com.ypnh.authority.inf ...

  10. Oracle 12c 静默安装(脚本自动化)

    oracle 12C 自动化静默安装脚本 项目地址: github: https://github.com/spdir/oracle-single-install 下载安装脚本 wget https: ...