来自官网:
这篇《英雄指南》涵盖`了 Angular 的核心原理。这次构建的应用会涉及很多特性：获得并显示英雄列表，编辑所选英雄的详情，并在英雄数据的多个视图之间建立导航。这些特性，在成熟的、数据驱动的应用中经常见到。
完成本教程后，我们将学习足够的 Angular 核心技术，并确信 Angular 确实能做到我们需要它做的。 我们将涵盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。
一 ：为本地开发搭建环境
a.检查@angular/cli版本.
在命令行输入 ng -v -----版本号必须大于1.0.0-beta.24
b.新建工程
工程所在目录，命令行ng new 项目名称 --style=scss 带style参数原因：ng-bootstrap要求使用scss（scss--》css的预编译语言 https://www.sass.hk/）
c.运行项目
命令行进入你的项目根目录
执行 cnpm start
在浏览器输入http://localhost:4200/
d.布局会引用Bootstrap布局（引入bootstrap插件）
只使用它的css和一些图标样式---->只需引入css文件和fonts文件
1.在src/assets文件下创建bootstrap文件夹
目录结构:
-assets
-bootstrap
-css
-bootstrap.min.css
-fonts
2.在.app/app.component.html
<span class="glyphicon glyphicon-plus"></span>
3.浏览器页面呈现出图标。引入bootstrap成功。
二:显示此英雄
.app/app.compoent.ts
export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm';}
./app/app.component.html
<h1>`title`</h1><h2>`hero` details!</h2>`
保存后，浏览器应自动刷新，显示标题和英雄。
这里的双大括号是Angular中的插值表达式绑定语法。它们表示组件的title和hero属性的值会作为字符串插入到HTML标签中间。
三:General对象
创建一bean文件夹(用于存放数据模型)
./src/bean/General.ts
创建General.ts
export class General{
constructor(
public id:number,
public name:String,
public source:String
){}
}
在.app/app.component.ts
引入
import {General} from "../bean/General";
general: General= { id: 1, name: '赵云'};
.app/app.component.html
<h1>`title`</h1><h2>`general`.`name` details!</h2>
四；编辑英雄名字
用户应该能在一个<input>输入框中编辑英雄的名字。 当用户输入时，这个输入框应该能同时显示和修改英雄的name属性。
也就是说，我们要在表单元素<input>和组件的hero.name属性之间建立双向绑定。
双向绑定
[(ngModel)]是一个Angular语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。
虽然NgModel是一个有效的Angular指令，但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择使用那个模块。
注意:
.app/app.module.ts
引入
//双向数据绑定依赖的模块
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
FormsModule
]
.app/app.component.html重构
<div> <label>name: </label> <input [(ngModel)]="general.name" placeholder="name"></div>
五:显示我们的英雄
创建英雄
创建data文件夹(用于存放数据)
./src/data/mock-general.ts
创建mock-general.ts
import {General} from '../bean/General';
export const Generals:General[]=[
new General(11,"孙武",'春秋'),
new General(12,"白起",'秦'),
new General(13,"霍去病",'西汉'),
new General(14,"马援",'东汉'),
new General(15,"谢玄",'两晋'),
new General(16,"张须陀",'隋'),
new General(17,"李靖",'唐'),
new General(18,"薛仁贵",'唐'),
new General(19,"岳飞 ",'宋'),
new General(20,"戚继光",'明'),
];
HEROES是一个由Hero类的实例构成的数组，我们在第一部分定义过它。 我们当然希望从一个 Web 服务中获取这个英雄列表，但别急，我们得把步子迈得小一点，先用一组模拟出来的英雄。
暴露英雄
./app/app.component.ts
1.导入import {Generals} from "../data/mock-general";
import { OnInit} from '@angular/core';
微调AppComponent
export class AppComponent implements OnInit {
title = 'MY General';
// generals:General[]=Generals;
generals:General[];
ngOnInit(){
this.generals=Generals;
}
}
在模板中显示英雄
*ngFor 官网https://angular.cn/guide/displaying-data#ngFor
重构./app/app.component.html
<div class="container">
<div class="row">
<h1>`title`</h1>
</div>
<div>
<ul >
<li *ngFor="let item of generals"><span>`item`.`id` </span> `item`.`name` `item`.`source`</li>
</ul>
</div>
</div>
当浏览器刷新时，我们就看到了英雄列表
本文转自 沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/1965007，如需转载请自行联系原作者
