本文講述如何使用angular2的http服務來去一臺由SpringMVC釋出的rest服務的伺服器上拉取資料。

我們現來上服務端程式碼,

 @ResponseBody
    @RequestMapping("/hero")
    public Object getData(HttpServletResponse response) {

        //伺服器端跨域的配置
        response.setHeader("Access-Control-Allow-Origin","*");
        logger.warn("得到呼叫.....");
        System.out.println(new Hero().getName() );
        Hero hero = new Hero();
        hero.setName("張三李強");
        return  hero;
    }
 

javascript請求的網路地址只要協議、域名、埠有任何一個不同，都被當作是不同的域。

打一個比方 http://www.test.com/ 和

http://www.test.com:8080就是不同的域

伺服器端的rest服務就講到這裡。

現在來講客戶端的實現。

angular2採用的程式語言是typescript。

類似於其他的MVVM框架。angular2同樣的進行了元件化。

這裡筆者寫了三個檔案

student.component.ts  //元件檔案

student,service.ts   //服務檔案

student.ts   //實體檔案

元件程式碼呼叫服務程式碼,服務的程式碼發起http請求從rest伺服器上拉取資料

這裡筆者直接上程式碼了,程式碼的註釋都已經很詳細了。足以說明問題

student.component.ts 

import {Component, OnInit} from "@angular/core";
import {StudentService} from "./student.service";
import {Student} from "./student";
@Component({
  moduleId: module.id,
  selector: 'student',
  template: `{{title}}`,
  providers: [StudentService],
})
//實現了OnInit介面以便於載入完元件就進行從伺服器端抓取資料
export class StudentComponent implements OnInit {
  title = '這是學生元件用於演示ng2從springmvc伺服器端拉取資料';
  students: Student[];
  //注入StudentService服務
  constructor(private studentService: StudentService) {
  }
  //元件被載入立即去rest伺服器上拉取資料
  ngOnInit(): void {
    this.getStudent();
  }

  getStudent() {
    this.studentService.getStudent().then(students => console.log()
      , error => console.log(error));
  }


}
 

student,service.ts

import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
import {Student} from "./student";

@Injectable()
export class StudentService {
  //從指定的地址拉取資料
  private url = 'http://localhost:8080/hero';

  constructor(private http: Http) {
  }

  getStudent(): Promise<Student[]> {
    return this.http.get(this.url).toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    //將拿到的hero資料進行列印....
    console.log("即將開始對Student資料的列印-----");
    console.log(body['name']);
    console.log("結束對Student資料的列印-----");

    return body;
  }
  private handleError (error: Response | any) {
    console.log("有錯誤???");
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Promise.reject(errMsg);
  }
}

student.ts  

//自己封裝的實體
export class Student {
  constructor(public id: number, public name: string) {
  }
}

程式碼在myNg2_http_demo這個分支上,程式碼在app/student資料夾下。

至於伺服器端只需要在springMVC的controller類中加入一個被@RequestMapping註解修改的方法即可,直接返回pojo物件就可以了。