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 ...
随机推荐
- alt-opt and end2end
关于两种训练方式的不同,论文中一种是4阶段训练,这种容易理解,还有一种是近似联合训练, 参考:http://jacobkong.github.io/posts/3802700508/ 关于两种训练方式 ...
- java多线程快速入门（五）
常用线程api方法 多线程运行状态 1.新建状态 用new创建一个线程 2.就绪状态 当调用线程的start()方法 3.运行状态 当线程获得cpu,开始执行run方法 4.阻塞状态 线程通过调用sl ...
- LeetCode（38）： 报数
Easy! 题目描述: 报数序列是指一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 &qu ...
- Java入门第一章知识点总结
-d是directory 目录的意思 cls:清楚doc里面的内容 ipconfig:显示网络配置信息 java -version:检查安装的jdk版本信息 是类型自动向上转换. 在输出时,根据当前 ...
- DOM事件监听器
DOM事件监听器,允许一个事件触发多个方法.在实际工作中应用比较多. 它的调用形式如下: <body> <div> DOM事件监听器,允许一个事件触发多个方法. </di ...
- gitlab的docker安装,非标准端口，如何处理？
这个问题的定义是: 如果我们不是用的80端口对外提供服务, 但gitlab的docker容器里的nginx却是80端口, 那么,在我们clone代码时,带的Http地址也会是80端口,这显然会出现问题 ...
- 如何获取JMX监控WebSphere所需的com.ibm.ws.admin.client_8.5.0等jar包
https://blog.csdn.net/weixin_38645718/article/details/83346007
- day17--JQuery实例
1.表格选择框--全选,反选,取消 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Docker 记一次容器内部修改宿主机挂载目录用户权限后宿主机目录变化
一.需求: 因公司需求,需制作mysql5.7.22 docker基础镜像,每个项目以此镜像启动一个数据库容器,并且每个项目挂载一个宿主机目录到镜像中数据存储下面用于数据持久化保存以便后期迁移至阿里云 ...
- request中获取post的json对象数据content-type=“text/plain”
其实采用http://www.cnblogs.com/SimonHu1993/p/7295750.html中的方法一都能获取到,就是通过获取request中的流数据,拿到json数据,理论上应该适用各 ...