Angular 2 模块_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Angular 2 模块
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢116被浏览6623分享邀请回答export { Component1 } from 'feature/component1'
export { Component2 } from 'feature/component2'
export { Directive1 } from 'feature/directive1'
然后将这个文件设置到 entry 中，同时使用 CommonChunksPlugin，这样部分内容（等价于一个 feature 模块）就能成为一个单独的 chunk／bundle，配合路由支持就可以很简单的实现 Lazy Loading。是这样么？但是一个严峻的问题，Angular 有一个会产生额外文件的 Code Generation 过程，因此我们实际需要的内容并不是上面的入口文件里所输出的内容，而是类似于：export { Component1NgFactory } from 'feature/component1.ngfactory'
export { Component2NgFactory } from 'feature/component2.ngfactory'
export { Directive1NgFactory } from 'feature/directive1.ngfactory'
Angular 的代码生成并不修改原有的 TypeScript 文件，而是产生额外的依赖于原有文件的新文件。也就是说，如果继续依赖原始文件的话，是不会把生成的文件引入的，也就无法完成预编译的过程（虽然编译了但是没用上）。所以，为了能够正确支持 Angular 的编译过程，就必须把这种入口文件特殊对待，使用额外的 Webpack loader 进行处理，来保证这个过程的自动化进行。当然，只是为了这个目的的话，依然不需要增加一个额外的类型，只需要使用一个文件名的 Pattern 就足够了，例如叫做 feature.module.ts，然后在 Webpack 中设置对 *.module.ts 进行额外的预处理过程即可。二、依赖注入的初始化我们又知道，依赖注入（DI）／控制反转（IoC）是面向对象编程实践中常用的一种解耦手段，而 Angular 也是为数不多的对依赖注入提供了 First-class 支持的 Web 前端框架。而 Angular 中，依赖注入容器是采用的树状继承结构（现在不一定了，参见）。为此，大部分服务都应该是在 Application level 提供，而非在 Component level 提供，从而保证其单例特性。但事与愿违，Angular（2.0.0-rc.4 及之前）似乎从 AngularJS 的「绝对全局」极端走向了「绝对局部」极端，所有的服务都被实际用到的组件重复提供。这不仅仅是不便利的问题，由于不再是单例，重复的服务提供对应用发行体积、运行时内存占用和运行时行为（状态同步）都会产生很大的影响。而作为第三方依赖，虽然暴露了相关服务的 Provider，但并没有办法控制相关依赖的提供过程，事实上也就只能靠文档指导用户自行声明，这样也极大的增加了不便性。另外，如果用户真的选择全部在全局提供（例如在 Platform 的 bootstrap 中或者 AppComponent 的 providers 中），那么又回到了 AngularJS 所用的「绝对全局」极端。因此提供一个让第三方代码自行提供全局依赖的机制是十分必要的。不过，有人可能会好奇，为什么重复声明会影响到应用的发行体积呢？因为从某种意义上来说，Angular 的依赖注入机制也是靠编译器来实现的，例如对于一个 NgModule，会生成类似下面的代码：class AppModuleInjector extends import0.?NgModuleInjector&import1.AppModule& {
__Meta_28:import3.Meta;
__Title_29:import3.Title;
__?i_30:import4.?i;
__BrowserXhr_31:import5.BrowserXhr;
__ResponseOptions_32:import5.BaseResponseOptions;
__XSRFStrategy_33:any;
__XHRBackend_34:import5.XHRBackend;
__RequestOptions_35:import5.BaseRequestOptions;
__Http_36:any;
constructor(parent:import0.Injector) {
super(parent,[import6.AppComponentNgFactory],[import6.AppComponentNgFactory]);
get _Meta_28():import3.Meta {
if ((this.__Meta_28 == null)) { (this.__Meta_28 = new import3.Meta(this.parent.get(import3.DOCUMENT))); }
return this.__Meta_28;
get _Title_29():import3.Title {
if ((this.__Title_29 == null)) { (this.__Title_29 = new import3.Title(this.parent.get(import3.DOCUMENT))); }
return this.__Title_29;
get _?i_30():import4.?i {
if ((this.__?i_30 == null)) { (this.__?i_30 = new import4.?i()); }
return this.__?i_30;
get _BrowserXhr_31():import5.BrowserXhr {
if ((this.__BrowserXhr_31 == null)) { (this.__BrowserXhr_31 = new import5.BrowserXhr()); }
return this.__BrowserXhr_31;
get _ResponseOptions_32():import5.BaseResponseOptions {
if ((this.__ResponseOptions_32 == null)) { (this.__ResponseOptions_32 = new import5.BaseResponseOptions()); }
return this.__ResponseOptions_32;
get _XSRFStrategy_33():any {
if ((this.__XSRFStrategy_33 == null)) { (this.__XSRFStrategy_33 = import5.?b()); }
return this.__XSRFStrategy_33;
get _XHRBackend_34():import5.XHRBackend {
if ((this.__XHRBackend_34 == null)) { (this.__XHRBackend_34 = new import5.XHRBackend(this._BrowserXhr_31,this._ResponseOptions_32,this._XSRFStrategy_33)); }
return this.__XHRBackend_34;
get _RequestOptions_35():import5.BaseRequestOptions {
if ((this.__RequestOptions_35 == null)) { (this.__RequestOptions_35 = new import5.BaseRequestOptions()); }
return this.__RequestOptions_35;
get _Http_36():any {
if ((this.__Http_36 == null)) { (this.__Http_36 = import5.?c(this._XHRBackend_34,this._RequestOptions_35)); }
return this.__Http_36;
createInternal():import1.AppModule {
this._CommonModule_0 = new import2.CommonModule();
this._ErrorHandler_1 = import3.?a();
this._APP_INITIALIZER_2 = [
import0.?o,
import3.?c(this.parent.get(import3.NgProbeToken,(null as any)),this.parent.get(import0.NgProbeToken,(null as any)))
this._ApplicationInitStatus_3 = new import0.ApplicationInitStatus(this._APP_INITIALIZER_2);
this._?f_4 = new import0.?f(this.parent.get(import0.NgZone),this.parent.get(import0.?Console),this,this._ErrorHandler_1,this.componentFactoryResolver,this._ApplicationInitStatus_3);
this._ApplicationRef_5 = this._?f_4;
this._ApplicationModule_6 = new import0.ApplicationModule(this._ApplicationRef_5);
this._BrowserModule_7 = new import3.BrowserModule(this.parent.get(import3.BrowserModule,(null as any)));
this._?ba_8 = new import4.?ba();
this._FormsModule_9 = new import4.FormsModule();
this._HttpModule_10 = new import5.HttpModule();
this._AppModule_11 = new import1.AppModule();
return this._AppModule_11;
getInternal(token:any,notFoundResult:any):any {
if ((token === import3.Meta)) { return this._Meta_28; }
if ((token === import3.Title)) { return this._Title_29; }
if ((token === import4.?i)) { return this._?i_30; }
if ((token === import5.BrowserXhr)) { return this._BrowserXhr_31; }
if ((token === import5.ResponseOptions)) { return this._ResponseOptions_32; }
if ((token === import5.XSRFStrategy)) { return this._XSRFStrategy_33; }
if ((token === import5.XHRBackend)) { return this._XHRBackend_34; }
if ((token === import5.RequestOptions)) { return this._RequestOptions_35; }
if ((token === import5.Http)) { return this._Http_36; }
return notFoundResult;
destroyInternal():void {
this._?f_4.ngOnDestroy();
(this.__?DomSharedStylesHost_23 && this._?DomSharedStylesHost_23.ngOnDestroy());
所有依赖的初始化过程都被编译成静态的 JavaScript 代码执行，从而保证了良好的初始化性能（详情可以参考）。因此，我们上面假定的 Webpack loader，除了转换相应的路径和类型外，还得凭空产生很大一部分代码，来保证 Angular 的正常运行。三、如何解决？事实上，NgModule 确实不是最初的解决方案，但可以算作一个比较有效的解决方案。既然始终需要特殊化某些文件，那么为什么不干脆引入一种额外的类型呢，毕竟「内容转换」显然要比「凭空产生」更加友好，这样就保持了和 Component -& ComponentFactory 相一致的 NgModule -& NgModuleFactory。因为 NgModule 的存在，对其进行识别和处理也要容易很多。此外，通过 NgModule 我们也解决了第三方内容声明全局依赖的问题，随着我们引入 NgModule 本身，相应的 Providers 也就自动被添加到注入器中，而不需要我们手动提供用到的每一个依赖。通过引入 NgModule 的概念，也在一定程度上解决了一些额外的工程管理问题，对代码组织更佳友好。其实最开始 NgModule 并不叫 NgModule，而是叫 AppModule。四、总结Angular 之所以需要引入 NgModule 这个概念，很大程度上是因为其特有的实现方式（代码生成、依赖注入）所决定的，所以虽然其它 Web 框架中不需要这个概念也能正常使用，但对 Angular 而言这个概念的引入能够解决很多必要问题。五、参考文献（科学性相关问题请自行解决）32添加评论分享收藏感谢收起79 条评论分享收藏感谢收起AngularJS 教程
AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
你可以通过 AngularJS 的 angular.module 函数来创建模块：
&div ng-app="myApp"&...&/div&&script&
var app = angular.module("myApp", []);
"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。
添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
AngularJS 实例
&div ng-app="myApp" ng-controller="myCtrl"&
{{ firstName + " " + lastName }}&/div&&script&
= angular.module("myApp",
[]);app.controller("myCtrl", function($scope) {&&& $scope.firstName
= "John";&&& $scope.lastName
= "Doe";});&/script&
章节学到更多关于控制器的知识。
AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。
完整的指令内容可以参阅 。
此外，你可以使用模块来为你应用添加自己的指令：
AngularJS 实例
&div ng-app="myApp" runoob-directive&&/div&&script&
angular.module("myApp", []);app.directive("runoobDirective",
function() {&&& return {&&&&&&&
template : "我在指令构造器中创建!"&&& };
});&/script&
章节学到更多关于指令的知识。
模块和控制器包含在 JS 文件中
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：
AngularJS 实例
&!DOCTYPE html&&html&
&script src="/libs/angular.js/1.4.6/angular.min.js"&&/script&
&body&&div ng-app="myApp"
ng-controller="myCtrl"&{{ firstName + " " + lastName }}&/div&
&script src="myApp.js"&&/script&
&script src="myCtrl.js"&&/script&&/body&&/html&
var app = angular.module("myApp", []);
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
app.controller("myCtrl", function($scope) {
&&& $scope.firstName = "John";
&&& $scope.lastName= "Doe";
函数会影响到全局命名空间
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。
什么时候载入库?
在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。
对于 HTML 应用程序，通常建议把所有的脚本都放置在 &body& 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 &head& 区域被加载。
在我们的实例中，AngularJS 在 &head& 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 &body& 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
AngularJS 实例
&!DOCTYPE html&&html&
&meta charset="utf-8"&
&script src="/libs/angular.js/1.4.6/angular.min.js"&&/script&
&body&&div ng-app="myApp"
ng-controller="myCtrl"&{{ firstName + " " + lastName }}&/div&&script&var app = angular.module("myApp",
[]);app.controller("myCtrl", function($scope) {&&& $scope.firstName
= "John";&&& $scope.lastName
= "Doe";});&/script&&/body&&/html&
记住登录状态
重复输入密码Angular4-学习笔记-5-根模块与 Ng 模块 - 简书
Angular4-学习笔记-5-根模块与 Ng 模块
学习资料来自
每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 AppModule。
示例 src/app/app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }
from './ponent';
@NgModule({
[ BrowserModule ],
declarations: [ AppComponent ],
bootstrap:
[ AppComponent ]
export class AppModule { }
imports 数组
注意：不要在 imports 数组中加入 NgModule 类型之外的类。
如果有两个同名指令都叫做 HighlightDirective，我们只要在 import 时使用 as 关键字来为第二个指令创建个别名就可以了。
HighlightDirective as ContactHighlightDirective
} from './contact/highlight.directive';
关于 BrowserModule
每个浏览器中运行的应用都需要 @angular/platform-browser 里的 BrowserModule。 所以每个这样的应用都在其根 AppModule 的 imports 数组中包含 BrowserModule。
NgIf 是在来自 @angular/common 的 CommonModule 中声明的。CommonModule 提供了很多应用程序中常用的指令，包括 NgIf 和 NgFor 等。BrowserModule 导入了 CommonModule 并且重新导出了它。 最终的效果是：只要导入 BrowserModule 就自动获得了 CommonModule 中的指令。
declarations 数组
你必须在一个 NgModule 类声明每一个组件，否则浏览器控制台会报错。
不要在 declarations 添加组件、指令和管道以外的其他类型。
不要把 NgModel（或 FORMS_DIRECTIVES）加到 AppModule 元数据的 declarations 数据中！这些指令属于 FormsModule。组件、指令和管道只能属于一个模块。永远不要再次声明属于其它模块的类。
bootstrap 数组
通过引导根 AppModule 来启动应用。 在启动过程中，其中一步是创建列在 bootstrap 数组的组件， 并将它们每一个都插入到浏览器的DOM中。You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.
每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
虽然你可以将多个组件树插入到宿主页面，但并不普遍。 大多数应用只有一个组件树，它们引导单一根组件。While you can put more than one component tree on a host web page, that's not typical. Most applications have only one component tree and they bootstrap a single root component.
根组件通常命名为 AppComponent。
在 main.ts 中引导
引导应用的方法很多。 它们取决于你想如何编译应用以及应用将在哪儿运行。
通过即时 (JIT) 编译器动态引导
JIT, just-in-time
使用即时 (JIT) 编译器动态编译应用 src/main.ts
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app/app.module';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);
使用预编译器 (AOT) 进行静态引导
AOT, ahead-of-time
静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。
使用静态选项，Angular 编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是 AppModuleNgFactory。
引导预编译的 AppModuleNgFactory：
// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/app.module.ngfactory';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
说明：由于整个应用都是预编译的，所以我们不用把 Angular 编译器一起发到浏览器中，也不用在浏览器中进行编译。
无论是 JIT 还是 AOT 编译器都会从同一份 AppModule 源码中生成一个 AppModuleNgFactory 类。 JIT 编译器动态地在浏览器的内存中创建这个工厂类。 AOT 编译器把工厂输出成一个物理文件，也就是我们在静态版本 main.ts 中导入的那个。
通常，AppModule 不必关心它是如何被引导的。AppModule 会随着应用而演化，但是 main.ts 中的引导代码不会变。
特性模块是带有 @NgModule 装饰器及其元数据的类，就像根模块一样。 特性模块的元数据和根模块的元数据的属性是一样的。
根模块和特性模块还共享着相同的执行环境。 它们共享着同一个依赖注入器，这意味着某个模块中定义的服务在所有模块中也都能用。
它们在技术上有两个显著的不同点：
我们引导根模块来启动应用，但导入特性模块来扩展应用。
特性模块可以对其它模块暴露或隐藏自己的实现。
特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施（表单、HTTP、路由），或一组相关的工具集合。
虽然这些都能在根模块中做，但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。
当前模块不会继承其它模块中对组件、指令或管道的访问权。根模块与特性模块的 imports 互不相干。如果某一个模块要绑定到 [(ngModel)] 就必需导入 FormsModule。
本章整理内容较少，主要是详细理解 Angular 模块的概念、功能、关系。
融入自然，活出本我，探索未知
AngularJS2 是一款开源的JavaScript MV*（MVC、MVW、MVVM）框架，目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HT...
学习资料来自
与 Angular.io。 开发指南-词汇表 Angular 模块 (Angular module) Angular 模块是带有 @NgModule 装饰器函数的类，它帮助我们将一个应用程序组织成内聚的功能模块群。 @NgModule 接...
组件基础 组件用来包装特定的功能，应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单元，模块则是在组件之上的一层抽象。所有angular组件都可以独立存在，也意味着任何组件都可以作为根组件被引导，也可以被路由加载，或在其他组件中使用。不过一个组...
史上最简单Angular2教程，大叔都学会了 作者：王芃
第一节：初识Angular-CLI第二节：登录组件的构建第三节：建立一个待办事项应用第四节：进化！模块化你的应用第五节：多用户版本的待办事项应用第六节：使用第三方样式库及模块优化用第...
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
有人曾说：衡量爱情的最好方法，就是失去。 因为只有当你失去对方的时候，你才知道，这份爱情在你心里的分量到底是多少。 有一部电影，男主角为了一份伪装的爱情失去一生的积蓄和追求。 那么，这一切到底值不值得？ 电影《最佳出价》就抛出了这样一个话题。 男主角奥德曼是一位即将退休的首...
我国的餐饮行业在进入新世纪以来表现抢眼，行业的营业额突破两万亿大关。甜品业作为餐饮业中的新兴产业，发展十分迅速，民众的接受度越来越高，尤其是年青消费群体的喜爱。内陆的甜品发展起步较晚，在上世纪90年代，甜品对于内陆人来说，基本上就是饼干，月饼等一些点心，对于已经在广...
你总是叮嘱 这是我的缺陷 如果我能够记得 那这还是我的缺陷吗？
据美国商业内参研究机构（BIIntelligence）指出，很多人倾向于在手机或者平板电脑上浏览自己想要购买的东西，但是却不会在这些设备上最终购买，因为对于他们来说在移动设备上输入付款信息和订单信息等比较麻烦。移动设备上输入信息的各种复杂流程和步骤是导致用户在电商网站上放弃...