Pass $scope object to route, keep if refresh

Question

Lets say i list all users in a list, when i click a user i want to route to a new view and get the data for the selected person.

What is the preferred way? Should i move the data i already got when i listed the users or should i create a new server call?

My first thought is to pass the data, but the problem with this is that the data the gets lost if the user refreshes the page.

What is the best practice to solve this?

Small example:

(function() {
    var app = angular.module('app');

    var controllerId = 'app.controllers.views.userList';
    app.controller(controllerId, [
        '$scope', 'UserService',function ($scope, userService) {

            var vm = this;

            vm.users = [];

            userService.getAllUsers().success(function (data) {
                vm.users= data.users;
            });

            var gotoUser = function(user) {
            // Pass the user to UserDetail view.
            }
        }
    ]);
})();

<div data-ng-repeat="user in vm.users" ng-click="vm.gotoUser(user)">
                    <span>{{customer.firstname}} {{customer.lastname}}</span>
</div>

i now list the user details in UserDetail view, this view is now vulnerable against a browser refresh.

Answer 1

I would say that you should start off simple and do a new server call when you hit the new route. My experience is that this simplifies development and you can put your effort on optimizing performance (or user experience...) where you will need it the most.

Something like this:

angular.module('app', ['ngRoute', 'ngResource'])

.factory('Users', function ($resource) {
    return $resource('/api/Users/:userid', { userid: '@id' }, {
        query: { method: 'GET', params: { userid: '' }, isArray: true }      
    });
});

.controller("UsersController",
    ['$scope', 'Users',
function ($scope, Users) {
    $scope.loading = true;

    $scope.users = Users.query(function () {
        $scope.loading = false;
    });
}]);

.controller("UserController",
    ['$scope', '$routeParams', 'Users',
function ($scope,  $routeParams, Users) {
    $scope.loading = true;

    $scope.user = Users.get({ userid: $routeParams.userid }, function () {
        $scope.loading = false;
    });

    $scope.submit = function () {
        $scope.user.$update(function () {
            alert("Saved ok!");
        });
    }
}]);

.config(
    ['$routeProvider', '$locationProvider',
        function ($routeProvider, $locationProvider) {
            $routeProvider
                .when('/users', {
                    templateUrl: '/users.html',
                    controller: 'UsersController'
                })
                .when('/users/:userid', {
                    templateUrl: '/user.html',
                    controller: 'UserController'
                })
                .otherwise({ redirectTo: '/users' });
        }
    ]
);

Answer 2

Typically most people just create a new server call, but I'll assume you're worried about performance. In this case you could create a service that provides the data and caches it in local storage.

On controller load, the controller can fetch the data from the service given the route params and then load the content. This will achieve both the effect of working on page refresh, and not needing an extra network request

Here's a simple example from one of my apps, error handling left out for simplicity, so use with caution

 angular.
    module('alienstreamApp')
        .service('api', ['$http', '$q','$window', function($http, $q, $window) {
            //meta data request functions
            this.trending = function() {

            }

            this.request = function(url,params) {
                var differed = $q.defer();
                var storage = $window.localStorage;
                var value = JSON.parse(storage.getItem(url+params))

                if(value) {
                    differed.resolve(value);
                } else {
                  $http.get("http://api.alienstream.com/"+url+"/?"+params)
                       .success(function(result){
                           differed.resolve(result);
                           storage.setItem(url+params,JSON.stringify(result))
                       })
                }
                return differed.promise;
            }
        }]);