Angular2入門系列教程4-服務

 　　上一篇文章 Angular2入門系列教程-多個組件，主從關系

 

　　在編程中，我們通常會將數據提供單獨分離出來，以免在編寫程序的過程中反復復制粘貼數據請求的代碼

　　Angular2中提供了依賴注入的概念，使得我們可以很優雅得做到這一點。這里簡單描述下，依賴注入可以使我們在編寫代碼的時候不用使用new 去生成一個類，這樣就達到了解耦的目的，更多關於依賴注入的知識我覺得不應該在這里講解

　　和其他方式類似，Angular2使用的是裝飾器@Injectable()來描述以一個類是否可注入，我們本篇文章的目的，就是為了剝離數據獲取的操作，提供一個可復用的可注入的服務。

　　為了方便，我們直接在之前的data文件夾目錄下建立一個blog.service.ts的文件，這個文件要干嘛呢？就是將之前的ArticleComponent中的獲取blog的方法抽離出來，成為一個完全獨立的模塊，至於在ArticleComponent中，我們使用依賴注入的方式，將我們的服務注入進去，直接使用，看代碼

　　

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

import { Blog,BLOGS } from './blog';

@Injectable()
export class BlogService {
  getBlogs(): Blog[] {
    return BLOGS;
  }
  getSelectedBlog(id:number):Blog
  {
     return this.getBlogs().find(x=>x.id==id);
  }
}

 

　　正如前面所說，我們使用@Injectable()來裝飾了我們的BlogService,使得我們可以在其他組件中注入這個服務，看AppComponent,我們發現和之前有一點兒改變

　　

import { Component } from '@angular/core';
import {BLOGS,Blog} from '../data/blog';
import {BlogService} from './../data/blog.service';

@Component({
    selector: 'ngarticle',
    templateUrl: './article.component.html',
    styleUrls:['./article.component.css']
})

export class ArticleComponent  {
    blogList:Blog[];
    selectedBlog:Blog;
    constructor(private bService:BlogService)
    {
        this.blogList=bService.getBlogs();
    }
    selectBlog(id:number)
    {
        this.selectedBlog=this.bService.getSelectedBlog(id);
    }
}

　　我們在AppComponent的構造函數中使用了BlogService的參數，使得我們可以在其類的內部任意使用我們的服務（其實你並不用刻意關心依賴注入怎么工作的，你需要了解的是它給編程帶來解耦的作用）

　　而當我們興致勃勃地用ng serve 運行的時候，我們卻發現，怎么報錯了？

　　

　　我們看到Angular2給我們的提示是BlogService沒有Provider;

　　我們需要在AppComponent組件的@Component()裝飾器中添加這樣一句話

　　providers:[BlogService]

　　provider的作用，就是告訴Angular，我們在初始化AppComponent的時候，同時也要創建一個BlogService的實例，這樣，我們就可以在組件中使用了

　　

　　好了，到這里，我們只需要在AppComponnet.html把獲取detail的函數的參數改了就行了

　　

<div class="article">
    <ul class="articleList">
            <li *ngFor="let blog of blogList" (click)="selectBlog(blog.id)">
                <a>
                   {{blog.id}}:{{blog.title}}
                </a>
            </li>
    </ul>
    <div>
    <article-detail  [blog]="selectedBlog"></article-detail>
        
    </div>
</div>

運行效果嘛，其實和上篇代碼的還是一樣，但是還是貼下吧

　　接下來我們將要繼續學習如何使用Angular中的路由和Angualr中的HTTP請求;而在HTTP請求一章，我們將展開js中基於Promise的異步編程和Observable（可觀察對象）的學習，途中，我們也會講解如何在Angular2中使用Jquery！

　　我好像很不會瞎比比，就這樣吧

　　更新ing。。。

　　

---

　　項目已經放到了gitbub上，地址 https://github.com/SeeSharply/LearnAngular

　　本文章的提交 https://github.com/SeeSharply/LearnAngular/tree/df1cd319b3571622242ae4d1b424a5d9e853ed93