由于Angular模板是动态的，所以你需要通过指令实现对DOM的转换。（组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。 ）
指令分为两种：结构指令、属性指令。
a. 结构指令: 通过在 DOM 中添加、移除和替换元素来修改布局。
下面是一个简单的内置结构指令的例子：
<!-- src/app/hero-list.component.html (structural) --> <li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"></hero-detail>
*ngFor告诉 Angular 为heroes列表中的每个英雄生成一个<li>标签。
*ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。
b. 属性指令：修改一个现有元素的外观或行为。
简单例子:
<!-- src/app/hero-detail.component.html --> <input [(ngModel)]="hero.name">
7. 服务 (service)
服务是一个广义范畴，包括：值、函数，或应用所需的特性。几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。
例如：
日志服务
数据服务
消息总线
税款计算器
应用程序配置
组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。所以说服务是跑腿的，服务一般用来处理业务逻辑，被注入在组件当中，服务是全局单例的。也就是说注入到所有组件中的服务是同一个。
一个简单的例子：
// src/app/hero.service.ts export class HeroService { private heroes: Hero[] = []; constructor( private backend: BackendService, private logger: Logger) { } getHeroes() { this.backend.getAll(Hero).then( (heroes: Hero[]) => { this.logger.log(`Fetched ${heroes.length} heroes.`); this.heroes.push(...heroes); // fill cache }); return this.heroes; } }
8. 依赖注入 (denpendency injection)
“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
来看注入方式:
// src/app/hero-list.component.ts constructor(private service: HeroService) { }
注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。
通常我们将服务声明在根模块，以便在整个应用中使用这个服务。
// src/app/app.module.ts providers: [ BackendService, HeroService, Logger ],
也可以在其他组件中声明服务，那么这个服务只能用于当前组件。把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。
// src/app/hero-list.component.ts @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] })