Can .when be dynamically generated with Angular $routeProvider?

Question

Have an app where admins create ITEMs for users to view. Each ITEM is a doc stored in Mongo.

The item.html view and ItemController.js are consistent for all the ITEMs..

The user is first presented an ITEM_list view..
..where the user can click on an ITEM divBox, which would reveal the item.html view populated with the specific db content found for the selected ITEM

Is there a way to have angular do something like this in 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

You can use parameters in the route by using a colon before whatever variable name you want.

For example:

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

Then in your ItemController, you can call that using $routeParams.

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

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

}]);

Here is the link to the Angular docs for some more guidance. http://docs.angularjs.org/tutorial/step_07

Answer 2

You can pass the item id, for example, like so:

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

Then, in your controller, you can inject $routeParams:

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

Then, when they select, you set the location to /item/2 or whatever, and you know it is item 2 in your controller, so you can then either fetch that item from the server, or if you have a service with them already loaded you can figure out which one it is.