在AngularJS中，可以从$rootScope中获取数据源，也可以把获取数据的逻辑封装在service中，然后注入到app.run函数中，或者注入到controller中。本篇就来整理获取数据的几种方式。

■ 数据源放在$rootScope中

 

var app = angular.module("app",[]);app.run(function($rootScope){    $rootScope.todos = [        {item:"",done:true},        {item:"",done:false}    ];})
     
          {
    {todo.item}}
     
     
    
          
      
     

 

以上，把数据源放在$rootScope中的某个字段中，很容易被重写。

■ 数据源放在service中,把servie注入到run函数中

 

app.service("TodoService", function(){    this.todos = [        {item:"",done:true},        {item:"",done:false}    ];      })app.run(function($rootScope, TodoService){    $rootScope.TodoService = TodoService;})  
     
          {
    {todo.item}}
     
     
    
          
      
     

 

在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中：

 

    
     
              {
    {todo.item}}    
     
     
    
          
      
     

 

■ 数据源放在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;})