module.ngdoc
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的更多相关文章
- Android Studio 编译单个module
前期自己要把gradle环境变量配置好 在Terminal中gradle命令行编译apk 输入gradle assembleRelease 会编译全部module编译单个modulecd ./xiru ...
- ABP源码分析三:ABP Module
Abp是一种基于模块化设计的思想构建的.开发人员可以将自定义的功能以模块(module)的形式集成到ABP中.具体的功能都可以设计成一个单独的Module.Abp底层框架提供便捷的方法集成每个Modu ...
- nodejs模块中exports和module.exports的区别
通过Node.js的官方API可以看到Node.js本身提供了很多核心模块 http://nodejs.org/api/ ,这些核心模块被编译成二进制文件,可以require('模块名')去获取:核心 ...
- ES6之module
该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...
- [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 = ...
- Yii2.0.7 限制user module登录遇到的问题
在Yii2.0.6的时候我是在以下文件通过以下方法实现的. frontend/modules/user/Module.php namespace frontend\modules\user; clas ...
- Android Studio导入github下载的project和module
前言:我们以前eclispe时代, 经常都是跑到github浏览第三方开源资源,然后下载下来,运行一下sample之类的,学习没有接触的第三方安卓库,但是到了Android Studio,在githu ...
- Android Studio导入Project、Module的正确方法
Gradle Project项目.Module模块导入 最近看到网上很多人在抱怨,Android Studio很难导入github上下载下来的一些项目,主要包括: 1.导入就在下载Gradle2.根本 ...
- ImportError: No module named 'requests'
补充说明: 当前环境是在windows环境下 python版本是:python 3.4. 刚开始学习python,一边看书一边论坛里阅读感兴趣的代码, http://www.oschina.net/c ...
随机推荐
- ansible_playbook 一键搭建集群架构
目录 基础优化 SSH.Ansible,批量管理服务项目 剧本开始-----.10分钟左右 mail.yaml base.yaml rsync.yaml nfs.yaml web.yaml tweb. ...
- 初识gauge自动化测试框架
segmentfault阅读 官方网站:https://docs.gauge.org/latest/index.html 介绍: Gauge是一个轻量级的跨平台测试自动化工具,可以使用不同的语言中编写 ...
- Linux内存管理专题
Linux的内存管理涉及到的内容非常庞杂,而且与内核的方方面面耦合在一起,想要理解透彻非常困难. 在开始学习之前进行了一些准备工作<如何展开Linux Memory Management学习?& ...
- 是时候理解下HTTPS的原理及流程了
1.什么是HTTP协议? HTTP协议是Hyper Text Transfer Protocol(超文本传输协议),位于TCP/IP模型当中的应用层.HTTP协议通过请求/响应的方式,在客户端和服务端 ...
- fuel一键部署openstack
一.安装环境: 1. 所需物理主机的要求如下 内存:8GB+,推荐16GB:(少于8GB的就免谈了) 磁盘:500GB+: 物理机OS:ubuntu-desktop-amd64 14.04(推荐) 或 ...
- 类LinkedList
LinkedList特点 java.util.LinkedList 集合数据存储的结构是链表结构.方便元素添加.删除的.LinkedList是List的子类,List中的方法LinkedList都是可 ...
- gVim编辑器 操作篇
gVim是一款强大的编辑器,可以满足大部分语言的编程需要.尤其是其自带的模板定制功能对于Verilog来说非常受用.然而gVim有很多操作是不同于其他编辑器的,这让很多初学者望而却步,因此,本文将gV ...
- DNS预解析prefetch
前面的话 本文将详细介绍DNS预解析prefetch的主要内容 概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换 ...
- 快速去水印(win10换图3D工具)
之前抠图都用ps啥的,后来发现win10自带的工具画图3D可以直接扣简单的图案,达到去水印的效果 1.将图片放入软件中 2.使用神奇选择工具,调整大小,框出图标 3.点击下一步,将没选上的或选多的进行 ...
- nuxt npm run dev 报错Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080"
Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080" Hello, Just sharing a solution t ...