Service de promesse angulaire comme Global DataService

Question

Je ne suis pas pro en angulaire et je suis toujours plus lering. J'espère avoir de l'aide ici.

Je veux créer une application avec différentes vues. J'ai besoin de détecter le navigateur et de récupérer également certaines données d'un serveur. Pour cela, j'ai créé un service, où je fais ce travail.

Mon désir est d'utiliser les données du service toutes les vues. Comment la bonne façon de stocker et de mettre en cache les données afin que je puisse l'utiliser dans toutes mes vues / contrôleurs?
Voici ce que j'ai obtenu jusqu'à présent.

Mon service:

.factory('DataService', function($http, $q, $timeout) {
var data = { };
return {
    notes: function() {
        // This exposed private data
        return data;
    },
    addItem: function(itemname, itemvalue) {
        // This is a public function that modifies private data
        data[itemname] = itemvalue;
    }
    getPlatform: function() {
        var getPlatformData = function() {
          var deferred = $q.defer();
          BrowserDetect.init();
          deferred.resolve(BrowserDetect.OS);
            return deferred.promise;
        };
        return {
            getPlatformData: getPlatformData
        };
    },
    getServerData: function() {
        //if(!data.getServerData){
        var getData = function() {
            var deferred = $q.defer();
            $http({
                url: 'js/fakeGet.json',
                method: 'get',
                dataType: 'json',
            }).success(function(data) {
                data.scanResponse = data;
                deferred.resolve(data);
            })
            return deferred.promise;
        };

        return {
            getData: getData
        };
        //}
        // return data.scanResponse;
    }
};
});

Mon contrôleur:

DataService.getPlatform().getPlatformData().then(function(platform) {
    console.log('Another browserDetect request');
    $scope.platform = platform;
    DataService.addItem("platform", $scope.userPlatform);
});

Answer 1

Tout d'abord, comme Nordyke l'a mentionné dans sa réponse, vous feriez mieux de diviser le service à des plus petits.

Deuxièmement, vous demandez comment mettre en cache les données, et puisque vous utilisez Promise, $q.when() est ce dont vous avez besoin. Je vais prendre le getPlatform À titre d'exemple pour vous aider à démarrer:

.factory('DataService', function($http, $q, $timeout) {
    var os; // this variable is used to store the result

    return {
        getPlatform: function() {
            var getPlatformData = function() {
                if (!os) { // no previous data available, look into other service to fetch the data
                    var deferred = $q.defer();
                    BrowserDetect.init();
                    os = BrowserDetect.OS; // store data
                    deferred.resolve(os);
                    return deferred.promise;
                }
                return $q.when(os); // there is previous data, return it as promise
            };
            return {
                getPlatformData: getPlatformData
            };
        }
    };
});

De cette façon, les informations sur le système d'exploitation sont mises en cache, et

DataService.getPlatform().getPlatformData().then(function(platform) {
    ...
});

ne rapportera les informations de la plate-forme qu'une seule fois pendant la durée de vie du service de données. Vous pouvez appliquer la même idée à getServerData ainsi pour mettre en cache les données du serveur.

Answer 2

La mise en cache de vos données dans un service Singleton est une bonne approche, et j'aime votre implémentation simple. Ma seule recommandation serait de diviser vos 3 préoccupations en services distincts.

1. Détection du navigateur
2. Demandes de serveur (qui seront encore plus divisées une fois que vous aurez plus de demandes.)
3. Cache de données