Module
简单来说模块(module)就是完成共同目的的代码块,export一些内容例如一个类、函数、或值变量。
component就是一个基本的Angular块,一个component类其实也是我们从模块中export出来的东西。
Angular本身也是一个有着许多称为“barrels”的库模块的集合。angular2/core 是最主要的Angular库模块。
如果引入的是Angular本身的库模块,import语句直接引用的是模块的名称;如果引入的是自己本地的模块,则需要使用相对路径,例如同一个目录下使用前缀(./)。
import {Component} from 'angular2/core'; // angular的模块 import {AppComponent} from './app.component'; // 自己写的本地模块
Component
组件(Component)控制屏幕实际使用面积的一小块(我们称之为视图的一小块)。简单来说组件完成一些事情来支撑视图(在一个类里),这个类通过属性和方法的API与视图相互作用。
export class HeroListComponent implements OnInit { constructor(private _service: HeroService){ } heroes:Hero[]; selectedHero: Hero; ngOnInit(){ this.heroes = this._service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } }
Template
模板(Template)是用于定义组件的视图,通过HTML来告诉Angular怎样来渲染这个组件。
<h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <div *ngFor="#hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </div> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
<hero-detail>是自定义的标签,代表的是HeroDetailComponent,在写Angular模板的时候,将自定义标签和原有标签混合是很常见的。
Metadata
@Component({ selector: 'hero-list', templateUrl: 'app/hero-list.component.html', directives: [HeroDetailComponent], providers: [HeroService] }) export class HeroListComponent implements OnInit { ... }
通过将metadata附加在类上,来告诉angular:HeroListComponent是一个组件。
通过“@decorator”来添加metadata是Typescript中最简单的方式。“@decorator”是个函数,有其配置参数。
Data Binding
数据绑定是一种统筹模板和组件的机制,我们在模板HTML中增加双花括号等其他标记来告诉Angular怎样连接组件和模板两边。
<div>{{hero.name}}</div> <hero-detail [hero]="selectedHero"></hero-detail> <div (click)="selectHero(hero)"></div>
第一行代码:{{hero.name}}是插入(interpolation),将组件的属性hero.name显示在div中。
第二行代码:[hero]是属性绑定(property binding),将父组件的selectedHero属性传给子组件的hero属性。
第三行代码:(click)是事件绑定(event binding),当用户点击时,调用组件的selectHero方法。
<input [(ngModel)]="hero.name">
双向数据绑定:使用ngModel命令,属性值会从组件传送到input框中,同时用户改变input框的值时也会传送回组件,重设组件的属性值(和事件绑定类似)。
Directive
Angular渲染模板的时候,根据给定的命令(directive)来将模板转换成DOM。
命令分为两种:结构(structural)命令和属性(Attribute)命令。通常在标签中出现(在等号的左边)。
<div *ngFor="#hero of heroes"></div> <hero-detail *ngIf="selectedHero"></hero-detail>
上面的ngFor、ngIf就是两个结构命令,它们可以增加、删除DOM中的元素。
<input [(ngModel)]="hero.name">
ngModel是其中一种属性命令,属性命令改变元素的外观和行为。
Service
服务(Service)囊括的范围很大,任何对我们的应用起到作用的值、函数或特性都能成为service,常见的有:
- logging service
- data service
- message bus
- tax calculator
- application configuration
// app/logger.service.ts (class only) export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } }
上面是一个service类的例子,作用是简单地在浏览器中log一些信息。
组件通常不直接完成一些工作,而是通过service来完成,例如从数据库获取数据、验证用户输入等等。它只维护属性和set|get这些属性的方法(为了数据绑定),而其他工作都交给service。
Dependency Injection
依赖注入(Dependency Injection)是在一个类中产生一个的新的实例的途径,这个实例是它require的依赖的实例。大多数的依赖都是service。
简单来说,Angular通过依赖注入来给组件提供它们需要的service。
// app/hero-list.component (constructor) constructor(private _service: HeroService){ }
在TypeScript中,Angular通过构造函数的参数,从而知道要提供什么service给组件。以上面为例,HeroListComponent的构造函数表明需要的是HeroService。
Injector维护一个service实例的容器,如果需要的service实例(需要是指在Component Metadata中的providers字段声明?这样就能解释只有父组件声明的话,子组件会和父组件共享一个实例的现象)不在容器里,Injector会增加进它的容器里,当所有需要的service实例都在之后,Angular可以开始调用组件的构造函数。这就是依赖注入的过程。