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

Drei Möglichkeiten, Datenquellen in AngularJS abzurufen

不言

Freigeben： 2018-07-02 15:03:23

Original

1656 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich drei Möglichkeiten zum Abrufen von Datenquellen in AngularJS vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

In AngularJS können Sie die Datenquelle von $rootScope oder von erhalten Die Logik wird im Dienst gekapselt und dann in die app.run-Funktion oder in den Controller eingefügt. In diesem Artikel werden verschiedene Möglichkeiten zum Abrufen von Daten erläutert.

■ Platzieren Sie die Datenquelle in $rootScope

var app = angular.module("app",[]);

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


<p ng-repeat="todo in todos">
  {{todo.item}}
</p>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>

Nach dem Login kopieren

Platzieren Sie oben die Datenquelle in $ Ein Feld in rootScope kann leicht überschrieben werden.

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

<p ng-repeat="todo in TodoService.todos">
  {{todo.item}}
</p>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click=""TodoService.todos.push({item:newTodo, done:false}) />
</form>

Nach dem Login kopieren

in 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 Im HTML:

<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">
  <p ng-repeat="todo in todoCtrl.TodoService.todos">
    {{todo.item}}
  </p>
</body>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>

Nach dem Login kopieren

■ Die Datenquelle wird im Dienst platziert und der Dienst wird injiziert Der Controller muss mit dem Server interagieren

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 der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

So implementieren Sie die Mehrfachauswahlschaltfläche (alle auswählen) in js

Angular HMR (Hot Modul-Ersetzung) Funktionsimplementierungsmethode

Über $apply und optimierte Verwendung in Angularjs

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Datenquellen in AngularJS abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!