Question

我正在尝试在Angular.js中设置一个相对简单的在线购物应用程序。

我使用ng-route模块显示项目列表视图和项目详细信息视图。当加载项目列表路由时，我使用resolve来加载带有项目列表的json文件（描述，图像URL，价格等）。

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/items', {
            templateUrl: 'partials/item-list.html',
            controller: 'ItemListController',
            resolve: {
                items: ["Item", function(Item) {
                    return Item.fetch();
                }]
            }
        }).
        when('/items/:itemID', {
            templateUrl: 'partials/item-detail.html',
            controller: 'ItemDetailController',
            resolve: {
                dish: ["$route", "Item", function($route, Item) {
                    return Item.fetch($route.current.params.itemID);
                }]
            }
        }).
        otherwise({
            redirectTo: '/items'
        });
}]);

我还创建了一个Cart服务来处理向购物车添加/删除项目。

services.factory("Cart", function() {
    return {
        add: function(item) {
            ...
        },
        remove: function(item) {
            ...
        }
        items: ...
    }
});

此购物车已加载/保存到Cookie（这是最佳做法吗？）。只有项目的itemID才会保存到cookie中。当从cookie重新加载购物车时，我想从服务器再次获取项目（如果描述或价格已经改变）。在这里执行另一个http查询以加载项目似乎是不合适的（因为在加载项目列表路由时路由器已经执行了请求）。这是什么最好的做法？

Answer 1

快速解决方案是创建包含购物车的服务。

此服务可以使用有角度的＆＃c; $ cache / $ cacheFactory＆＃39;把它留在记忆中顺便说一下，我认为使用内存（用于小数据），会话存储（用于更大的数据）和本地存储（用于要在会话之间保留的数据）更好。这比饼干更好。

正如您在Wishtack.com上看到的，根本没有cookie。

顺便说一句，在Wishtack.com上，我们使用自定义模块（我们将很快在github.com上发布）在顶部＆＃34; restangular＆＃34; （你应该使用它而不是$ http）来处理缓存等......并使用对象，这样我们就可以进行如下调用：

CartProduct.all().getListLazy();

所以延迟调用将尝试从缓存中获取值，而不是每次调用服务器。

同时我们发布模块，你可以简单地使用这样的服务：

(function () {

/* We use dejavu for classes as we hate functions at Wishtack :). */
var User = dejavu.Class.declare({

    _productList: null,

    initialize: function initialize(args) {
        ... load cart using "args.userId" ...
    },

    cartProductList: function cartProductList() {
        ... or load it here lazily ...

        return this._productList;
    }

});

yourModule.factory('User', function () {

    return User;

});

})();

并以这种方式使用它。

function (User) {
    new User({userId: userId}).cartProductList();
}

Angular.js - 处理多个位置使用的数据的正确方法

1 个答案: