引导式 / 引导+启动程序

应用程序至少有一个模块，并使用引导启动应用程序。方便起见，称之为AppModule。

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 { }

使用Bootstrap指定的组件会在index.html中显示出来。

进口数组

在Angular中，我们通过将各个功能的模块集成起来来创建应用程序。Angular本身也是按照模块划分的，例如HttpModule和RouterModule。我们可以通过将这些模块添加到imports数组中来使用它们的功能。

由于大多数应用程序在浏览器中运行，所以需要@angular/platform-browser的BrowserModule。

只有 NgModule 类才能被导入，其他类不得导入。

ES2015 的 import 和 Angular 的 NgModule 中的 imports 是不同的。

声明数组

将在模块中使用的组件、指令和管道都列在declarations中。如果使用了未放入declarations中的组件，则会在浏览器中显示错误消息。

在declarations中只能放置组件、指令和管道，不能放置其他NgModule类和服务类。

引导程序排列

通过引导 AppModule 启动应用程序。将列在 bootstrap 数组中的组件插入到 DOM 中。

每个引导组件都成为组件树的根节点。

在bootstrap中编写多个组件并不常见，大多数情况下只需指定一个组件，它将成为根组件，并形成组件树。

无论如何称呼该组件的路由，大多数开发者称其为AppComponent。

在main.ts中引导启动

有很多方法来引导启动应用程序，选择方法取决于编译和执行的方式。

最开始，我们使用了一种名为JIT（即时编译器）的动态编译器，通过浏览器来实现应用程序的编译。其他方法将在后面进行说明。

建议将 JIT 编译的应用程序放置在 src/main.ts 中。

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

platformBrowserDynamic().bootstrapModule(AppModule);

这段代码创建了一个用于动态（JIT）编译的浏览器平台，并引导了上述的AppModule。

在设置执行环境并从模块的引导数组中获取根组件AppComponent之后，引导程序会生成组件实例并插入标签。

<my-app><!-- content managed by Angular --></my-app>

关于Angular模块的更多内容

最初的应用仅有一个根模块，但是当应用程序变得庞大时，也可以将其切割为特性模块并延迟加载。