三种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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
解决pycharm双击但是无法打开的情况
Oct 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
二招解决php乱码问题
2012/03/25 PHP
php通过session防url攻击方法
2014/12/10 PHP
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue打包后显示空白正确处理方法
2017/11/01 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python sys.argv用法实例
2015/05/28 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
《苏珊的帽子》教学反思
2014/04/07 职场文书
产品设计开发计划书
2014/05/07 职场文书
作风建设演讲稿
2014/05/23 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
房产公证书格式
2015/01/26 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
Python实现天气查询软件
2021/06/07 Python
yolov5返回坐标的方法实例
2022/03/17 Python