三种AngularJS中获取数据源的方式

在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中获取数据源的方法，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 使用AngularJS制作一个简单的RSS阅读器的教程

    使用AngularJS制作一个简单的RSS阅读器的教程

    简介 几年前,我用C#写了一个RSS阅读器,但是我想如果把它做成一个SPA(单页应用)效果会更好. Angular使一些事情变得简单,RSS阅读器就是其中之一. 我也用Twitter Bootstrap(做UI)实现了RSS阅读器,调试页面样式是最难的地方之一...可能是因为我不擅长css的原因. 背景 我有一些自己喜欢的网站( CodeProject, Dr.Dobb's Journal, ComputerWorld, Inc. Magazine). 然而,我发现其中很多网站都有烦人的广告.风

  • angularjs学习笔记之双向数据绑定

    这次我们来详细讲解angular的双向数据绑定. 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实现了数据双向绑定. 二.取值表达式与ng-bind的使用 我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现"{{greeting.text}} {{text

  • 使用AngularJS 跨站请求如何解决jsonp请求问题

    使用AngularJS 跨站请求如何解决jsonp请求问题

    今天写东西的时候遇到了 一种情况 ,因为用的不是自己公司人员写的接口 ,而我要写的东西是抓别的网页上的接口 所以出现了 一下这种情况 用 get请求出现拦截跨站请求资源  以下是解决办法, 这是我的请求: 我在浏览器模板赋值的时候发现赋值没有成功, 在浏览器控制台打印出来的如下: 大概的意思是没有请求头,然后在网上看了一些, 楼主英语不好 我也解释不清楚 ,所以读客有时候不要较真!!! 毕竟能解决问题就是可以的. 解决这个bug的办法  , url 后面要拼接要加上 callback=JSON_

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • AngularJS实现数据列表的增加、删除和上移下移等功能实例

    AngularJS实现数据列表的增加、删除和上移下移等功能实例

    效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0; list-style:

  • AngularJS中的JSONP实例解析

    AngularJS中的JSONP实例解析

    概念 首先呢,Json和JSONP是不一样的哦.Json呢,是众多数据存储的其中一种格式,是数据书写方式的其中一种.好比是大中华众多诗体的一种(比如说是七言诗吧).这种诗体规定了: 这种诗体要包含题目,每行诗句的字数(7个字) 等等的文本格式.而Json所规定的文本格式是这样子的 (Json格式示意图)   而JSONP呢,它是一种特殊的通讯方式,使用它能够轻松绕过浏览器的同源安全限制,达到加载来自不同源的资源(脚本, 图片, 其他)的效果.比如说,您是一个王国的王子,你意外地喜欢上了附近一个小

  • AngularJS读取JSON及XML文件的方法示例

    本文实例讲述了AngularJS读取JSON及XML文件的方法.分享给大家供大家参考,具体如下: <!doctype html> <meta charset="UTF-8"> <html ng-app='routingDemoApp'> <head> <title>AJAX and promise</title> <link href="bootstrap.min.css" rel=&qu

  • AngularJS入门教程之Cookies读写操作示例

    AngularJS入门教程之Cookies读写操作示例

    本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><

  • AngularJS入门教程之 XMLHttpRequest实例讲解

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/angularjs/data/Customers_JSON.php { "records": [ { "Name" : "Alfreds Futterkiste", "City"

  • Angularjs实现多个页面共享数据的方式

    废话不多说了,直接看干货吧. 使用service来共享数据 定义一个共享服务的service //家电维修共享数据的服务 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //缓存当前需要维修的设备名称.数量.唯一标识 deviceRepairObj : [], //小区位置 xiquLocation:

  • angularJS 如何读写缓冲的方法(推荐)

    angularJS 如何读写缓冲的方法(推荐)

    写在前面 1.在客户端.服务端架构中,HTTP协议是主流通信技术: 2.HTTP协议的无状态特性,节省带宽,较少服务器的负载,缓冲技术具有重要的运用:这里主要讲解在客户端浏览器中angular如何读写缓存... 如何实现 1.angular提供了ngCookies模块来实现读写缓存的操作,基于angular的注入该服务就能很容易的操作缓存了,但是本人推荐你使用该方法实现(重构了angular-cookie) /** * Description : 缓冲服务 * Author :maikec *

  • Angularjs根据json文件动态生成路由状态的实现方法

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui-router.js两个js文件,如下例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <script

随机推荐