Tiga cara untuk mendapatkan sumber data dalam AngularJS

Tiga cara untuk mendapatkan sumber data dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:16:40

asal

1156 orang telah melayarinya

Dalam AngularJS, anda boleh mendapatkan sumber data daripada $rootScope, atau anda boleh merangkum logik untuk mendapatkan data dalam perkhidmatan, dan kemudian menyuntiknya ke dalam fungsi app.run, atau menyuntiknya ke dalam pengawal. Artikel ini akan menyusun beberapa cara untuk mendapatkan data.

■ Sumber data diletakkan dalam $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>

Salin selepas log masuk

Di atas, sumber data diletakkan dalam medan dalam $rootScope, yang boleh ditulis semula dengan mudah.

■ Letakkan sumber data dalam perkhidmatan dan suntikan servie ke dalam fungsi larian

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>

Salin selepas log masuk

Nampaknya lebih baik untuk menulisnya seperti ini dalam html:

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

Salin selepas log masuk

Tambah kaedah dalam perkhidmatan:

app.service("TodoService", function(){
  this.todos = [
    {item:"",done:true},
    {item:"",done:false}
  ];
  
  this.addTodo = fucntion(newTodo){
    this.todos.push({item:newTodo, done:false})
  }
   
})

Salin selepas log masuk

■ Letakkan sumber data dalam perkhidmatan dan masukkan servie ke dalam pengawal

app.controller("TodoCtrl", function($scope, TodoService){
  this.TodoService = TodoServce;
})

Salin selepas log masuk

Dalam html yang sepadan:

<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>

Salin selepas log masuk

■ Letakkan sumber data dalam perkhidmatan, suntikan servie ke dalam pengawal dan berinteraksi dengan pelayan

Dalam projek sebenar, perkhidmatan juga perlu berinteraksi dengan pelayan.

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;
})

Salin selepas log masuk

Di atas adalah kaedah mendapatkan sumber data dalam AngularJS saya harap ia akan membantu pembelajaran semua orang.