So erstellen Sie einen Angular Factory-Dienst für den Zugriff auf den serverseitigen ASP.NET-Cache

Question

Wir erstellen eine ASP.NET MVC-Anwendung, die AngularJS-Framework verwendet. Dies ist eine mehrsprachige Anwendung und Ressourcenwerte in jeder Sprache sind in der Datenbank gespeichert.

Auf der Serverseite laden wir alle unsere Ressourcen aus der Datenbank in HttpRuntimeCache, wenn sich der Benutzer bei der Anwendung anmeldet und sie in unseren Ansichten verwendet.

Wir möchten einen AngularJS Factory Service erstellen, mit dem wir auf die Ressourcen in HttpRuntimeCache zugreifen können.

Zum Beispiel:

1. Benutzer Klicks anmelden
2. ASP.NET MVC-Anwendung lädt Ressourcen in HttpRuntimeCache
3. Benutzer root der Anwendung umgeleitet wird (Home/Index).
4. Angular Anwendung initialisiert
5. Wenn Benutzer eine Seite aufruft, die diese Ressourcen aus HttpRuntimeCace braucht, werden wir den Wert über den Service
   • Wenn dieser Dienst aufgerufen wird, bekommen, wird es zuerst, ob sie bereits geladen hat das Ressourcenwörterbuch
   • Wenn es noch nicht geladen wurde, ruft es eine MVC-Aktionsmethode auf, die das Ressourcenwörterbuch als JSON zurückgibt, und der Dienst verwendet diese Antwort, um das Wörterbuch zu laden
   • Wenn es bereits geladen wurde , es wird nur den Wert aus dem Wörterbuch basierend auf t zurückgeben er Schlüssel,

Was angefordert wurde, ist der beste Weg, um dieses Szenario zu erreichen?

Unten ist, was wir bisher haben. Das Problem mit unserer aktuellen Lösung ist, dass der Dienst den Wert zurückgibt, bevor das Wörterbuch geladen werden kann.

angular.module("MyApp").factory('cacheService', ['$rootScope', '$http', function ($rootScope, $http, $q) { 
    var obj = { resourcesLoaded: false }; 

    obj.loadResourceDictionary = function() { 
     obj.resourcesLoaded = false; 

     $http.get("/MyApp/Cache/GetResourceDictionary") 
      .success(function (data) { 
       obj.resourceDictionary = data; 
       obj.resourcesLoaded = true; 
      }); 
    } 

    obj.getResourceValue = function (resourceKeyName) { 
     if (!obj.resourcesLoaded) { 
      obj.loadResourceDictionary(); 
     } 
     return obj.resourceDictionary[resourceKeyName]; 
    } 

    return obj; 
}]); 

EDIT w/Anwendungsbeispiel in Winkelregler (wir wollen diesen Service auch in einer Richtlinie verwenden):

angular.module("MyApp").controller("MyAppCtrl", ['cacheService', function (cacheService) { 
    var self = this; 
    self.test = function() { 
     var value = cacheService.getResourceValue('Err_lbl_UserExist'); 
    } 
}]); 

<div ng-controller="MyAppCtrl as myAppCtrl"> 
    <button ng-click="myAppCtrl.test()">Test Angular CacheService</button> 
</div> 

Answer 1

Dort gehen Sie:

angular.module("MyApp").factory('cacheService', ['$rootScope', '$http', function ($rootScope, $http, $q) { 
    var service = { 
    obj.getResourceValue = function() { 
     return $http.get("/MyApp/Cache/GetResourceDictionary") 
      .success(function (data) { 
       return data 
      }); 
    } 
    } 
    return service; 
}]); 

Und für Ihre Controllermethode:

angular.module("MyApp").controller("MyAppCtrl", ['cacheService', function (cacheService) { 
    var self = this; 
    self.test = function() { 
     var value = null; 
     cacheService.getResourceValue().then(function (data){ 
       value = data['Err_lbl_UserExist']; 
     } 
    } 
}]); 

<div ng-controller="MyAppCtrl as myAppCtrl"> 
    <button ng-click="myAppCtrl.test()">Test Angular CacheService</button> 
</div> 

$ http.get ist eine asynch-Funktion und wird daher blockiert, bis Daten empfangen werden. Sie müssen nur Fehler behandeln, die nicht implementiert sind.