在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. FineReport——获取控件值和单元格值

    设置单元格的值(填报预览): //contentPane.setCellValue(1,0,"abc");//参数面板给单元格赋实际值,即可填报 contentPane.curLG ...

  2. js几种创建对象的方式

    javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象.那么,既然是面象对象的,如何来创建对象呢? 一.通过”字面量“方式创建. 方法:将成 ...

  3. vue系列之生命周期

    代码: <body> <div id="app"> {{message}} </div> <script type="text/ ...

  4. （八）CXF添加自定义拦截器

    前面我们说到CXF添加内置的拦截器,今天的话,我们来讲下如何添加自定义拦截器: 我们的实例是客户端访问服务端webservice接口要加权限认证. 我们思路先说下.我们可以通过在SOAP消息的Head ...

  5. 步步为营-70-asp.net简单练习(文件的上传和下载)

    大文件的上传一般通过FTP协议,而一般小的文件可以通过http协议来完成 1 通过asp.net 完成图片的上传 1.1 创建html页面 注意:1 method="post" ; ...

  6. JavaScript脚本的两种放置方式

    JavaScript脚本的两种放置方式 1在body里用 script标签引用 2 直接写在<script></script>标签之中

  7. LINQ学习之旅（三）

    Linq to Sql语句之Join和Order By Join操作 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join ...

  8. Android 倒计时按钮，倒计时发送短信验证码…

    Android基础之——CountDownTimer类,轻松实现倒计时功能https://www.cnblogs.com/yfceshi/p/6853746.html android中获取验证码后出现 ...

  9. A. 【UNR #1】争夺圣杯

    题解: 一道比较水的题目 按照最一般的思路离散化后枚举最大值 然后考虑最大值的贡献 会发现需要分类讨论一下 发现对一段k的影响是等差数列 所以可以用线段树维护差分数组

  10. openstack学习-nove控制节点部署（四）

    nove在openstack非常重要,主要负责创建虚拟机 nova计算服务 API :负责接收和响应外部请求.支持openstack API,EC2 API Cert:负责身份认证EC 2 Sched ...