三种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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
星际争霸中的热键
2020/03/04 星际争霸
提升PHP执行速度全攻略(下)
2006/10/09 PHP
无限级别菜单的实现
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
图解js图片轮播效果
2015/12/20 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
自我鉴定思想方面
2013/10/07 职场文书
社区工作者感言
2014/03/02 职场文书
班级学习计划书
2014/04/27 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
运输公司工作总结
2015/08/11 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript