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