三种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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
python实现多层感知器
2019/01/18 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python实现的分层随机抽样案例
2020/02/25 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
大学毕业生工作的自我评价
2013/10/01 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
青年文明号复核材料
2014/02/11 职场文书
运动会稿件300字
2014/02/14 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
泰山导游词
2015/02/02 职场文书