在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中获取数据源的几种方式的更多相关文章

  1. android中获取打气筒的几种方式

    1,简单说明,打气筒就是将我们的xml布局转换为我们的view对象,不扯远了,直接看代码 A:从context中获取 LayoutInflater inflater1 = LayoutInflater ...

  2. Spring在代码中获取bean的几种方式

    方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类ApplicationObj ...

  3. Spring在代码中获取bean的几种方式（转：http://www.dexcoder.com/selfly/article/326）

    方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类ApplicationObj ...

  4. Spring在代码中获取bean的几种方式（转）

    获取spring中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象 ApplicationContext ac = new FileSystemXmlApplica ...

  5. 001-Spring在代码中获取bean的几种方式

    一.概述 方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类Applicati ...

  6. jquery中获取元素的几种方式小结

    1 从集合中通过指定的序号获取元素 html: 复制代码代码如下: <div> <p>0</p> <p>1</p> <p>2&l ...

  7. java中获取路径的几种方式

    总是忘记, 备份一下,方便下次用. 第一种: File directory = new File("");//参数为空 String courseFile = directory. ...

  8. android 自定义控件中获取属性的三种方式(转)

    第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 <com.example.activity.Ico ...

  9. Spring中配置数据源的四种方式

    1.spring自带的数据源 <bean id="dataSource" class="org.springframework.jdbc.datasource.Dr ...

随机推荐

  1. TOMCAT服务器配置域名

    最近做了个网站,用的是web'服务器是tomcat,框架式SpringMVC,功能做好后,就准备上线使用了, 手上已经有域名以及一台服务器,已经绑定好ip了,剩下的也就是配置Tomcat了,比较简单, ...

  2. 关于报错stale element reference: element is not attached to the page document处理

    1.现象 在执行脚本时,有时候引用一些元素对象会抛出如下异常 org.openqa.selenium.StaleElementReferenceException: stale element ref ...

  3. C#面向对象（继承的重载和构造函数）

    构造函数: 继承的重载:

  4. php三种常用的加密解密算法

    方法一: /** * @param $string 要加密/解密的字符串 * @param string $operation 类型,ENCODE 加密:DECODE 解密 * @param stri ...

  5. Fiddler抓包7-post请求（json）

    前言上一篇讲过get请求的参数都在url里,post的请求相对于get请求多了个body部分,本篇就详细讲解下body部分参数的几种形式. 一.body数据类型 常见的post提交数据类型有四种: 1 ...

  6. java select 多字段处理查询结果辅助类

    接口 ResultSetMetaData 可用于获取关于 ResultSet 对象中列的类型和属性信息的对象 使用示例: ResultSet rs = stmt.executeQuery(" ...

  7. 《剑指offer》-找到数组中重复的数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  8. spring 中常用的两种事务配置方式以及事务的传播性、隔离级别

    一.注解式事务 1.注解式事务在平时的开发中使用的挺多,工作的两个公司中看到很多项目使用了这种方式,下面看看具体的配置demo. 2.事务配置实例 (1).spring+mybatis 事务配置 &l ...

  9. Codeforces Round #369 (Div. 2)-D Directed Roads

    题目大意:给你n个点n条边的有向图,你可以任意地反转一条边的方向,也可以一条都不反转,问你有多少种反转的方法 使图中没有环. 思路:我们先把有向边全部变成无向边,每个连通图中肯定有且只有一个环,如果这 ...

  10. vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?     ...