How to set the AngularJS $routeProvider's routes by json

Question

I would like to set the paths after I get pathconfig by JSON object, how could I do it? So the webserver provide a json object what contain the path, template, controller, after it the angular set it as $routeProvider, or it can be good for me that after the routeProvider is setted it can be modified, so it get json response what will add to routeProvider what it contains.

Answer 1

Follow by a colon ' : '

For example, assume your json look like it:

"objects": [
    { "itemID": "121", "itemName": "Doe" },
    { "itemID": "122", "itemName": "Smith" },
    { "itemID": "123", "itemName": "Jones" }
]

in your .js file:

$routeProvider.when('/item=:itemID', {     //FOLLOW BY A COLON RIGHT HERE
    templateUrl: 'itemOverview.html',      //change as you like
    controller: 'itemOverviewController'   //change as you like
});

Depend on how you get you json and what name did you give to $scope, the names in ng-repeat should be up to you.

In your HTML, your link should look like:

<ul class="itemList">
    <li ng-repeat="object in objects">
        <!-- a '#' is required at the beginning of 'href=' for routeProvider -->
        <a href="#/item={{object.itemID}}">{{object.ItemName}}</a>
    </li>
</ul>

With the ng-repeat, angular will take care of the list and the link that comes with it!