Angular2官網通過http請求模擬API 來請求hero 數據,感覺有點繁瑣,很讓人理解不了,我們不採用它的辦法,直接展示怎麼使用http請求來獲取我們的數據 ,直截了當。 第一、準備工作,創建一個WebApi 創建一個webapi(這裡我使用MVC4 WebApi ,你可以選擇其他途徑提供j ...
Angular2官網通過http請求模擬API 來請求hero 數據,感覺有點繁瑣,很讓人理解不了,我們不採用它的辦法,直接展示怎麼使用http請求來獲取我們的數據 ,直截了當。
第一、準備工作,創建一個WebApi
創建一個webapi(這裡我使用MVC4 WebApi ,你可以選擇其他途徑提供json數據,根據自己需要),返回新聞列表
public class NewsController : ApiController { public IEnumerable<News> Get() { return AllNews; } public News Get(int id) { return AllNews.Where(m => m.id == id).First(); } public List<News> AllNews { get { return new List<News>() { new News(){ id=1,title="title1", click=0, create_date="2017-10-20"}, new News(){ id=2,title="title2", click=0, create_date="2017-10-20"}, new News(){ id=3,title="title3", click=0, create_date="2017-10-20"}, new News(){ id=4,title="title4", click=0, create_date="2017-10-20"}, new News(){ id=5,title="title5", click=0, create_date="2017-10-20"}, new News(){ id=6,title="title6", click=0, create_date="2017-10-20"}, }; } } }
由於我們的ajax請求跨域,需要設置允許跨域請求,可以在web.config中增加以下配置
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> </system.webServer>
第二、修改 NewService.ts 的GetNews 方法,數據來自http get請求
1. 在news.service.ts 中 增加 http模塊導入
import { Http,Response } from '@angular/http'; import 'rxjs/add/operator/toPromise';
增加構造函數,修改getNews 方法
constructor(private http:Http){} getNews() { return this.http.get("http://localhost:63387/api/news/").toPromise() .then(response=>response.json()) .catch((err)=>{ console.log(err); }); }
最終代碼
import { Injectable } from "@angular/core"; import { News } from './news'; import { NewList } from './mock-news';
import { Http,Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; @Injectable() export class NewsService { constructor(private http:Http){} getNews() { return this.http.get("http://localhost:63387/api/news/").toPromise() .then(response=>response.json()) .catch((err)=>{ console.log(err); }); } }
2. 修改app.module.ts ,增加HttpModule 支持
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NewsListComponent } from './news/newslist.component'; import { NewsDetailComponent } from './news/news-detail.component'; import { AppComponent } from './app.component'; import {NewsService} from './news/news.service'; import{ HttpModule} from '@angular/http'; @NgModule({ declarations: [ AppComponent, NewsListComponent, NewsDetailComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
導入 import{ HttpModule} from '@angular/http';
在 imports 中增加HttpModule
第三、測試運行
npm start 可以看到能正常顯示我們的數據了
第四、總結
1. 在需要的Service中,增加導入 Http
import { Http,Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; 2.在 app.module.ts 中引入HttpModule, import{ HttpModule} from '@angular/http'; 同時在@NgModule註解中 把HttpModule增加到 imports 中,