Angular4学习笔记之根模块与Ng模块
根模块(rootmodule)
每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为AppModule。
示例src/app/app.module.ts
import{NgModule}from'@angular/core';
import{BrowserModule}from'@angular/platform-browser';
import{AppComponent}from'./app.component';
@NgModule({
imports:[BrowserModule],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
exportclassAppModule{}
imports数组
注意：不要在imports数组中加入NgModule类型之外的类。
如果有两个同名指令都叫做HighlightDirective，我们只要在import时使用as关键字来为第二个指令创建个别名就可以了。
import{
HighlightDirectiveasContactHighlightDirective
}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中。
YoulaunchtheapplicationbybootstrappingtherootAppModule.Amongotherthings,thebootstrappingprocesscreatesthecomponent(s)listedinthebootstraparrayandinsertseachoneintothebrowserDOM.
每个被引导的组件都是它自己的组件树的根。插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
Eachbootstrappedcomponentisthebaseofitsowntreeofcomponents.Insertingabootstrappedcomponentusuallytriggersacascadeofcomponentcreationsthatfilloutthattree.
虽然你可以将多个组件树插入到宿主页面，但并不普遍。大多数应用只有一个组件树，它们引导单一根组件。
Whileyoucanputmorethanonecomponenttreeonahostwebpage,that'snottypical.Mostapplicationshaveonlyonecomponenttreeandtheybootstrapasinglerootcomponent.
根组件通常命名为AppComponent。
在main.ts中引导
引导应用的方法很多。它们取决于你想如何编译应用以及应用将在哪儿运行。
通过即时(JIT)编译器动态引导
JIT,just-in-time
使用即时(JIT)编译器动态编译应用src/main.ts
//Thebrowserplatformwithacompiler
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';
//Theappmodule
import{AppModule}from'./app/app.module';
//Compileandlaunchthemodule
platformBrowserDynamic().bootstrapModule(AppModule);
使用预编译器(AOT)进行静态引导
AOT,ahead-of-time
静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。
使用静态选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是AppModuleNgFactory。
引导预编译的AppModuleNgFactory：
//Thebrowserplatformwithoutacompiler
import{platformBrowser}from'@angular/platform-browser';
//Theappmodulefactoryproducedbythestaticofflinecompiler
import{AppModuleNgFactory}from'./app/app.module.ngfactory';
//Launchwiththeappmodulefactory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
说明：由于整个应用都是预编译的，所以我们不用把Angular编译器一起发到浏览器中，也不用在浏览器中进行编译。
无论是JIT还是AOT编译器都会从同一份AppModule源码中生成一个AppModuleNgFactory类。JIT编译器动态地在浏览器的内存中创建这个工厂类。AOT编译器把工厂输出成一个物理文件，也就是我们在静态版本main.ts中导入的那个。
通常，AppModule不必关心它是如何被引导的。AppModule会随着应用而演化，但是main.ts中的引导代码不会变。
Ng模块(NgModule)
特性模块
特性模块是带有@NgModule装饰器及其元数据的类，就像根模块一样。特性模块的元数据和根模块的元数据的属性是一样的。
根模块和特性模块还共享着相同的执行环境。它们共享着同一个依赖注入器，这意味着某个模块中定义的服务在所有模块中也都能用。
它们在技术上有两个显著的不同点：
- 我们引导根模块来启动应用，但导入特性模块来扩展应用。
- 特性模块可以对其它模块暴露或隐藏自己的实现。
特性模块用来提供了内聚的功能集合。聚焦于应用的某个业务领域、用户工作流、某个基础设施（表单、HTTP、路由），或一组相关的工具集合。
虽然这些都能在根模块中做，但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。
当前模块不会继承其它模块中对组件、指令或管道的访问权。根模块与特性模块的imports互不相干。如果某一个模块要绑定到[(ngModel)]就必需导入FormsModule。
总结
本章整理内容较少，主要是详细理解Angular模块的概念、功能、关系。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。