Angular2快速入門-5.使用http(新聞數據來自http請求)

来源:http://www.cnblogs.com/clc2008/archive/2017/12/01/7943449.html
-Advertisement-
Play Games

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 中,

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、一行超出文字隱藏 2、div顯示兩行文字,超出兩行部分省略號顯示 3、white-space屬性可設置不換行 4、word-break屬性設置自動換行的處理方法 ...
  • 詳述JavaScript的官方模塊風格。加入這一定義旨在代替過去幾年中出現過的許多非正式的模塊定義風格。 ...
  • 介紹正式加入 JavaScript 的反射 API 和新的代理對象,開發者可以通過代理對象攔截每一個對象中執行的操作,代理也賦予了開發者空前的對象控制權,同樣也為定義新的交互模式帶來無限可能。 ...
  • CodePen 需要使用色 ec6337(當然可以是任意顏色),解決問題:記住密碼定製 CheckBox,解釋全在註釋里 主要使用到 ::before 或 ::after 偽類處理,偽裝成內部的那個勾 html CSS(LESS) CodePen ...
  • 很多人對正則表達式的印象都是用來做表單驗證的,這其實是不大準確的。正則表達式目前在很多軟體中都得到了廣泛的應用,包括Linux,Unix等操作系統,VBScript,Java,PHP等開發環境中,以及很多應用軟體都能應用到正則表達式。 ...
  • cu主題是由瘋狂的大叔設計,界面簡潔大方是它最大的特點之一。 手殘君也比較喜愛這款主題,在使用的過程中,根據手殘君的個人習慣,對其進行了優化。 標題居中顯示 增加標題div背景色 標題div平滑優化 相關代碼: tags頁面增加標簽彙總(隨著標簽越來越多,原有的tags頁面滿足不了數據索引的需求) ...
  • 公司突然組織需要重新搭建一個基於 的論壇系統,前端採用 ,上網找了一些腳手架,或多或少不能滿足自己的需求,最終在基於 的`react`腳手架 "generator react webpack" 上搭建改造,這裡作為記錄。 代碼在這裡: "github" 另外推薦地址: "react starter ...
  • 圖片隱寫術就是利用圖片來隱藏某些數據,讓人一眼看去以為是很普通很正常的圖片,但其實裡面隱藏著某些“機密”數據。我們可以用它來保護某些機密圖片或者隱藏特殊的文字信息。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...