安装CLI及搭建项目
官网传送门
安装CLI及搭建项目
> npm install -g @angular/cli
> ng new my-app 或 ng new my-app --style=scss
> cd my-app
> ng serve --open
网络慢可切换至cnpm
> ng set --global packageManager=cnpm
-cli修改端口号
例如：创建模块
ng generate component my-component-name
例如：创建服务
ng g s my-s-name
显示数据
要显示组件的属性，最简单的方式就是通过插值表达式 () 来绑定属性名。 要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如{{}} 自动从组件中提取属性的值，并且把这些值插入浏览器中。当这些属性发生变化时， 就会自动刷新显示。
内联 () 模板还是模板文件？
无差别，根据个人喜好来。内联是，模板文件使用
使用ngFor显示数组属性
ngFor的*前缀表示
通过 NgIf 进行条件显示
There are many heroes!
的ngIf指令会根据一个布尔条件来显示或移除一个元素。
双向数据绑定
[(ngModel)] = "hero.name"
双向数据绑定: [()]是一个语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。虽然是一个有效的指令，但它默认情况下却是不可用的。 它属于一个可选模块。 我们必须选择使用那个模块。
处理点击事件
...
圆括号标识
css [class]
/*
当表达式(hero === selectedHero)为true时，
Angular会添加一个CSS类selected。为false时则会移除selected类。
*/
[class.selected]="hero === selectedHero"
关于[class]绑定的更多信息，参见模板语法。
组件命名指南
文件名和组件名遵循风格指南中的标准方式。组件的类名应该是大驼峰形式，并且以结尾。 因此英雄详情组件的类名是。组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以..ts结尾。 因此类应该放在.ts文件中。
定义组件
要定义一个组件，我们总是要先导入符号。@装饰器为组件提供了元数据。 CSS选择器的名字hero-会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。 本章的最后，我们会把添加到的模板中。总是这个组件类，因为你必然会在别处它。
父组件向子组件传递值
/*
在等号的左边，是方括号围绕的hero属性，
这表示它是属性绑定表达式的目标。
我们要绑定到的目标属性必须是一个输入属性，
否则Angular会拒绝绑定，并抛出一个错误。
*/
父组件会告诉子组件要显示哪个英雄， 告诉的方法是把它的属性绑定到的hero属性上
要保证目标属性是一个输入属性：
首先，修改@/core导入语句，使其包含符号Input。
{ , Input } from '@/core';然后，通过在hero属性前面加上@Input装饰器，来表明它是一个输入属性。
@Input() hero: Hero; 每个组件都必须在一个（且只有一个）模块中声明。
在中声明,打开app..ts并且导入，以便我们可以引用它。 { } from './';把添加到该模块的数组中。: [ , ],通常，数组包含应用中属于该模块的组件、管道和指令的列表。 组件在被其它组件引用之前必须先在一个模块中声明过
创建英雄服务
import { Injectable } from '@angular/core';@Injectable()
export class HeroService {
}
当 看到@()装饰器时，就会记下本服务的元数据。 如果 需要往这个服务中注入其它依赖，就会使用这些元数据。可以从任何地方获取Hero数据 —— Web服务、本地存储或模拟数据源。 从组件中移除数据访问逻辑意味着你可以随时更改这些实现方式，而不影响需要这些英雄数据的组件。
路由器导航
路由器是一个可选的外部 ，名叫。 路由器包含了多种服务()、多种指令(、、)、 和一套配置()。我们将先配置路由。
引入路由模块 { , } from '@/';配置路由 {path:'dir',:}路由输出配置 路由链接 配置带参数的路由
导致这次大修的原因是如何获得这个英雄的数据。
我们不会再从父组件的属性绑定中接收英雄数据。 新的
应该从服务的可观察对象中取得id参数， 并通过服务获取具有这个指定id的英雄数据。在()生命周期钩子中，我们从服务的可观察对象中提取id参数， 并且使用来获取具有这个id的英雄数据。。
使用管道格式化
注意，英雄的名字全被显示成大写字母。那是管道的效果，借助它，我们能干预插值表达式绑定的过程。可以管道操作符 ( | ) 后面看到它。管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。 自带了一些管道，我们也可以写自己的管道。
{{selectedHero.name | uppercase}} is my hero
end
