AngularJS Routing Challenges with one file

Question

I have a large AngularJs application and am struggling with route injection/organization.

Most applications ( from what I've seen ) define all the routes in one big file like https://github.com/IgorMinar/foodme/blob/master/app/js/app.js#L7

My routes are rather complex, for example:

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when('/navigation/:id', {
        templateUrl: 'app/admin/nav/navigation.tpl.html',
        controller: 'NavigationCtrl',
        title: 'Navigation Config',
        resolve: {
            nav: function($route, NavModel) {
                return NavModel.findOne($route.current.params.id);
            },
            reports: function($route, ReportsModel) {
                return ReportsModel.findAll($route.current.params.id);
            }
        }
    });
}]);

since they are complex and pretty coupled to the controller, my route definition page would be HUGE and very confusing.

Is there a better way to declare the routes? Can you just declare a short version and then extend on it later when that controller is injected?

I believe you can have multiple config calls where you inject $routeProvider and continue to add routes to it but I don't think you can modify the $routeProvider after config has been executed http://www.thinkster.io/angularjs/Z9xvxn6klY/angularjs-the-config-function — shaunhusain, Mar 20 '14 at 00:19

score 4 · Accepted Answer · edited May 23 '17 at 11:57

You can configure $routeProvider only in config block, since it is a provider. However, you can have multiple config sections in your app. That means that if you have several files, each one of them may define another portion of routes inside config section of it's own.

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
    <script src="script.js"></script>
    <script src="another_script.js"></script>
  </head>

  <body>
    <a href="#/route1">Route 1</a>
    <a href="#/route2">Route 2</a>
    <div ng-view></div>
  </body>

</html>

script.js

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/route1', {
        template: '<h1>Route 1</h1>'
      }).
      otherwise({
        redirectTo: '/route1'
      })
  }]);

another_script.js

angular.module('app').
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/route2', {
        template: '<h1>Route 2</h1>'
      })
  }]);

Plunker: http://plnkr.co/edit/ZHNTAiW6VsZmQXjSJH2f?p=preview

If you need to add routes dynamically at runtime after application is bootstrapped, you may probably be interested in non-standard solutions like mentioned here

I had them above each controller definition but then the controller had to be fully loaded to do the injection ... I use requirejs and was gonna try to use angularamd but kept hitting this snag — amcdnl, Mar 20 '14 at 00:24
I wish there was some solution where you could say: $routeProvider.add('/route2') and then it would inject that controller based on a standard structure or one you defined and then add the rest of the resolves, etc when loaded up. — amcdnl, Mar 20 '14 at 13:35

AngularJS Routing Challenges with one file

1 Answers1