, wie Rest API-Aufruf in Controller jedes Mal, wenn die Route/Seite besucht wird

Question

Ich rufe einige Rest-API (s) in meiner Angular App, um Daten vom Server zu erhalten und auf der Seite anzuzeigen (z. B. Homepage). Aber jedes Mal, wenn ich die Seite besuche, wird die API getroffen, und Daten werden abgerufen und angezeigt, weil ich in meinem Controller den Rest-Service anrufe. Gibt es eine "beste" Möglichkeit, die Daten beim ersten Anruf zu "speichern" und dann, wenn der Nutzer die gleiche Seite besucht, die "gespeicherten" Daten anzuzeigen, anstatt die Restdienste immer wieder zu treffen?

Es gibt auch Fälle, in denen ich die API anstelle von gespeicherten Daten anzeigen möchte (z. B .: wenn sich der Benutzer abmeldet und erneut anmeldet oder wenn Daten auf dem Server aktualisiert werden). Was ist mit Angular am besten, um solche Funktionen zu implementieren?

Here is a working Plunker for demo of my current app. (Informationen zum Servicebefehl finden Sie unter home.js).

angular.module('home').controller('HomeCtrl', function($scope, DrinkService) { 

    var vm = this; 

    vm.loading = true; 
    vm.greeting = "Drink World!"; 

    DrinkService.getDrinks().then(function(response) { 
    vm.drinks = response.data.results; 
    console.log(vm.drinks); 
    vm.loading = false; 
    }); 

}).factory('DrinkService', ['$http', 
    function($http) { 
    var url = 'https://raw.githubusercontent.com/Randmness/DeathByCaffeine-Enyo/master/data/canonDbList_dbService.json'; 
    var drinkService = {}; 

    drinkService.getDrinks = function() { 
     return $http.get(url).then(function(response) { 
     return response; 
     }); 
    }; 

    return drinkService; 
    } 
]); 

Answer 1

Sie können einen Service mit $q verwenden. Ein Beispiel Service wäre

service('myService', function($q, $http) { 
    this.data; 
    var self = this; 

    this.getMyData = function() { 
    if (angular.isDefined(self.data)) { 
     // use $q to return a promise 
     return $q.when(self.data) 
    } 
    return $http.get('myurl').then(function(resp) { 
     self.data = resp; 
    }) 
    } 

} 

Der Service den Wert aus der API zum ersten Mal, es heißt gesetzt wird und den Wert auf den Service so nachfolgende Aufrufe die gespeicherten Daten verwenden gesetzt.

In Ihrem Controller können Sie myService.getMyData()

rufen Sie eine ähnliche Frage sehen here

Answer 2

@ user2954587 Antwort wird Ihnen helfen. Ich möchte auch hinzufügen, dass Dienste Singleton sind, d. H. Sie werden einmal erstellt und sind daher perfekt zum Speichern von Daten, zum Teilen von Daten unter anderen Steuerungen usw. Steuerungen andererseits sind an eine Ansicht gebunden. Jedes Mal, wenn eine Ansicht geladen wird, wird der an sie gebundene Controller ebenfalls geladen. Sie müssen auch einige Male Daten aus dem Dienst entfernen (in Ihrem Fall, wenn Sie sich abmelden), setzen Sie einfach inject myService auf den Controller, wo Sie den Logout-Vorgang durchführen und setzen Sie data auf undefined.