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

先注意<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 自带了一些管道,我们也可以写自己的管道。