三种AngularJS中获取数据源的方式
在AngularJS中，可以从$rootScope中获取数据源，也可以把获取数据的逻辑封装在service中，然后注入到app.run函数中，或者注入到controller中。本篇就来整理获取数据的几种方式。
■数据源放在$rootScope中
varapp=angular.module("app",[]);
app.run(function($rootScope){
$rootScope.todos=[
{item:"",done:true},
{item:"",done:false}
];
})
<divng-repeat="todointodos">
{{todo.item}}
</div>
<form>
<inputtype="text"ng-model="newTodo"/>
<inputtype="submit"ng-click=""todos.push({item:newTodo,done:false})/>
</form>
以上，把数据源放在$rootScope中的某个字段中，很容易被重写。
■数据源放在service中,把servie注入到run函数中
app.service("TodoService",function(){
this.todos=[
{item:"",done:true},
{item:"",done:false}
];
})
app.run(function($rootScope,TodoService){
$rootScope.TodoService=TodoService;
})
<divng-repeat="todoinTodoService.todos">
{{todo.item}}
</div>
<form>
<inputtype="text"ng-model="newTodo"/>
<inputtype="submit"ng-click=""TodoService.todos.push({item:newTodo,done:false})/>
</form>
在html中似乎这样写比较好：
<inputtype="submit"ng-click=""TodoService.todos.addodo(newTodo)/>
在service中增加一个方法：
app.service("TodoService",function(){
this.todos=[
{item:"",done:true},
{item:"",done:false}
];
this.addTodo=fucntion(newTodo){
this.todos.push({item:newTodo,done:false})
}
})
■数据源放在service中,把servie注入到controller中
app.controller("TodoCtrl",function($scope,TodoService){
this.TodoService=TodoServce;
})
在对应的html中：
<bodyng-app="app"ng-controller="TodoCtrlastodoCtrl">
<divng-repeat="todointodoCtrl.TodoService.todos">
{{todo.item}}
</div>
</body>
<form>
<inputtype="text"ng-model="newTodo"/>
<inputtype="submit"ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>
■数据源放在service中,把servie注入到controller中，与服务端交互
在实际项目中，service还需要和服务端交互。
varapp=angular.module("app",[]);
app.service("TodoService",function($q,$timeout){
this.getTodos=function(){
vard=$q.defer();
//模拟一个请求
$timeout(function(){
d.resolve([
{item:"",done:false},
...
])
},3000);
returnd.promise;
}
this.addTodo=function(item){
this.todos.push({item:item,done:false});
}
})
app.controller("TodoCtrl",function(TodoService){
vartodoCtrl=this;
TodoService.getTodos().then(function(result){
todoCtrl.todos=result;
})
todoCtrl.addTodo=TodoService.addTodo;
})
以上就是AngularJS中获取数据源的方法，希望对大家的学习有所帮助。