angular2初入眼簾之－service

jokester 發(fā)布于2019-08-19 18:10 / 2203人閱讀

摘要：前集回顧上一章里我們?cè)诶锿ㄟ^(guò)組合三個(gè)組件，并通過(guò)單向數(shù)據(jù)流的方式把她們驅(qū)動(dòng)起來(lái)。設(shè)計(jì)每章都會(huì)提一下，先設(shè)計(jì)使用場(chǎng)景這種方式，我們稱之為，不了解的朋友參考以手寫依賴注入。

前集回顧

上一章里我們?cè)?b>AppComponent里通過(guò)組合InputItem、 CheckableItem、 Counter三個(gè)組件，并通過(guò)Unidirectional Data Flow(單向數(shù)據(jù)流)的方式把她們驅(qū)動(dòng)起來(lái)。今天這章，我們講講angular2里的service。

本章源碼：service

本章使用angular2版本為：2.4.5，webpack版本為: 2.2.0

先來(lái)看看我們將要完成的效果圖：

需求分析

(注意動(dòng)畫部分)，在上一章的基礎(chǔ)上我們加入了初始化數(shù)據(jù)，在數(shù)據(jù)加載完成前會(huì)有一個(gè)loading，數(shù)據(jù)準(zhǔn)備好之后loading消失，列表顯現(xiàn)。

設(shè)計(jì)use case

每章都會(huì)提一下，先設(shè)計(jì)使用場(chǎng)景(這種方式，我們稱之為"BDD"，不了解的朋友參考以BDD手寫依賴注入(dependency injection))。

重構(gòu)ts/app.ts

import {Component, OnInit} from "@angular/core";

import {Item} from "./CheckableItem";

//引入本章主題ItemService
import {ItemService} from "./ItemService";

@Component({
    selector: "my-app",
    template: `
    My First Angular 2 App
    
    
    
    Loading
    
    `,
    directives: [InputItem, CheckableItem, Counter],
    //注入ItemService
    providers: [ItemService]
})
export class AppComponent implements OnInit {

    items: Item[] = [];
    //聲明loading狀態(tài)，初始值為true
    loading: boolean = true;

    //通過(guò)構(gòu)造器自動(dòng)獲取ItemService實(shí)例
    constructor(private _itemService: ItemService) { }

    //在組件初始化以后調(diào)用ItemService獲取初始化數(shù)據(jù)
    ngOnInit() {
        this._itemService
            .getItems()
            .then(data => {
                //重置loading狀態(tài)為false
                this.loading = false;
                //設(shè)置初始值
                this.items = data;
            });
    }

    addItem(item: Item) {
        this.items = [...this.items, item];
    }

    toggle(item: Item, index: number) {
        this.items = [
            ...this.items.slice(0, index),
            { isChecked: !item.isChecked, txt: item.txt },
            ...this.items.slice(index + 1)
        ];
    }
}

實(shí)現(xiàn)ItemService

touch ts/ItemService.ts

向剛創(chuàng)建的ts/ItemService.ts中，添加如下內(nèi)容：

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

import {Item} from "./CheckableItem";

//用Injectable裝飾器聲明該類可被依賴注入
@Injectable()
export class ItemService {

    //設(shè)置一個(gè)初始值數(shù)組
    private items: Item[] = [
        {
            isChecked: true,
            txt: "Learn JavaScript"
        }, {
            isChecked: false,
            txt: "Learn TypeScript"
        }, {
            isChecked: false,
            txt: "Learn Angular2"
        }
    ];

    //提供一個(gè)方法，返回初始數(shù)據(jù)的Promise
    getItems(): Promise> {
        return new Promise((resolve, reject) => {
            //這里手動(dòng)做延遲是為了模擬網(wǎng)絡(luò)請(qǐng)求
            setTimeout(() => {
                resolve(this.items);
            }, 1500);
        });
    }
}

查看效果

本章內(nèi)容比較簡(jiǎn)單，寫到這里差不多算結(jié)束了(其實(shí)還沒(méi)有哦！)，先來(lái)跑跑看

npm start

OK，我確信這個(gè)代碼是可以運(yùn)行的，那到底什么是service？我們現(xiàn)在來(lái)對(duì)著代碼講一講。

什么是service

service是可被替換的

service必須通過(guò)依賴注入使用

service通常用作數(shù)據(jù)存取等應(yīng)用中可公用邏輯部分

如何定義service

必須通過(guò)@Injectable裝飾器聲明

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

@Injectable()
export class ItemService {
}

使用service

引入service

import {ItemService} from "./ItemService";

切忌不要自作多情的new她哦！！！！！

構(gòu)造器獲取實(shí)例

constructor(private _itemService: ItemService) { }

自動(dòng)注入實(shí)例

就像directives那樣，添加到@Component的metadata中

providers: [ItemService]

就這么簡(jiǎn)單，so easy 有木有？

重構(gòu)

那么我們說(shuō)，到這里就結(jié)束了嗎？請(qǐng)看下面，template里有這么一段：

用了*ngFor將items列表化

用了*ngIf控制loading的顯示狀態(tài)

是不是感覺(jué)有點(diǎn)兒矬了，如果能有個(gè)多帶帶的ItemList組件該多好？像這樣使用：

import {Component, OnInit} from "@angular/core";

import {Item} from "./CheckableItem";

import {ItemService} from "./ItemService";

@Component({
    selector: "my-app",
    template: `
    My First Angular 2 App
    
    
    
    
    `,
    providers: [ItemService]
})
export class AppComponent implements OnInit {

    items: Item[] = [];
    loading: boolean = true;

    constructor(private _itemService: ItemService) { }

    ngOnInit() {
        this._itemService
            .getItems()
            .then(data => {
                this.loading = false;
                this.items = data;
            });
    }

    addItem(item: Item) {
        this.items = [...this.items, item];
    }

    toggle(e: { item: Item, index: number }) {
        this.items = [
            ...this.items.slice(0, e.index),
            { isChecked: !e.item.isChecked, txt: e.item.txt },
            ...this.items.slice(e.index + 1)
        ];
    }
}

實(shí)現(xiàn)ItemList

touch ts/ItemList.ts

向剛創(chuàng)建的ts/ItemList.ts中，添加如下內(nèi)容：

import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from "@angular/core";

import { Item } from "./CheckableItem";

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "item-list",
    template: `
    
    
    Loading
    `
})
export class ItemList {
    @Input() data: Item[];
    @Input() showLoading: boolean;

    @Output() onItemClicked = new EventEmitter();

    clickItem(e: Item, i: number) {
        this.onItemClicked.emit({
            item: e,
            index: i
        });
    }
}

一切都結(jié)束了，效果仍然沒(méi)有變，還是很屌的樣子!!!!

下回預(yù)告：使用Routing