AngularJS $stateProvider shorthand

Question

Is there a shorter version for this piece of code? I am using ui-router.js as well. The code is only an excerpt of my menu.

   function ($stateProvider, $routeProvider, $urlRouterProvider) {
        var home = {
            name: 'home',
            url: '/',
           templateUrl: 'partials/home.php',
        };

        var newarticle = {
            name: 'newarticle',
            url: '/newarticle',
            templateUrl: 'partials/newarticle.php',
        };




        $stateProvider
            .state(home);

        $stateProvider
            .state(newarticle);

Answer 1

There's a couple of ways you could do it but neither are particularly satisfactory.

The first one is simply do everyone in 1 large object literal held in another file so you can easily add/edit routes in one place. Then simply loop over them with $stateProvider at application bootstrap.

An extension of that is then to have this large object literal as a .json file instead, and load it dynamically at application bootstrap.

But I don't think either of these really help you much.

What I've done in the past in projects with a lot of very similar routes (such as pure MVC style routing) is have a grunt task which generates the routes object literal for me based on reading the controllers and views directories to determine what routes to make. This works quite well, and you can set up grunt to do it as part of your development server (You ARE using grunt right??). It has to be a script outside of your app because Angular itself cannot read your controllers directory dynamically when running in the browser...

http://gruntjs.com/