在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. Git学习笔记一《版本控制之道-使用Git》

    1.在Windows中安装完git后,需要进行一下配置:$ git config --global user.name "zhangliang"$ git config --glo ...

  2. maven 跳过test

    -DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下. -Dmaven.test.skip=true,不执行测试用例,也不编译测试 ...

  3. winform(记事本--剪切复制等和打开)

  4. 随机生成三个数（break用法）

  5. java tomcat linux 环境变量设置

    一https://www.cnblogs.com/hanshuai/p/9604730.html :whereis java //查找java 安装路径:which java //查找java 执行路 ...

  6. 区间dp好题cf149d 括号匹配

    见题解链接https://blog.csdn.net/sdjzping/article/details/19160013 #include<bits/stdc++.h> using nam ...

  7. hdu4052矩形面积并

    建模需要注意下细节,,这是做扫描线的惯例,就是最好把模型建立在笛卡尔坐标系上 剩下的看链接和注释https://blog.csdn.net/shiqi_614/article/details/7983 ...

  8. 怎样在win7 IIS中部署网站？

    IIS作为微软web服务器的平台,可以轻松的部署网站,让网站轻而易举的搭建成功,那么如何在IIS中部署一个网站呢,下面就跟小编一起学习一下吧. 第一步:发布IIS文件 1:发布你所要在IIS上部署的网 ...

  9. ELK - MAC环境搭建

    ELK - MAC环境搭建 本文旨在记录elasticsearch.logstash.kibana在mac下的安装与启动. 写在前面 ELK的官方文档对与它们的使用方法已经讲的非常清楚了,这里只对相关 ...

  10. Linux下编写互相通信的驱动模块并将其加入到内核中

    以Mini2440为例,其Linux内核目录为/opt/FriendlyARM/mini2440/linux-2.6.32.2,在linux-2.6.32.2(Linux内核目录)下的drivers目 ...