在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. TCP端口转发(centos7)

    =============================================== 2019/2/14_第1次修改                       ccb_warlock == ...

  2. 浅谈C语言内存管理、内存泄露、堆栈

    1.内存分配区间:         对于一个C语言程序而言,内存空间主要由五个部分组成:代码段(.text).数据段(.data).静态区(.BSS).堆和栈组成.         BSS段:BSS段 ...

  3. WebMvcConfigurerAdapter已过时

    Spring Boot2.0的版本(创建的时候自动选择的这个版本),然后编译器告诉我WebMvcConfigurerAdapter已过时了 @Deprecated public abstract cl ...

  4. git命令行提交并且同步到远程代码库

    远程代码库以github为例 1.打开 git bash 2.进入项目目录 cd /e/myGitProjects/test 3.提交到本地git仓库 git add -Agit commit -m ...

  5. ValueError: total size of new array must be unchanged

    在对数据增强后的faster rcnn中进行训练时,出现这个错误,原因是在lib/roi_data_layer/layer.py中,会出现 inds = np.reshape(inds, (-1,2) ...

  6. VS2013 "当前不会命中断点.还没有为该文档家在任何符号" 解决办法

    参考:http://blog.csdn.net/u010797208/article/details/40452797 亲测可行

  7. 【python】xsspider零碎知识点

    1.提取url信息 urlparse() from urlparse import urlparse url = "http://scrapy-chs.readthedocs.io/zh_C ...

  8. 性能测试十九：jmeter参数优化+排错

    一:参数优化 1,控制台取样间隔的设置,在jmeter/bin/jmeter.properties文件中修改 summariser.interval=10,默认为30s,最低可修改为6s 2,Jvm参 ...

  9. python接口自动化测试八：更新Cookies、session保持会话

    s = requests.session() # 此方法只适用于网站是cookies这种,网站是token的没用 # 这样做的好处就是可以保存cookies并保持会话,不用每次都去获取.传参 Toke ...

  10. python 全栈开发，Day121(DButils,websocket)

    昨日内容回顾 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user") 3.m ...