三种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代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
phpmyadmin的#1251问题
2006/11/25 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery操作css样式
2017/05/15 jQuery
基于js 本地存储(详解)
2017/08/16 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python 读取数据库并绘图的实例
2019/12/03 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
大学生活感想
2015/08/10 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript