Question

有一个应用程序，管理员可以创建ITEM供用户查看。每个ITEM都是存储在Mongo中的文档。

item.html视图和ItemController.js对于所有ITEM都是一致的。

首先向用户呈现ITEM_list视图。
..用户可以点击ITEM divBox，这将显示填充了为所选ITEM找到的特定数据库内容的item.html视图

有没有办法让角度在appRoutes.js中做这样的事情

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider

        // start page listing all the ITEMs
        .when('/', {
            templateUrl: 'views/itemsList.html',
            controller: 'ItemsListController'
        })

        // dynamic pages for each ITEM, once selected ?!
        .when('/{{ITEM}}', {
            templateUrl: 'views/item.html',
            controller: 'ItemController'
        });

    $locationProvider.html5Mode(true);

}]);

Answer 1

您可以传递项目ID，例如：

.when('/item/:item_id', {
        templateUrl: 'views/item.html',
        controller: 'ItemController'
    })

然后，在你的控制器中，你可以注入$ routeParams：

.controller('ItemController', function($scope, $routeParams) {
     var item_id = $routeParams.item_id;
 });

然后，当他们选择时，您将位置设置为/ item / 2或其他，并且您知道它是控制器中的第2项，因此您可以从服务器获取该项目，或者如果您有服务已经加载它们你可以找出它是哪一个。

Answer 2

您可以在所需的任何变量名之前使用冒号来使用路径中的参数。

例如：

.when('/:itemID', {
    templateUrl: 'views/item.html',
    controller: 'ItemController'
}

然后在ItemController中，您可以使用$ routeParams调用它。

.controller('ItemController', ['$scope', '$routeParams', 

    function($scope, $routeParams) {
         $scope.itemID = $routeParams.itemID;

}]);

以下是Angular文档的链接，以获取更多指导。 http://docs.angularjs.org/tutorial/step_07

可以。使用Angular $ routeProvider动态生成？

2 个答案: