javascript - 将 $scope 对象传递给路由，如果刷新则保留

Question

假设我列出了列表中的所有用户，当我单击用户时，我想路由到新 View 并获取所选人员的数据。

首选方式是什么？我应该移动列出用户时已经获得的数据还是应该创建一个新的服务器调用？

我的第一个想法是传递数据，但这样做的问题是，如果用户刷新页面，数据就会丢失。

解决这个问题的最佳实践是什么？

小例子:

(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>

我现在在 UserDetail View 中列出用户详细信息，该 View 现在容易受到浏览器刷新的影响。

Answer 1

通常大多数人只是创建一个新的服务器调用，但我假设您担心性能。在这种情况下，您可以创建一个提供数据并将其缓存在本地存储中的服务。

在 Controller 加载时， Controller 可以从给定路由参数的服务中获取数据，然后加载内容。这样既可以达到页面刷新的效果，又不需要额外的网络请求

这是我的一个应用程序中的一个简单示例，为简单起见，省略了错误处理，因此请谨慎使用

 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;
            }
        }]);