CODEWITHSUNDEEP
angularjs
Nicros
Nicros

Reputation: 5193

Preserving scope across routed views

I have a SPA with a list of Clients displayed on the landing page. Each client has an edit button, which if clicked should take me to an Edit view for that selected Client.

I'm not sure how to go about this- all the routes I've seen so far will just take my client id in the $routeParams, and then most examples will then pull the Client from a factory by that Id.

But I already HAVE my Client... seems a waste to hit my web api site again when I already have it. Is it possible to route to the new view and maintain the selected Client in the $scope? Edit: This is what I did- I don't know if it's better or worse than Clarks response... I just made the following angular service:

app.service('clientService', function () {
    var client = null;

    this.getClient = function () {
        return client;
    };

    this.setClient = function (selectedClient) {
        client = selectedClient;
    };
});

And then for any controller that needs that data:

$scope.client = clientService.getClient();

This seemed to work fine... but would love to hear how this is good or bad.

Upvotes: 0

Views: 102

Answers (1)

Clark Pan
Clark Pan

Reputation: 6027

Depends on what level of caching you want.

You could depend on browser caching, in which case proper HTTP headers will suffice.

You could depend on cache provided by $http in angular, in which case making sure the parameters you send up are the same would be sufficient.

You could also create your own model caching along the lines of :

module.factory('ClientModel', function($http, $cacheFactory, $q){
    var cache = $cacheFactory('ClientModel');
    return {
        get : function(id){
            var data = cache.get(id);
            if(data){
                //Using $q.when to keep the method asynchronous even if data is coming from cache
                return $q.when(data);
            } else {
                //Your service logic here:
                var promise = $http.get('/foo/bar', params).then(function(response){
                    //Your model logic here
                    var data = response;
                    cache.put(id, data);
                    return response;
                }, function(response){
                    cache.remove(id);
                    return response;
                });
                //Store the promise so multiple concurrent calls will only make 1 http request
                cache.put(id, promise);
                return promise;
            }
        },
        clear : function(id){
            if(angular.isDefined(id)){
                cache.remove(id);
            } else {
                cache.removeAll();
            }
        }
    }
});

module.controller('ControllerA', function(ClientModel){
    ClientModel.get(1).then(function(){
        //Do what you want here
    });
});

module.controller('ControllerB', function(ClientModel){
    ClientModel.get(1).then(function(){
        //Do what you want here
    });
});

Which would mean each time you request a client object with the same 'id', you would get the same object back.

Upvotes: 1

Related Questions