Heim > Artikel > Web-Frontend > Drei Möglichkeiten, Datenquellen in AngularJS abzurufen

Drei Möglichkeiten, Datenquellen in AngularJS abzurufen

不言Original: 2018-07-02 15:03:231616Durchsuche

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>

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>

in Es scheint besser, es so in HTML zu schreiben:

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

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

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

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

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Mehrfachauswahlschaltfläche (alle auswählen) in jsNächster Artikel：So implementieren Sie die Mehrfachauswahlschaltfläche (alle auswählen) in js

In Verbindung stehende Artikel

Mehr sehen