Jay的专栏

元数据告诉 Angular 如何处理一个类。@Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . .

Angular 在渲染模板时，它会根据指令提供的操作对 DOM 进行转换。组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。<li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"><

Angular 数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。 <li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero-detail> <li (click)="selectHero(hero)"></li>

准备安装nvm这里写代码片在终端/控制器窗口运行命令node -v和npm -v，来确认你运行的 node 是v4.x.x或更高，npm 为3.x.x或更高。 老版本会产生错误。安装git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start

Angular 应用中有 8 个主要构造块： 模块 (module) 组件 (component) 模板 (template) 元数据 (metadata) 数据绑定 (data binding) 指令 (directive) 服务 (service) 依赖注入 (dependency injection)

@NgModule装饰器将AppModule标记为 Angular 模块类（也叫NgModule类）。 @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用。 imports — imports数组中应该只有NgModule类。不要放置其它类型的类。 declarations — 应用的唯一组件，指令和管道 — 它们也必须被添加到declarations数组 bootstr

组件负责控制屏幕上的一小块区域，我们称之为视图。 我们在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。例如，HeroListComponent有一个heroes属性，它返回一个英雄数组，这个数组从一个服务获得。 HeroListComponent还有一个selectHero()方法，当用户从列表中点选一个英雄时，就把它/她设置到selectedHer

模板以 HTML 形式存在，告诉 Angular 如何渲染组件。 多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。模板除了可以使用典型的 HTML 元素，还能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和这样的代码使用了 Angular 的模板语法。<h2>Hero List</h2> <p><i>Pick a hero from