Angular 应用的基本构造块

我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML 模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。

然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

模块

每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。

根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

declarations - 声明本模块中拥有的视图类。 Angular 有三种视图类：组件、指令和管道。
exports - declarations 的子集，可用于其它模块的组件模板。
imports - 本模块声明的组件模板需要的类所在的其它模块。
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

AppComponent的export语句只是用于演示如何导出的，它在这个例子中并不是必须的。 根模块不需要导出任何东西，因为其它组件不需要导入根模块。

我们通过引导（bootstrap）根模块来启动应用。在开发期间，你通常在一个main.ts文件中引导AppModule，就像这样：

app/main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

Angular 模块库

Angular 提供了一组 JavaScript 模块。可以把它们看做库模块。

每个 Angular 库的名字都带有@angular前缀。

用 npm 包管理工具安装它们，用 JavaScript 的import语句导入其中某些部件。

组件

组件负责控制屏幕上的一小块区域，我们称之为视图。

模板

通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。

元数据

元数据告诉 Angular 如何处理一个类。

在TypeScript 中，我们用装饰器 (decorator) 来附加元数据。

app/hero-list.component.ts (metadata)

@Component({
  moduleId: module.id,
  selector:    'hero-list',
  templateUrl: 'hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

这里看到@Component装饰器，它把紧随其后的类标记成了组件类。

@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

@Component的配置项包括：

moduleId: 为与模块相关的 URL（例如templateUrl）提供基地址。
selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件。例如，如果应用的 HTML 包含<hero-list></hero-list>， Angular 就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl：组件 HTML 模板的模块相对地址
providers - 组件所需服务的依赖注入提供商数组。这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。