2.1 基本构造
angularjs主要有8个构造快：
模块（module）
组件（component）
模板（template）
元数据（metadata）
数据绑定（data binding）
指令（directive）
服务（service）
依赖注入（dependency injection）
2.1.1 模块（module）
每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。装饰器是用来修饰 JavaScript 类的函数。
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 { }
NgModule的主要属性如下:
imports :
导入其他module,其他module暴露出来的Component Directives Pipes等都可以在本mudole的组件被使用。比如导入CommonModule后就可以后就可以使用NgIf NgFor等指令。
declarations:
模块内部Components Directives Pipes的列表，声明一下这个模块的内部成员。
providers:
指令应用程序的根级别需要使用的service.(ng2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
bootstrap:固定写法，略.
exports:
用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部所暴露的公共成员。除非导入的这个module把它内部导入的module写到exports中。
2.1.2 元数据（metadata)
元数据告诉 Angular 如何处理一个类。
在TypeScript 中，我们用装饰器 (decorator) 来附加元数据。 下面就是HeroListComponent的一些元数据。
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
@Component的配置项包括：
moduleId: 为与模块相关的 URL（例如templateUrl）提供基地址。
selector: CSS 选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件。
templateUrl: 组件 HTML 模板的模块相对地址
providers: 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以可以调用该服务了。
2.1.3 数据绑定（data binding)
<li>{{hero.name}}</li>
<hero-detail [hidden]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
<input [(ngModel)]="hero.name">
-
{{hero.name}}[插值表达式]在<li>标签中显示组件的hero.name属性的值。 -
[hidden][属性绑定] 把父组件的selectedHero的值传到子组件的hidden属性中。 -
(click)[事件绑定]在用户点击英雄的名字时调用组件的selectHero方法。
-
[(ngModel)]双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。
2.1.4 依赖注入
依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。
constructor(private service: HeroService) { }
angularjs2 通过构造函数实现注入，和java里面的注入的方式之一借助构造函数实现依赖是一样的