Angular2、4入门基础知识（小的概念）

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

 @Component({

   selector: 'app-heroes',

   templateUrl: './heroes.component.html',

   styleUrls: ['./heroes.component.css']

 })

2. 数据双向绑定方式。

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

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

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

 import { FormsModule } from '@angular/forms';

 import { AppComponent } from './app.component';

 import { HeroesComponent } from './heroes/heroes.component';

 @NgModule({

   declarations: [

     AppComponent,

     HeroesComponent

   ],

   imports: [

     BrowserModule,

     FormsModule

   ],

   providers: [],

   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,指令，依赖注入

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

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

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

组件是为了控制显示把HTML模板及样式。一般，每个组件都配有一个类，用来定义业务能力。通过类的属性和方法与视图进行交互。
模板是为了告知Angular如何去渲染组件。Angular模板有其特殊的语法。
元数据是告知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 { ... }
```

Angular2入门导向笔记

2016年09月13日 16:55:20

阅读数：1753