1. angular-cli
安装（前提：安装node，npm，配置npm 淘宝镜像）
npm install -g @angular/cli
angular-cli 常用命令
ng new {projectName} //生成{projectName} 项目
ng g component {name} //新建{name}组件 默认会新建{name}文件夹 里边是组件四件套
ng g class {name} //新建类，多用于通用属性申明
ng g service //新建service
ng g module //新建module
ng g module route //新建路由
……未完待续
ng serve --host --port --open --aot //自行研究
2. NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。
@NgModule({
declarations: [
- 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent
],
imports: [
- 本模块声明的组件模板需要的类所在的其它模块。
BrowserModule,
FormsModule,
HttpClientModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
],
providers: [
-服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
HeroService
],
bootstrap: [
- 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
AppComponent
]
})
3. Component
@Component的配置
export class
属性声明，指定属性类型
构造函数 constructor(){}
生命周期钩子 ngOnInit
泛型
4. httpclient
es6: map then Promise
http.{get|post|put|delete} subscribe() catch() then()
Promise
Observable
5. 路由
先注意<base href="/">
定义路由组
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];
export
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
导航 routerLink routerLinkActive
<nav>
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
路由出口
有了这份配置，当本应用在浏览器中的URL变为`/heroes`时，路由器就会匹配到`path`为`heroes`的，并在宿主视图中的之后显示`HeroListComponent`组件。
<router-outlet></router-outlet>
location 服务
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4"> 带参数
在`ngOnInit()`生命周期钩子中，我们从
ActivatedRoute服务的可观察对象`params`中提取`id`参数， 并且使用`HeroService`来获取具有这个`id`的英雄数据
ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}
注意switchMap运算符如何将可观察的路由参数中的 id 映射到一个新的Observable， 即HeroService.getHero()方法的结果。
6. Angular模板语法
{{title}} 插值表达式
(click) 事件绑定
[hero] 属性绑定
<input [([ngModel])] = "hero.name"> 双向事件绑定 注意FormsModule
<hero-detail> 子组件
<li *ngFor="let hero of heroes"></li> 指令for
<div *ngIf="hero"> 指令if
父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄， 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponent的hero属性上。 这种绑定是这样的：
<hero-detail [hero]="selectedHero"></hero-detail>
在等号的左边，是方括号围绕的hero属性，这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。
在`hero`属性前面加上`@[Input]`装饰器@Input() hero: Hero;
{{selectedHero.name | uppercase}} is my hero 管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。 Angular 自带了一些管道，我们也可以写自己的管道。
