Angular.js2服务

vue是MVVM框架中相对angular和react 比较容易入手的，有了vue的基础来看angular确实挺有帮助的，但是看到路由的时候，很多angular路由的TypeScript语法和思维确实有些让我转不过弯，下面我就来总结一下我学习完angular路由之后的一些心得。我们用angular官网的例子来讲解，文档代码（https://embed.plnkr.co/?show=preview）

一、app文档里面的文档目录

--------app

----------app.component.ts

----------hero-detial.component.ts

----------app.module.ts

----------hero.services.ts

----------hero.ts

----------mock-heroes.ts

这几个文件分别有什么功能呢？

1.app.component.ts：根组件，将获取到的数据导入组件，渲染到页面上，并且传递给子组件

2.hero-detial.component.ts：子组件，接收父组件传递过来的数据并进行渲染

3.app.module.ts：声明HeroDetailComponent组件，只有声明了才可以使用

4.hero.services.ts：一个接口，一个请求获取数据的接口，请求到的数据可以被每个组件导入

5.hero.ts：声明一个类，并定义数据的类型

6.mock-heroes.ts：模拟数据库

接下来我们一一讲解一下里面的代码

二、代码讲解

1.app.component.ts

import { Component, OnInit } from '@angular/core';//导入类装饰器Component和生命周期钩子OnInit import { Hero } from './hero';//导入hero.ts文件中定义的类import { HeroService } from './hero.service';//导入hero.service.ts文件中请求到的数据 @Component({  selector: 'app-root',//挂载  /*模板可换成templateUrl，这个方法要创建一个文件，然后把template属性里面的HTML代码全部分离开来*/  template: `              <h1>{{title}}</h1>    <h2>My Heroes</h2>    <ul class="heroes">      <li *ngFor="let hero of heroes"        [class.selected]="hero === selectedHero"        (click)="onSelect(hero)">        <span class="badge">{{hero.id}}</span> {{hero.name}}      </li>    </ul>    <hero-detail [hero]="selectedHero"></hero-detail>  `,  styles: [`    .selected {      background-color: #CFD8DC !important;      color: white;    }    .heroes {      margin: 0 0 2em 0;      list-style-type: none;      padding: 0;      width: 15em;    }    .heroes li {      cursor: pointer;      position: relative;      left: 0;      background-color: #EEE;      margin: .5em;      padding: .3em 0;      height: 1.6em;      border-radius: 4px;    }    .heroes li.selected:hover {      background-color: #BBD8DC !important;      color: white;    }    .heroes li:hover {      color: #607D8B;      background-color: #DDD;      left: .1em;    }    .heroes .text {      position: relative;      top: -3px;    }    .heroes .badge {      display: inline-block;      font-size: small;      color: white;      padding: 0.8em 0.7em 0 0.7em;      background-color: #607D8B;      line-height: 1em;      position: relative;      left: -1px;      top: -4px;      height: 1.8em;      margin-right: .8em;      border-radius: 4px 0 0 4px;    }  `],  providers: [HeroService]   //providers - 服务的创建者，并加入到全局服务列表中，这里的providers存在于app.component.ts这个模块中，})                           //所以说，哪个组件需要请求到数据，哪个组件里面就加上providers声明一下数据来源于哪里，服务的创建者是谁export class AppComponent implements OnInit {  title = 'Tour of Heroes';  heroes: Hero[];           //声明一个heroes变量，类型为Hero[]，其实可以理解成为具有Hero类那种格式的数组  selectedHero: Hero;       //声明一个selectedHero变量，类型为Hero  /*    *原来的写法是这样的heroService = new HeroService();但是 如果有一天我们修改了HeroService的构造函数，我们不得不找出创建过此服务的每一处代码，并修改它。   */   constructor(private heroService: HeroService) { }   /*    *getheroes函数里面的写法本来是这样的     this.heroService.getHeroes().then(function(heroes){      this.heroes = heroes;     })     把hero.service.ts文件中getHeroes()函数return的值通过heroes传进来，然后赋值给前面声明的heroes变量，此时所有的数据全部赋值给heroes变量了  */  getHeroes(): void {//void表示类型，因为getHeroes没有return值，所以为void    this.heroService.getHeroes().then(heroes => this.heroes = heroes);//此处第一个heroes是一个参数，一个参数可以省略括号  }  //构造函数不应该包含复杂的逻辑  ngOnInit(): void {    this.getHeroes();//此处是调用上面声明并定义了的getHeroes()函数  }   onSelect(hero: Hero): void {    this.selectedHero = hero;  }  /*    此处用ES5写法就是    function onSelect(hero){      this.selectedHero = hero;    }    上面的Hero是限定hero的类型，void是限定onSelect函数的返回值类型   */}

2.hero-detial.component.ts

import { Component, Input } from '@angular/core';导入类装饰器Component和属性装饰器Inputimport { Hero } from './hero';@Component({  selector: 'hero-detail', //定义标签名  template: `    <div *ngIf="hero">      <h2>{{hero.name}} details!</h2>      <div><label>id: </label>{{hero.id}}</div>      <div>        <label>name: </label>        <input [(ngModel)]="hero.name" placeholder="name"/>      </div>    </div>  `})export class HeroDetailComponent {@Input() hero: Hero;}

3.app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule }   from '@angular/forms';/*  每个组件都必须在一个（且只有一个）Angular模块中声明。打开app.module.ts并且导入HeroDetailComponent，以便我们可以引用它。 */import { AppComponent } from './app.component';import { HeroDetailComponent } from './hero-detail.component';@NgModule({  declarations: [   //把HeroDetailComponent添加到该模块的declarations数组中。    AppComponent,    HeroDetailComponent  ],  imports: [    BrowserModule,    FormsModule  ],  providers: [],//providers除了可以放置在需要用到的组件中之外，还可以放在app.module.ts这个核心文件中  bootstrap: [AppComponent]  //bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。})export class AppModule { }

4.hero.services.ts

import { Injectable } from '@angular/core';import { Hero } from './hero';import { HEROES } from './mock-heroes';@Injectable()/*此处是把HeroService的getHeroes方法改写为返回承诺的形式，原来的格式为 getHeroes(): Hero[] {    return HEROES;  } */export class HeroService {  getHeroes(): Promise<Hero[]> {    return Promise.resolve(HEROES);  }}

5.hero.ts

export class Hero {  id: number;  name: string;}

6.mock-heroes.ts

import { Hero } from './hero'; export 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' }];