三种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 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript定时器完整实例
Feb 10 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP中“=&gt;
2019/03/01 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python类成员继承重写的实现
2020/09/16 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
学雷锋演讲稿
2014/03/04 职场文书
出国留学担保书
2014/05/20 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年社区工作总结
2015/04/08 职场文书
教师节联欢会主持词
2015/07/04 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python