Angular4記賬webApp練手項(xiàng)目之一（利用angular-cli構(gòu)建Angular4.X項(xiàng)目）
Angular4記賬webApp練手項(xiàng)目之二（在angular4項(xiàng)目中使用Angular WeUI）
Angular4記賬webApp練手項(xiàng)目之三（在angular4項(xiàng)目中使用路由router）
Angular4記賬webApp練手項(xiàng)目之四（在Angular4項(xiàng)目中用echarts繪制圖表）
Angular4記賬webApp練手項(xiàng)目之五（Angular4項(xiàng)目中創(chuàng)建service（服務(wù)）和使用http模塊）
前臺(tái)源碼

后臺(tái)源碼
說(shuō)明：后臺(tái)代碼是用asp.net編寫(xiě)的，和http://www.itdecent.cn/p/e6ed43227840這篇文章很像。其中還包含了其他一些練手的東西。

前言

之前寫(xiě)了那么多，不過(guò)都是靜態(tài)頁(yè)面?，F(xiàn)在使用http模塊與后端通信，變可以讓我們的應(yīng)用活起來(lái)。
我把后臺(tái)服務(wù)寫(xiě)成了可跨域請(qǐng)求的webapi，這樣在node上面調(diào)試起來(lái)就方便多了。

創(chuàng)建服務(wù)模塊

ng g service account

ng給我們創(chuàng)建的模塊account.service.ts，內(nèi)容如下。
有關(guān)@Injectable和@Component，都是angular中的關(guān)鍵字或者關(guān)鍵注解。通過(guò)注解來(lái)表明js文件的類型，以方便angular框架進(jìn)行調(diào)用。
@Component表示該js文件所導(dǎo)出的類是組件。
@Injectable表示該js文件所導(dǎo)出的文件是服務(wù)，而服務(wù)是可以通過(guò)注入來(lái)創(chuàng)建的。
服務(wù)的注入，是angular中用來(lái)剝離controller和業(yè)務(wù)邏輯的方式。

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

@Injectable()
export class AccountService {

  constructor() { }

}

添加一個(gè)方法

  getBillTypes() {
    console.log('這是service里的方法');
  }

引用服務(wù)

在accounting.component.ts里引用

import {AccountService} from '../account.service';

@NgModule({
  providers: [
    AccountService
  ],
})

推薦使用依賴注入的方式

  constructor(private service: AccountService) {
      service.getBillTypes(); // 調(diào)用方法
  }

查看下效果，提示錯(cuò)誤。

Unhandled Promise rejection: No provider for AccountService! ; Zone: angular ; Task: Promise.then ; Value:

原來(lái)是在app.module.ts 里面也要添加引用

import {AccountService} from './account.service';

  providers: [AccountService],

這下就完成了簡(jiǎn)單了例子。ng的編程風(fēng)格越來(lái)越像我們使用的c#，java等的編程風(fēng)格。當(dāng)然編程思想也是越來(lái)越和我們后臺(tái)開(kāi)發(fā)相似了。

這里寫(xiě)圖片描述

整理下我們的后臺(tái)接口

添加一個(gè)Model文件夾，在下面添加一個(gè)model.url.ts文件來(lái)存儲(chǔ)我們的接口信息

const host = 'http://127.0.0.1:8001';

export const Urls= {
  GetBillTypes: host + '/api/bill/getbilltypes', // 獲取記賬類型
  GetBills: host +  '/api/bill/GetBills', // 獲取列表
  GetCount: host +  '/api/bill/GetCount', // 獲取統(tǒng)計(jì)信息
  GetTotallCount: host +  '/api/bill/GetTotallCount', // 獲取求和數(shù)據(jù)
  AddBills: host +  '/api/bill/AddBills', // 添加記賬信息
  DeleteBill: host +  '/api/bill/DeleteBill', // 刪除記賬信息
};

在我們的service中引入

import {Urls} from './Model/model.url';

整理方法

export class AccountService {
  private urls = Urls;
  constructor() { }
  getBillTypes(): void {
    console.log(this.urls.GetBillTypes);
  }
  GetBills(): void {
    console.log(this.urls.GetBills);
  }
  GetCount(): void {
    console.log(this.urls.GetCount);
  }
  GetTotallCount(): void {
    console.log(this.urls.GetTotallCount);
  }
  AddBills(): void {
    console.log(this.urls.AddBills);
  }
  DeleteBill(): void {
    console.log(this.urls.DeleteBill);
  }
}

使用http模塊

在我們的app.module.ts中已經(jīng)引入了

import { HttpModule } from '@angular/http';

我們要在account.service.ts中引入

import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

構(gòu)造函數(shù)中注入依賴

  constructor(private http: Http) { }

