快捷導(dǎo)航

AngularJS數(shù)據(jù)源的多種獲取方式匯總

更新時(shí)間：2016年02月02日 09:07:37 作者：Darren Ji

在AngularJS中獲取數(shù)據(jù)源的方式有很多種，本文給大家整理幾種獲取數(shù)據(jù)源的方式，對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

AngularJS 簡(jiǎn)介

AngularJS 是由 Google 發(fā)起的一款開(kāi)源的前端 MVC 腳本框架，既適合做普通 WEB 應(yīng)用也可以做 SPA（單頁(yè)面應(yīng)用，所有的用戶(hù)操作都在一個(gè)頁(yè)面中完成）。與同為 MVC 框架的 Dojo 的定位不同，AngularJS 在功能上更加輕量，而相比于 jQuery，AngularJS 又幫您省去了許多機(jī)械的綁定工作。在一些對(duì)開(kāi)發(fā)速度要求高，功能模塊不需要太豐富的非企業(yè)級(jí) WEB 應(yīng)用上，AngularJS 是一個(gè)非常好的選擇。AngularJS 最為復(fù)雜同時(shí)也是最強(qiáng)大的部分就是它的數(shù)據(jù)綁定機(jī)制，這個(gè)機(jī)制幫助我們能更好的將注意力集中在數(shù)據(jù)的模型建立和傳遞上，而不是對(duì)底層的 DOM 進(jìn)行低級(jí)的操作。

在AngularJS中，可以從$rootScope中獲取數(shù)據(jù)源，也可以把獲取數(shù)據(jù)的邏輯封裝在service中，然后注入到app.run函數(shù)中，或者注入到controller中。本篇就來(lái)整理獲取數(shù)據(jù)的幾種方式。

■ 數(shù)據(jù)源放在$rootScope中

var app = angular.module("app",[]);
app.run(function($rootScope){
$rootScope.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
<div ng-repeat="todo in todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>

以上，把數(shù)據(jù)源放在$rootScope中的某個(gè)字段中，很容易被重寫(xiě)。

■ 數(shù)據(jù)源放在service中,把servie注入到run函數(shù)中

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
app.run(function($rootScope, TodoService){
$rootScope.TodoService = TodoService;
}) 
<div ng-repeat="todo in TodoService.todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""TodoService.todos.push({item:newTodo, done:false}) />
</form>

在html中似乎這樣寫(xiě)比較好：

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

在service中增加一個(gè)方法：

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})

■ 數(shù)據(jù)源放在service中,把servie注入到controller中

app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})

在對(duì)應(yīng)的html中：

<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">
<div ng-repeat="todo in todoCtrl.TodoService.todos">
{{todo.item}}
</div>
</body>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>

■ 數(shù)據(jù)源放在service中,把servie注入到controller中，與服務(wù)端交互

在實(shí)際項(xiàng)目中，service還需要和服務(wù)端交互。

var app = angular.module("app",[]);
app.service("TodoService", function($q, $timeout){
this.getTodos = function(){
var d = $q.defer();
//模擬一個(gè)請(qǐng)求
$timeout(function(){
d.resolve([
{item:"", done:false},
...
])
},3000);
return d.promise;
}
this.addTodo = function(item){
this.todos.push({item:item, done:false});
}
})
app.controller("TodoCtrl", function(TodoService){
var todoCtrl = this;
TodoService.getTodos().then(function(result){
todoCtrl.todos = result;
})
todoCtrl.addTodo = TodoService.addTodo;
})

以上所述是小編給大家分享的AngularJS數(shù)據(jù)源的多種獲取方式匯總，希望對(duì)大家有所幫助。

您可能感興趣的文章: