angular5 入门

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. 路由

先注意

定义路由组
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

  Dashboard
  Heroes


路由出口
有了这份配置，当本应用在浏览器中的URL变为`/heroes`时，路由器就会匹配到`path`为`heroes`的，并在宿主视图中的之后显示`HeroListComponent`组件。


location 服务
 带参数

在`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]   属性绑定
 双向事件绑定 注意FormsModule

 子组件
 指令for
 指令if

父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄， 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponent的hero属性上。 这种绑定是这样的：

在等号的左边，是方括号围绕的hero属性，这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。
在`hero`属性前面加上`@[Input]`装饰器@Input() hero: Hero;

{{selectedHero.name | uppercase}} is my hero  管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。 Angular 自带了一些管道，我们也可以写自己的管道。