三种AngularJS中获取数据源的方式

前端之家收集整理的这篇文章主要介绍了三种AngularJS中获取数据源的方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中。本篇就来整理获取数据的几种方式。

■ 数据源放在$rootScope中

app.run(function($rootScope){
$rootScope.todos = [
{item:"",done:true},{item:"",done:false}
];
})

<div ng-repeat="todo in todos">
{{todo.item}}

以上,把数据源放在$rootScope中的某个字段中,很容易被重写。

■ 数据源放在service中,把servie注入到run函数

})

app.run(function($rootScope,TodoService){
$rootScope.TodoService = TodoService;
})

<div ng-repeat="todo in TodoService.todos">
{{todo.item}}

在html中似乎这样写比较好:

在service中增加一个方法

this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo,done:false})
}

})

■ 数据源放在service中,把servie注入到controller中

在对应的html中:

■ 数据源放在service中,把servie注入到controller中,与服务端交互

在实际项目中,service还需要和服务端交互。

app.service("TodoService",function($q,$timeout){
this.getTodos = function(){
var d = $q.defer();

//模拟一个请求
$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中获取数据源的方法,希望对大家的学习有所帮助。

猜你在找的JavaScript相关文章