Question

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

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

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

解决此问题的最佳做法是什么？

小例子：

(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视图中列出用户详细信息，此视图现在容易受到浏览器刷新的影响。

Answer 1

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

在控制器负载上，控制器可以在给定路由参数的情况下从服务中获取数据，然后加载内容。这将实现处理页面刷新的效果，而不需要额外的网络请求

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

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

Answer 2

我会说你应该从简单开始，并在你点击新路线时进行新的服务器调用。我的经验是，这简化了开发，您可以将精力放在优化性能（或用户体验......）上，最需要它。

这样的事情：

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

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

2 个答案: