AngularJS数据源的多种获取方式汇总
AngularJS简介
AngularJS是由Google发起的一款开源的前端MVC脚本框架，既适合做普通WEB应用也可以做SPA（单页面应用，所有的用户操作都在一个页面中完成）。与同为MVC框架的Dojo的定位不同，AngularJS在功能上更加轻量，而相比于jQuery，AngularJS又帮您省去了许多机械的绑定工作。在一些对开发速度要求高，功能模块不需要太丰富的非企业级WEB应用上，AngularJS是一个非常好的选择。AngularJS最为复杂同时也是最强大的部分就是它的数据绑定机制，这个机制帮助我们能更好的将注意力集中在数据的模型建立和传递上，而不是对底层的DOM进行低级的操作。
在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数据源的多种获取方式汇总，希望对大家有所帮助。