Angular2 http服務

山海發表於2018-07-20
AngularHTTP

angular2的http服務是用於從後臺程式獲取或更新資料的一種機制，通常情況我們需要將與後臺交換資料的模組做出angular服務，利用http獲取更新後臺資料，angular使用http的get或put進行後臺呼叫採用的是ajax方式，跨域問題需要單獨處理。下面來看一個例子，演示從後臺web api中獲取資料並進行頁面載入。

1、由於要使用http服務，所以我們一定要在我們的web頁面需要引入<script src="node_modules/angular2/bundles/http.dev.js"></script>，這步很關鍵，我之前發生的找不到http服務的原因就在此，浪費了很多時間在此。
2、在angular入口還需引入HTTP_PROVIDERS，並注入，同時由於要使用map，subscribe等所以需要使用rxjs庫，那麼就需要提前在入口程式中引入import 'rxjs/Rx'，血的教訓

import {bootstrap} from 'angular2/platform/browser';

import {HTTP_PROVIDERS} from 'angular2/http';

import {myFrame} from "./frame/component/myFrame.component";

import 'rxjs/Rx';

 

bootstrap(myFrame, [ HTTP_PROVIDERS]);

3、建立服務

import {Injectable} from 'angular2/core';

import {Http } from 'angular2/http';

 

@Injectable()

export class channelService {

    private _carsUrl: string = "http://localhost:6611/api/Chanel";

    

constructor(private _http: Http) {

 

        }

getChannelList() {

    

    return this._http.get(this._carsUrl).map(responce => responce.json())

        

        

}

在這個服務中使用了`http`中的`get`來獲取資料，這裡get的`url（web api）`是與我目前的`anuglar`應用在一個域內。作為服務我們需要申明該服務是可注入的`@Injectable()`

4、服務呼叫

import {Component} from 'angular2/core';

 

import {appService} from './../service/appsetting.service'

import {channelService} from './../service/channel.service'

import {Channel} from './../model/channel'

 

@Component({

    selector: 'topNav',

    templateUrl: '../app/frame/template/topNav.html',

    providers: [appService, channelService]

})

export class topNav {

    webTitle: string;

    

    public items: Channel[];

    

   

    constructor(private _appService: appService,private _channelService:channelService) {  

        this.getWebTitle();

        this.getChannelList();

    }

    getWebTitle() {

        this.webTitle = this._appService.AppSetting.webTitle;

    }

    getChannelList() {

         this._channelService.getChannelList().subscribe(res => { this.items=res});

    }

    

 

} 
這裡就和普通服務呼叫沒什麼區別了，需要先import再在providers中申明，然後在建構函式中注入就行了。

這個例子中有個需要注意的是我們前端model和後端model有可能不一致，那麼需要在獲取資料後再進行轉換，如果型別欄位都一致那麼可以直接使用，由於是json格式，系統會自動將後臺model轉換為我們前端使用的model

Web api：

public class ChanelController : ApiController

    {

        // GET api/<controller>

        public IEnumerable<Chanel> Get()

        {

            return new Chanel[] { new Chanel{ ID="1", ChanelName="組織機構"},new Chanel{ ID="2",ChanelName="通知公告"} };

        }

}

注：web api 可以使用Swashbuckle 進行測試，安裝 PM>Install-Package Swashbuckle，使用時只需在路徑後加入swagger，如http://localhost:6611/swagger/ui/index

相關文章