Drei Möglichkeiten, Datenquellen in AngularJS_AngularJS abzurufen-js-Tutorial-php.cn

Drei Möglichkeiten, Datenquellen in AngularJS_AngularJS abzurufen

WBOY

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

Original

1099 Leute haben es durchsucht

In AngularJS können Sie die Datenquelle von $rootScope abrufen oder die Logik zum Abrufen von Daten im Dienst kapseln und sie dann in die Funktion app.run oder in den Controller einfügen. In diesem Artikel werden verschiedene Möglichkeiten zum Abrufen von Daten erläutert.

■ Die Datenquelle wird in $rootScope
platziert

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>

Nach dem Login kopieren

Oben ist die Datenquelle in einem Feld in $rootScope platziert, das leicht umgeschrieben werden kann.

■ Platzieren Sie die Datenquelle im Dienst und fügen Sie den Dienst in die Ausführungsfunktion ein

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>

Nach dem Login kopieren

Es scheint besser, es so in HTML zu schreiben:

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

Nach dem Login kopieren

Fügen Sie eine Methode im Dienst hinzu:

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

Nach dem Login kopieren

■ Platzieren Sie die Datenquelle im Dienst und injizieren Sie den Dienst in den Controller

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

Nach dem Login kopieren

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

Nach dem Login kopieren

■ Platzieren Sie die Datenquelle im Dienst, injizieren Sie den Dienst in den Controller und interagieren Sie mit dem Server

In tatsächlichen Projekten muss der Dienst auch mit dem Server interagieren.

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

Nach dem Login kopieren

Das Obige ist die Methode zum Abrufen von Datenquellen in AngularJS. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.