三种AngularJS中获取数据源的方式
更新时间：2016年02月02日 08:58:53 作者：Darren Ji
这篇文章主要介绍了三种AngularJS中获取数据源的方式,需要的朋友可以参考下
在AngularJS中，可以从$rootScope中获取数据源，也可以把获取数据的逻辑封装在service中，然后注入到app.run函数中，或者注入到controller中。本篇就来整理获取数据的几种方式。
■ 数据源放在$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>
以上，把数据源放在$rootScope中的某个字段中，很容易被重写。
■ 数据源放在service中,把servie注入到run函数中
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中似乎这样写比较好：
<input type="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中：
<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>
■ 数据源放在service中,把servie注入到controller中，与服务端交互
在实际项目中，service还需要和服务端交互。
var app = angular.module("app",[]);
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中获取数据源的方法，希望对大家的学习有所帮助。
相关文章
本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码，非常的简单实用，有需要的小伙伴可以参考下。2016-01-01
随着javaEE的spring框架的兴起，依赖注入（IoC）的概念彻底深入人心，它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。2016-10-10
本篇文章主要介绍了angular2中angular-cli修改端口号的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
大家在使用angularjs的时候，很容易忽略AngularJS自带指令的作用域问题，有一些指令会产生独立的自己作用域，造成子级无法与父级作用域双向绑定的问题。下面我们来看看这些问题，有需要的可以参考借鉴。2016-09-09
本篇文章主要介绍了angular中实现控制器之间传递参数的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
这篇文章主要介绍了AngularJS基础知识,包括AngularJS定义和特点以及构建AngularJS应用的方法，推荐给大家。2014-12-12
解决angularjs WdatePicker ng-model的问题
今天小编就为大家分享一篇解决angularjs WdatePicker ng-model的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
Angular Universal服务器端渲染避免 window is not&
这篇文章主要介绍了Angular Universal服务器端渲染避免 window is not defined错误消息，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以参考下2015-06-06
最新评论