在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. vue系列之项目打包

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包 ...

  2. MyEclipse 2017 ci6 安装反编译插件（本人自己摸索的方法，亲测可行）

    注: 本文来源于:Smile_Miracle 的< MyEclipse 2017 ci6 安装反编译插件(本人自己摸索的方法,亲测可行) > 第一步:关闭ME,去一下地址下载jad的反编译 ...

  3. JavaScript事件属性event.target

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 性能测试九：jmeter进阶之beanshell的使用+断言

    一.使用 BeanShell使用方式一 BeanShell面板上写脚本 // 从vars中获取用户定义的参数,并转换为int类型 int p_skuId = Integer.parseInt(vars ...

  5. 格式化输出的方法：%、.format()、f

    a = '123'a1 = '456'a2 = '789' %占位符 text = "a=%s"%atext1 = "a=%s,a1=%s,a2=%s"%(a, ...

  6. canvas简单下雨特效

    前面做了两个简单的效果,这次就来个下雨的效果 思路简单的说一下 随机在屏幕中的位置画雨滴,moveTo(x,y) 雨滴的长度就是lineTo(x,y+len) 每次重新绘制页面,就能达到下雨的效果了 ...

  7. 【AtCoder】Yahoo Programming Contest 2019

    A - Anti-Adjacency K <= (N + 1) / 2 #include <bits/stdc++.h> #define fi first #define se se ...

  8. Linux useradd -M -s

    groupadd mysql #创建mysql分组 useradd -M(不创建主目录) -s(不允许登录) /sbin/nologin mysql -g(加入mysql组) mysql

  9. 【Java】 剑指offer(29) 顺时针打印矩阵

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 思 ...

  10. 深入理解类成员函数的调用规则（理解成员函数的内存为什么不会反映在sizeof运算符上、类的静态绑定与动态绑定、虚函数表）

    本文转载自:http://blog.51cto.com/9291927/2148695 总结: 一.成员函数的内存为什么不会反映在sizeof运算符上?             成员函数可以被看作是类 ...