首頁(yè) 猿問(wèn) 如何通過(guò)AngularJs從后臺(tái)取數(shù)據(jù)

如何通過(guò)AngularJs從后臺(tái)取數(shù)據(jù)

AngularJS

qq_笑_17 2019-03-20 14:13:44

查看完整描述

4 回答

慕姐4208626

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

1、插件源碼主要基于angular directive來(lái)實(shí)現(xiàn)。 2、調(diào)用時(shí)關(guān)鍵地方是后臺(tái)請(qǐng)求處理函數(shù)，也就是從后臺(tái)取數(shù)據(jù)。 3、插件有兩個(gè)關(guān)鍵參數(shù)currentPage、itemsPerPage，當(dāng)前頁(yè)碼和每頁(yè)的記錄數(shù)。 4、實(shí)現(xiàn)方法調(diào)用后我們需要根據(jù)每次點(diǎn)擊分頁(yè)插件頁(yè)碼時(shí)重新提交后臺(tái)來(lái)獲取相應(yīng)頁(yè)碼數(shù)據(jù)。在調(diào)用的頁(yè)碼中我使用了$watch來(lái)監(jiān)控。我初次使用時(shí)是把調(diào)用函數(shù)放在了插件的onchange中，結(jié)果發(fā)現(xiàn)每次都會(huì)觸發(fā)兩次后臺(tái)。這個(gè)地方需要注意。 5、我把請(qǐng)求后臺(tái)封裝成了Service層，然后在Controller里調(diào)用，也符合MVC思想。

反對(duì) 回復(fù) 2019-03-24

喵喔喔

TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊

為了實(shí)現(xiàn)這一點(diǎn)，Angular提供了一個(gè)叫做$http的服務(wù)。它提供了一個(gè)可擴(kuò)展的抽象方法列表，使得與服務(wù)器的交互更加容易。它支持HTTP、JSONP和CORS方式。它還包含了安全性支持，避免JSON格式的脆弱性和XSRF。它讓你可以輕松地轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)，甚至還實(shí)現(xiàn)了簡(jiǎn)單的緩存。
例如，我們打算讓購(gòu)物站點(diǎn)從服務(wù)器上獲取商品信息，而不是從內(nèi)存假數(shù)據(jù)獲取。如何編寫(xiě)服務(wù)端代碼已經(jīng)超越了本書(shū)的范疇，所以，我們僅僅來(lái)想象一下，比方說(shuō)我們已經(jīng)創(chuàng)建了一個(gè)服務(wù)器，當(dāng)查詢(xún)/products 路徑時(shí)，它會(huì)以JSON格式返回一個(gè)商品列表。
返回的響應(yīng)示例如下：
[

{

"id": 0,

"title": "Paint pots",

"description": "Pots full of paint",

"price": 3.95

},

{

"id": 1,

"title": "Polka dots",

"description": "Dots with that polka groove",

"price": 12.95

},

{

"id": 2,

"title": "Pebbles",

"description": "Just little rocks, really",

"price": 6.95

}

...etc...

]

我們可以像下面這樣編寫(xiě)查詢(xún)代碼：
function ShoppingController($scope, $http) {

$http.get('/products').success(function(data, status, headers, config) {

$scope.items = data;

});

}
然后在模板中這樣使用它：

<body ng-controller="ShoppingController">

<h1>Shop!</h1>

<table>

<tr ng-repeat="item in items">

<td>{{item.title}}</td>

<td>{{item.description}}</td>

<td>{{item.price | currency}}</td>

</tr>

</table>

</div>

</body>

正如我們前面講過(guò)的，從長(zhǎng)遠(yuǎn)來(lái)看，讓服務(wù)來(lái)代理與服務(wù)器交互的工作對(duì)我們有好處，這個(gè)服務(wù)可以被多個(gè)控制器共享。

反對(duì) 回復(fù) 2019-03-24

臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

可以參考下面這個(gè)例子：
寫(xiě)個(gè)xxx.service.ts文件
@Injectable()
export class xxxService {
getOO(){
let url = '';
let params = new URLSearchParams();
params.set('id', 值) //值是字符串類(lèi)型
return this.http.get(url, params) //需要引入http
}
}
然后再component里面需要在construct里面注入
constructor(private ooSer:ooService ) {}
之后就可以調(diào)用了
ngOnInit(){
this.ooSer.getOO();
}