1. 程式人生 > >Angular學習(三)

Angular學習(三)

分享 cto post請求 ext com ade [] png align

Angular服務

1.創建服務:

ng g service services/storage

技術分享圖片

2.註入服務

在根目錄的app.module.ts裏引入服務。並且在providers:[]裏寫入服務模塊

技術分享圖片

技術分享圖片

在要用這個服務的ts文件裏引入服務

技術分享圖片

在constructor構造函數裏實例化服務

技術分享圖片

使用this.storage訪問服務

技術分享圖片

Http請求

3.註冊Http Jsonp 服務

在根目錄的app.module.ts裏註入模塊:HttpModule JsonpModule

技術分享圖片

在imports 裏寫入模塊

技術分享圖片

3.1在其他模塊裏使用http 和 jsonp 模塊

要在模塊的頂部import http jsonp 模塊

技術分享圖片

並且在構造函數裏實例化模塊

技術分享圖片

3.2 http請求數據,註意this的指向

技術分享圖片

Jsonp 請求數據

需要在接口的末尾添加回調函數

技術分享圖片

請求數據要改成jsonp

技術分享圖片

Post請求數據

首先要在使用post的模塊裏註入Headers 模塊

技術分享圖片

並且實例化Headers

技術分享圖片

請求的參數

  1, 接口地址

  2, 要提交的數據

  3, 請求頭設置

  技術分享圖片

4.使用Rxjs請求數據

在使用rxjs的模塊裏銀註入Observable ,並且引入Rx

技術分享圖片

在頁面上使用一個 .map方法,其他的都跟http請求一樣

技術分享圖片

Angular學習(三)