模块
我们可以把angular中的模块(module)想象成应用组件的容器,这些组件包括控制器,服务,过滤器,指令等.
为什么?
有过编程经验的都知道大部分应用都有一个main方法来初始化应用组件并把它们关联起来. Angular不提供这样的主函数,而是通过声明式的语法定义如何启动一个应用. 这种声明式的方法有如下几个优点:
- 声明式的语言易于理解
- 可以将代码封装成可重用的模块,解耦
- 模块可以以任意顺序启动(甚至可以并行),因为模块是延迟执行的
- 易于测试,测试时只需载入相关模块,可配置性高
基本概念
通过“Hello World”实例来理解模块的工作原理。
index.html
<div ng-app="myApp"> <div> {{ 'World' | greet }} </div> </div>
script.js
// 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 + '!'; }; });
protractor.js
it('should add Hello to the name', function() { expect(element(by.binding("'World' | greet")).getText()).toEqual('Hello, World!'); });
运行结果:
在这个例子中需注意如下几点:
- 在js中我们通过Module API中的module定义一个模块,并在其中添加greet过滤器。
- module方法的第二个参数为一个数组,用来声明myApp模块所依赖的其他模块,这里angular.module('myApp', [])的第二个参数为空数组,及myApp不依赖任何模块。
- 在HTML模板中通过<div ng-app="myApp">来启动myApp.
上面的例子很简单,在构造复杂的应用时我们要按照下面的方法将应用切割成相对独立的多个模块:
- 按feature划分模块
- 把可重用的组件,特别是指令,过滤器之类的封装到模块中
- 应用级别的模块依赖上面两类模块,并且包含了应用的初始化代码
可以参考Google官方文档: http://blog.angularjs.org/2014/02/an-angularjs-style-guide-and-best.html
例如:
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'); }) .controller('XmplController', function($scope, greeter, user){ $scope.greeting = greeter.greet(user.name); });
<div ng-controller="XmplController"> {{ greeting }} </div>
模块的载入和依赖
模块中包含了配置项和运行代码:
- 配置项代码块(Configuration Blocks):将在组件注册或者模块配置阶段运行。配置代码块中只能注入组件的provider和常量值,之所以不运行注入服务是为了防止该类组件没有被初始化完毕即被误用。
- 运行代码块(Run Blocks): 这类代码块会在注入器初始化完成后来启动应用。只有组件实例(not providers)和常量可以被注入, 如果运行时配置项发生改变将被忽略。
示例代码:
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 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 run blocks });
模块配置项
可以通过如下代码配置模块:
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', ...); });
angular启动应用时会先初始化常量定义,随后会执行配置项代码块,依次注册组件。
运行代码块(Run Blocks)
运行代码块的作用类似于main方法,用来启动应用。这些代码块会在所有服务组件被初始化并注入后运行。Run Block中的代码一般都难以进行单元测试,一般都在独立的模块中进行声明,这样在可以在单元测试时被忽略。
依赖
模块可以依赖其他模块,所依赖的模块会在需要时被注入进来,并且每个模块只被载入一次。
异步载入模块
Angular通过模块来管理注入器的配置,模块的载入与JS文件载入无关。我们可以通过require.js等第三方类库来异步载入js文件以提高效率。
创建并获取模块
在上面的例子中我们用angular.module('myModule', [])创建了myModule模块或者重写myModule如果该模块已经存在。可以通过angular.module('myModule')来获取myNodule模块。
参考如下实例代码:
var myModule = angular.module('myModule', []); // add some directives and services myModule.service('myService', ...); myModule.directive('myDirective', ...); // overwrites both myService and myDirective by creating a new module var myModule = angular.module('myModule', []); // throws an error because myOtherModule has yet to be defined var myModule = angular.module('myOtherModule');
相关推荐
NULL 博文链接:https://boyitech.iteye.com/blog/2167272
论文研究-不确定性下多目标博弈中弱Pareto-NS均衡的存在性.pdf, 在已知不确定参数变化范围的假设下, 研究了多目标博弈中弱Pareto-NS均衡点的存在性问题. 首先结合非合作...
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程...
讲义中可能涵盖了以下几个关键知识点: 1. **基本概念**:博弈论的基本元素包括参与者(玩家)、策略集、支付函数和博弈结构。每个参与者都有自己的目标,通过选择不同的策略来追求最大化利益。 2. **零和博弈与非...
### 博弈论专题知识点详解 #### 一、博弈论概览 博弈论,又称对策论,是现代数学的一个重要分支,主要研究在各种策略情况下,参与者如何做出决策以达到自身利益最大化。这一理论不仅在数学领域有广泛的应用,同时...
哈佛大学的博弈论讲义是这个领域的权威资料之一,深受学者和学生们的喜爱。本讲义深入浅出地介绍了博弈论的基本概念、理论与应用,帮助读者理解在竞争与合作中的决策制定。 首先,我们要理解博弈论的核心概念——...
2. **完全信息动态博弈** - 这部分涉及博弈的动态过程,我们将深入研究子博弈精炼纳什均衡,这是考虑到博弈的各个阶段,参与者如何在每个阶段做出最优决策。 3. **不完全信息静态博弈** - 在参与者掌握的信息不完全...
势博弈与时变Log-linear分布式拓扑控制算法 势博弈与时变Log-linear分布式拓扑控制算法是为了解决UWSNs(Underwater Wireless Sensor Networks,水下无线传感器网络)中网络拓扑控制不稳定、频繁变化引起的网络能耗...
微观经济学讲义-第13章博弈论
2019年2季度大类资产配置报告:从基本面博弈转向资金面博弈-华泰证券-20190424.pdf
计算博弈第二讲-V61 计算博弈是自动化研究所 University of Chinese of Academy of Sciences 的一门专业普及课,旨在让学生理解博弈的基本概念、方法和应用。第二讲的主要内容是博弈表示方法、常见博弈类型和博弈的...
本讲义详细介绍了非合作博弈理论和信息经济学的相关概念。 首先,讲义涵盖了非合作博弈理论的基础,包括完全信息静态博弈。在完全信息静态博弈中,所有参与者都了解游戏的所有规则、支付矩阵和对手的策略。纳什均衡...
七所大学的博弈论讲义,包括哈佛大学.卡内基梅隆大学.芝加哥大学.加利福尼亚大学(圣. 迭戈校区).加利福尼亚
博弈是什么意思-博弈之道须正矣.docx
讲义第三章详细讲解了子博弈精炼纳什均衡,这是一种动态博弈的解概念,要求均衡策略不仅要在初始阶段是最佳的,而且在任何可能的子博弈中也必须是最优的。以房地产开发项目的例子来说明,开发商A和B在面对不确定市场...
人机博弈。PDF中文版。。。。。。。。。。。。。。。。。。。。。。。。。
基于混沌博弈优化算法CGO-BiTCN-BiGRU-Attention的风电预测算法研究Matlab实现.rar
奶粉行业首次覆盖报告:存量博弈,国产崛起-20210407
本讲义主要涵盖了非合作博弈理论和信息经济学的核心概念。 首先,非合作博弈理论是博弈论的基础,它描述了两个或多个独立决策者之间的互动,这些决策者无法通过正式协议来协调行动。在完全信息静态博弈中,所有参与...