AppModule根模块

如何在根AppModule中构建和启动应用

Angular模块类描述应用的部件是如何组合在一起的，每个应用至少都有一个Angular模块，也根模块，用来引导并运行应用。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import语句后，可以看到一个@NgModule装饰器修饰的类。
@NgModule装饰器将AppModule标记为Angular模块类，@NgModule接受一个元数据对象，告诉Angular如何编译和启动应用。
import： BrowseModule，每个在浏览器运行应用都需要他。
declarations： 应用唯一组件
boostrap：根组件，Angular创建他并插入index.html

一、import数组
Angular模块把特性合并成离散单元的一种方式，Angular自身许多特性也是通过Angular模块组织的。HTTP服务在HTTPModule里。路由器在RouterM抖了中，最终，你也可能创建特性模块。
当你需要模块的特性时，将其添加到imports数组中。
当应用需要模块的特性时，将其添加到imports数组中。

imports数组中应该只有NgModule类，不要放置其他类型。

不要将Angular模块的imports数组与文件顶部的import语句混淆了，他们是不同的。
JavaScript的import声明允许你访问其他文件中到处的符号，这样你可以在当前文件引用他。
模块的imports数组告诉Angular特定Angular模块的信息，用@NgModule装饰的类，应用需要他们来正常工作。

二、declarations数组
每个组件必须在且在一个NgModule类中声明，通过将其将其列到AppModule模块的declaration数组中，告诉Angular哪个组件属于AppModule。

三、bootstrap数组
通过引导根AppModule来启动应用，在启动过程中，其中一部是创建列在列在bootstrap数组的组件，并将他们每一个都插入浏览器DOM中。
每个被引导的组件都是自己组件树的根，插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
下面我们来看看引导过程本身。

四、在main.ts中引导
引导应用的方法有很多，他们取决于你想如何编译应用以及应用将在哪里运行。
开始时，你将使用即时（JiT）编译器动态编译应用，然后在浏览器运行他。
引导即时编译的浏览器应用的推荐地点是在app目录中一个名为app/main.ts的单独文件中。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

上面的代码为动态（JiT）编译创建浏览器平台，并引导上面提到的AppModule。
引导过程中搭建运行环境，从模块中的bootstrap数组中提到根AppComponent，创建该组件的实例，并将其插入到组件selector标示的元素标签中。
AppComponent选择器-在这里大部分例子是my-app，所以Angular在index.html中查找像这样的my-app的标签，然后在那里显示AppComponent。