Rumah > Artikel > hujung hadapan web > Tiga cara untuk mendapatkan sumber data dalam AngularJS_AngularJS

Tiga cara untuk mendapatkan sumber data dalam AngularJS_AngularJS

WBOYasal: 2016-05-16 15:16:401101semak imbas

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>

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>

Nampaknya lebih baik untuk menulisnya seperti ini dalam html:

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

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

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

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

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>

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

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pelbagai teks tatal gelung JQuery dan kod kesan gambar_jqueryArtikel seterusnya：Pelbagai teks tatal gelung JQuery dan kod kesan gambar_jquery

Artikel berkaitan

Lihat lagi