Angular2入门导向笔记

1. 使用引用符来格式化HTML代码。

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
            <h2>{{hero.name}} details!</h2>
            <div><label>id:</label>{{hero.id}}</div>
            <div><label>name:</label>{{hero.name}}</div>`
})

2. 数据双向绑定方式

在使用表单输入绑定数据之前，我们需要引入表单模块FormsModule包至我们的Angular模块中。引入包的方法是，直接添加需要的包至NgModel的imports数组中。

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent}  from './app.component';
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

表单中写法：

<input [(ngModel)]="hero.name" placeholder="name">

3.使用自定义对象数组

const HEROES: Hero[] = [
        {id: 11, name: 'Mr.Nice'},
        {id: 12, name: 'Narco'},
        {id: 13, name: 'Bombasto'},
        {id: 14, name: 'Celeritas'},
        {id: 15, name: 'Magneta'},
        {id: 16, name: 'RubberMan'},
        {id: 17, name: 'Dynama'},
        {id: 18, name: 'Dr IQ'},
        {id: 19, name: 'Magma'},
        {id: 20, name: 'Tornado'}
    ];

4.使用列表li

<li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span>
    {{hero.name}}
</li>

5.为组件添加样式

@Component({
    selector: 'my-app',
    template: ``,
    styles: [`
            .selected {
                background-color: #CFD8DC;
                color:white;
            }
           .heroes {
                margin: 0 0 2em 0;
                list-style-type: none;
                padding: 0;
                width: 15em;
             }
     `]
 }]

6.定义变量

与Java/C++定义变量的类型写在前面不同的时，TypeScript的定义方式为

变量名:类型

selectedHero:Hero;

7.定义方法

必须定义返回类型

onSelect(hero: Hero): void {
    this.selectedHero = hero;
}

8.使用结构指令

直接使用某个可能为空的变量，会导致异常抛出，需要使用if结构进行判断。angular中有一种名为结构指令(structural directives)可以改变DOM的结构。这类的指令有ngIf和ngFor。用法如下：

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id:</label>{{selectedHero.id}}</div>
    <div><label>name:</label>{{selectedHero.name}}</div>
</div>

9.改变组件的CSS样式类

[class.className]=true/false

key为样式的类名，value为true或者false.应用：已选择的项添加已选择样式。未选择的项消除已选择样式。

<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span>
    {{hero.name}}
</li>

10.引入类

import { Hero } from './hero';

11.使用服务Service

使用@Injectable修饰类

import {Injectable} from '@angular/core';

import {HEROES} from "./mock-heroes";
import {Hero} from "./hero";

@Injectable()
export class HeroServie {
    getHeroes(): Hero[] {
        return HEROES
    }

}

如何在组件中使用这个服务？传统的方式会使用new关键字去实例化。但官方不建议这么做，有以下几点理由：

• 当服务类的构造方法改变时，我们必须要修改每一处使用到它的代码

• 如果需要缓存对象的状态，每次都new是做不到的。

• 在代码中写死new类来实例化，将无法替换其实现。比如，测试环境和生产环境的服务可能不同，当要切换不同版本是比较麻烦的。

官方推荐使用注入来使用服务。为组件添加providers元数据。

providers: [HeroServie],

组件的构造方法改为：

constructor(private  heroService: HeroServie) {
    this.heroes = heroService.getHeroes();
}

12.使用ngOnInit生命周期回调接口

angular提供了一系统的接口监控组件的生命周期各个环节。

import { OnInit } from '@angular/core';

export class AppComponent implements OnInit {

  ngOnInit(): void {

    // somthing to be done

  }

}

13. 使用Promise解决回调的问题

服务有时候是耗时的操作，如果直接调用可能会阻塞UI，使用Promise可以解决这个问题。

@Injectable()
export class HeroServie {
    getHeroes(): Promise<Hero[]> {
        return Promise.resolve(HEROES);
    }

}

private getHeroes() : void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

14.使用路由Routing

路由配置文件写法

import {Routes, RouterModule} from "@angular/router";
import {ModuleWithProviders} from "@angular/core";
import {HeroesComponent} from "./heroes.component";


const appRoutes: Routes = [{
    path: 'heroes',
    component: HeroesComponent
}];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

模板中使用

<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>

routerLink指令告知路由器点击跳转至哪个地址，<router-outlet></router-outlet>表示路由出口，即要把组件(routerLink指向的组件)加载在哪个位置.

15.使用templateUrl代替template

@Component({
    selector: 'my-dashboard',
    templateUrl: 'app/dashboard.component.html'
})

16.按下标显示数组中的指定记录

this.heroService.getHeroes().then(heroes=>this.heroes = heroes.slice(1, 5));

17.参数化路由

路由配置：id为参数

{
    path: 'detail/:id',
    component: HeroDetailComponent
}

获取参数：

export class HeroDetailComponent implements OnInit {
    ngOnInit(): void {
        this.route.params.forEach((params: Params)=> {
            let id = +params['id'];  //加号的作用是将字符串参数转化为数字
            this.heroService.getHero(id).then(hero => this.hero = hero);
        });
    }

    constructor(private heroService: HeroServie,
                private route: ActivatedRoute) {

    }

    @Input()
    hero: Hero;

}

18.代码中转向

gotoDetail(hero: Hero): void {
    let link = ['/detail', hero.id];
    this.router.navigator(link);
}

19. 使用内在Web API模拟HTTP服务

内存数据模拟数据库数据。

InMemoryWebApiModule.forRoot(InMemoryDataService),

service实现

import {InMemoryDbService} from "angular2-in-memory-web-api";

export class InMemoryDataService implements InMemoryDbService {
    createDb(): {} {
        let heroes = [
            {id: 11, name: 'Mr. Nice'},
            {id: 12, name: 'Narco'},
            {id: 13, name: 'Bombasto'},
            {id: 14, name: 'Celeritas'},
            {id: 15, name: 'Magneta'},
            {id: 16, name: 'RubberMan'},
            {id: 17, name: 'Dynama'},
            {id: 18, name: 'Dr IQ'},
            {id: 19, name: 'Magma'},
            {id: 20, name: 'Tornado'}
        ]
        return heroes;
    }

}

HTTP请求示例

getHeroes(): Promise<Hero[]> {
    return this.http
        .get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[]) // 转换类型
        .catch(this.handleError)
}

20.使用HTTP Promise

Angular的http.get返回的是Observable,Observables是一个强大的管理异步数据流的方式。

当我们使用toPromise方法将Observables转化为Promise后，操作就像操作普通的Promise一样。使用toPromise方法需要引入外部方法。

import 'rxjs/add/operator/toPromise';

21.HTTP请求异常处理

.catch(this.handleError);

private handleError(error: any): Promise<any> {

  console.error('An error occurred', error); // for demo purposes only

  return Promise.reject(error.message || error);

}

angular体系

angular体系主要包括：模块Module,组件Component,模板Template,元数据Metadata,数据绑定Data Banding,服务Service,指令，依赖注入

1. 模块是ES6标准之一，每个模块目的性非常单一。在Angular中，一般模块输出的都是一个组件类，需要配合import来加载模块。

   有一类模块是Angular本身定义好的，即库模块，当加载angular2/core模块时，可以调用一个核心类库。库模块入要有angular/core(核心类库),angular/http(网络请求相关),angular2/router(路由相关),angular2/common(表单、指令等)

- Angular应用由模块组成

- 模块输出可以是：类、函数、值或其他模块

1. 组件是为了控制显示把HTML模板及样式。一般，每个组件都配有一个类，用来定义业务能力。通过类的属性和方法与视图进行交互。

2. 模板是为了告知Angular如何去渲染组件。Angular模板有其特殊的语法。

3. 元数据是告知Angular如何处理一个类。一个类如果没有元数据的声明，就是一个无法单独运行的普通的类。可以使用注解来定义类的元数据。如@Component,注解中可以带上一些参数：

- selector - CSS选择器

- templateUrl - 的模板地址

- directives - 指令或组件数组

- providers - 注册的Service服务数组，从而在组件类构造函数中能够正确的实例化这些服务

除了@Component外，还有Injectable,@Input,@Output,@RouterConfig元数据。

1. 数据绑定是一种协调组件与模板之间的通信机制，通过HTML元素来描述采用哪种数据绑定形式。数据绑定包括属性绑定[hero]、事件绑定(click)、双向绑定[(ngModel)]="hero.name"

2. 指令。一个指令是由元数据和一个类组成，使用元数据注解@Directive修饰就是一个指令。指令和组件的功能类似，他们的区别是指令侧重对HTML元素功能的扩展。而组件是一个具体一的业务。指令分为结构性指令如*ngFor,*ngIf等和属性指令,如[(ngModel)]

3. 服务。模块中需要使用到的值、函数都可以是服务Service。服务通常 是一个目的性非常明确的类。如日志Service,数据Service，应用程序配置信息，工资计算器等 。

   组件是是服务的最大消费者，组件都是靠服务来处理大部分事务，组件不会直接从服务器获取数据、不验证用户输入，都是委派验服务来完成。一般我们遵循的原则是：把应用程序逻辑转化成服务 ，并通过依赖注入提供组件来消费服务。

4. 依赖注入。依赖注入是一种对类实例的新方法。我们可以在引导应用程序启动时实例一个服务如

bootstrap(AppComponent, [BackendService, HeroService, Logger]);

或者在组件级别里注册服务

@Component({
  providers:   [HeroService]
})
export class HeroesComponent { ... }