• 熱門專題

Angular2入門系列教程4服務

作者:雨落三竹  發布日期:2016-12-26 20:23:29
Tag標簽:教程  
  •    上一篇文章 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

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果