三种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获取网页中的js、css、Flash等文件
Dec 20 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js导出txt示例代码
Jan 14 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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实现框架(一)
2006/10/09 PHP
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP微信红包API接口
2015/12/05 PHP
php session的锁和并发
2016/01/22 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
js 提交和设置表单的值
2008/12/19 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python读写json文件的简单实现
2017/04/11 Python
python实现简单flappy bird
2018/12/24 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
使用python模拟高斯分布例子
2019/12/09 Python
tensorboard显示空白的解决
2020/02/15 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
软件配置管理有什么好处
2015/04/15 面试题
我的老师教学反思
2014/05/01 职场文书
创新社会管理心得体会
2014/09/12 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