三种AngularJS中获取数据源的方式


Posted in Javascript onFebruary 02, 2016

在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中获取数据源的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
js实现消息滚动效果
Jan 18 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python实现TF-IDF算法解析
2018/01/02 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python对象的属性访问过程详解
2020/03/05 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
购房意向书范本
2014/04/01 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
初中思想品德教学反思
2016/02/24 职场文书
经销商会议开幕词
2016/03/04 职场文书