Question

我刚刚开始使用AngularJS，并想知道是否有更好的方法可以做到这一点：

我有一家工厂为我提供了一系列代表产品的对象。（目前这是硬编码的 - 最终将从RESTful API返回产品。）

app.factory('Products', function(){
    var products = [
        { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    ];
    return products;
});

假设路由如/ product / wireframe-kit，这里是路由器当前的设置方式：

app.config(function($routeProvider){
    $routeProvider.
        when('/product/:slug', {
            templateUrl: 'template/product.html',
            controller: 'productController'
        });
    }
});

然后我使用url中的slug从控制器中的这个数组中检索正确的产品：

app.controller('productController', function($scope, $routeParams, Products){
    Products.forEach(function(product){
        if( product.slug == $routeParams.slug) {
            $scope.product = product;
        }
    });
});

我关注的是控制器中的forEach循环 - 我确信必须有一种更简单，更有效的方法来解析此产品数组以获得我想要的对象。有什么想法吗？

Answer 1

您可以将api更改为返回对象（如果所有产品都有独特的slug）。这样您就可以通过密钥（slug）名称访问产品：

app.factory('Products', function(){
    var products = {
        'wireframe-kit': { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        'ui-kit': { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        'ui-icons': { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    };
    return products;
});


app.controller('productController', function($scope, $routeParams, Products){
    $scope.product = Products[$routeParams.slug];
});

Answer 2

如果我们以实用的方式设置REST API，那么

/products - 成为您的“收藏品”

和/products/:id - 成为你的'模特'

当您使用静态数据时，仍然值得将数据作为静态文件放在服务器上，以模仿相关Web文件夹中的这些模式。

然后使用Angular，您可以设置路由来获取这些“端点”的请求

/products/ - 为您提供$scope.collection
/products/<id of products> - 为您提供$scope.model

在AngularJS中从对象中获取对象的正确方法

2 个答案: