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中获取数据源的几种方式的更多相关文章
- android中获取打气筒的几种方式
1,简单说明,打气筒就是将我们的xml布局转换为我们的view对象,不扯远了,直接看代码 A:从context中获取 LayoutInflater inflater1 = LayoutInflater ...
- Spring在代码中获取bean的几种方式
方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类ApplicationObj ...
- Spring在代码中获取bean的几种方式（转：http://www.dexcoder.com/selfly/article/326）
方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类ApplicationObj ...
- Spring在代码中获取bean的几种方式（转）
获取spring中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象 ApplicationContext ac = new FileSystemXmlApplica ...
- 001-Spring在代码中获取bean的几种方式
一.概述 方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类Applicati ...
- jquery中获取元素的几种方式小结
1 从集合中通过指定的序号获取元素 html: 复制代码代码如下: <div> <p>0</p> <p>1</p> <p>2&l ...
- java中获取路径的几种方式
总是忘记, 备份一下,方便下次用. 第一种: File directory = new File("");//参数为空 String courseFile = directory. ...
- android 自定义控件中获取属性的三种方式(转)
第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 <com.example.activity.Ico ...
- Spring中配置数据源的四种方式
1.spring自带的数据源 <bean id="dataSource" class="org.springframework.jdbc.datasource.Dr ...
随机推荐
- IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结
首先,使用的时候,自己得先在电脑上安装个小乌龟.也就是svn啦. 第一步安装小乌龟. 如下: 具体安装好像没什么具体要求,一路next,就好. 如上图箭头所示,在安装 TortoiseSVN 的时候, ...
- python之__dict__与dir(转载）
Python下一切皆对象,每个对象都有多个属性(attribute),Python对属性有一套统一的管理方案. __dict__与dir()的区别: dir()是一个函数,返回的是list: __di ...
- SeaJS入门教程系列之使用SeaJS（二）
SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...
- pytest一：pytest 框架介绍
pytest 是 python 的一种单元测试框架,与python 自带的 unittest测试框架类似,但是比 unittest 框架使用起来更简洁,效率更高.根据pytest 的官方网站介绍,它具 ...
- 《转》 java.lang.OutOfMemoryError - 关于java的内存溢出
java.lang.OutOfMemoryError: PermGen space PermGen space的全称是Permanent Generation space 是指内存的永久保存区域, 该 ...
- Maven多模块项目
1.项目结构-父项目 其中parent是父项目,这个父项目的父项目是springboot,我搭建这个多模块的项目的目的主要是为了研究学习springbatch 父项目的pom文件内容: <pro ...
- BZOJ3514 Codechef MARCH14 GERALD07加强版 LCT
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3514 题意概括 N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. N ...
- Evolution ZOJ2853
矩阵太大导致爆栈 解决方法:矩阵不要开在main函数里面 全部在外面处理 main函数只能处理简单的赋值和加减 损失的要自减!! 最后为 sum+=t[i]*ans.m[i][n-1]; 得 ...
- 075 importSTV的使用，与bulkload的使用
一:由HDFS将数据直接导入到HBase中 1.生成TSV文件 2.内容 3.上传到HDFS 4.运行 export HBASE_HOME=/etc/opt/modules/hbase-0.98.6- ...
- xpath-helper: 谷歌浏览器安装xpath helper 插件
1.下载文件xpath-helper.crx xpath链接:https://pan.baidu.com/s/1dFgzBSd 密码:zwvb,感谢这位网友,我从这拿到了 2.在Google浏览器里边 ...