修改getBillTypes方法試試，看請(qǐng)求返回?cái)?shù)據(jù)和http.get返回的是什么。

  getBillTypes() {
    console.log(this.urls.GetBillTypes);
    const data = this.http.get(this.urls.GetBillTypes)
      .toPromise()
      .then(response => console.log(response));
    console.log(data);
  }

http.get(url)（或者post put delete），訪問(wèn)服務(wù)器以后會(huì)返回一個(gè)observation對(duì)象，事實(shí)上是observation<服務(wù)器返回值>。通過(guò)toPromise轉(zhuǎn)換成promise對(duì)象以后，就可以正常的使用then方法去處理返回值了。
通過(guò)promise的then方法，可以獲得到服務(wù)器的返回值。個(gè)返回值都是json字符串，而在angular還是先按字符串處理。調(diào)用字符串的.json()方法轉(zhuǎn)化為json數(shù)組或者json對(duì)象，繼續(xù)調(diào)用關(guān)鍵字as將json數(shù)組或者json對(duì)象轉(zhuǎn)化類，轉(zhuǎn)化的方式是屬性對(duì)應(yīng)。

這里寫(xiě)圖片描述

因此我們修改方法，在model文件夾下添加自定義的Result類型，

// 接口返回?cái)?shù)據(jù)格式
export class Result {
  error: any; // 錯(cuò)誤時(shí)返回的信息
  result: any; // 成功時(shí)返回的數(shù)據(jù)
  success: boolean; // 是否成功
}

在account.service.ts中引入并修改方法

import {Result} from './Model/model.result';

  getBillTypes(): Promise<Result> { // 獲取記賬類型
    return this.http.get(this.urls.GetBillTypes)
      .toPromise()
      .then(response =>  response.json() as Result)
      .catch(this.handleError);
  }

在accounting.component.ts中修改調(diào)用的方法

  constructor(private service: AccountService) {
      service.getBillTypes().then(r => { console.log(r); });
  }

這正是我們后臺(tái)返回的數(shù)據(jù)且是json格式的。

這里寫(xiě)圖片描述

這里我們用到了自定義類型Result的作用呢，看控制臺(tái)打印的數(shù)據(jù)，對(duì)數(shù)據(jù)沒(méi)什么影響，但是對(duì)我寫(xiě)代碼是有幫助的?？聪旅妫?/p>

這里寫(xiě)圖片描述

這里寫(xiě)圖片描述

完善service

添加三個(gè)自定義類型

// 記賬類型的數(shù)據(jù)結(jié)構(gòu)
export class BillType {
  name: string;
  fontStyle: string;
  id: number;
}

// 記賬的數(shù)據(jù)結(jié)構(gòu)
export class Bill {
  id: number;
  creationTime: string;
  money: number;
  name: string;
  fontStyle: string;
  BillTypeId: number;
}

要細(xì)分就太多了，大致分成這幾類吧，引入并完善我們的方法

export class AccountService {
  private urls = Urls;
  constructor(private http: Http) { }
  getBillTypes(): Promise<Result> { // 獲取記賬類型
    return this.get(this.urls.GetBillTypes);
  }
  GetBills(date, skipCount, user): Promise<Result> {
    const d = new URLSearchParams();
    d.set('date', date);
    d.set('skipCount', skipCount);
    d.set('user', user);
    return this.get(this.urls.GetBills, d);
  }
  GetCount(date: string, type: number, user: string, GroupBy = 0): Promise<Result> {
    const d = new URLSearchParams();
    d.set('date', date);
    d.set('type', type.toString());
    d.set('user', user);
    d.set('GroupBy', GroupBy.toString());
    return this.get(this.urls.GetCount, d);
  }
  GetTotallCount(user): Promise<Result> {
    return this.get(this.urls.GetTotallCount + '?user=' + user);
  }
  AddBills(data): Promise<Result> {
      return this.post(this.urls.AddBill, data);
  }
  DeleteBill(data: number): Promise<Result>  {
    return this.post(this.urls.DeleteBill, data);
  }
  // 對(duì)get請(qǐng)求進(jìn)行封裝
 private  get(url: string, data: URLSearchParams = null): Promise<Result>  {
    return this.http.get(url, { search: data} )
    .toPromise().then(r => r.json() as Result)
    .catch(this.handleError);
}
  // 對(duì)post請(qǐng)求進(jìn)行封裝
  private  post(url: string, data: any): Promise<Result>  {
    return this.http.post(url, data)
      .toPromise().then(r => r.json() as Result)
      .catch(this.handleError);
  }
  // 捕獲異常并輸出
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

最后完善修結(jié)果如下：

這里寫(xiě)圖片描述