For my initial angular project, I've decided to organize my code by splitting it into directories like this:
app/
calendar/
calendar.js
contacts/
contacts.js
companies/
companies.js
...
app.js
Each directory will contain various files for views (.html), directives, services, etc.
In my app.js file, I want to set up default routes that will be used most of the time, such as:
$routeProvider
.when('/:page', {
templateUrl: function($routeParams) {
return 'app/' + $routeParams.page + '/index.html';
},
controller: 'PageController'
})
However, I also want the flexibility to customize those routes within each module to change controllers, inject dependencies, and more. I prefer keeping this logic contained within the modules themselves rather than in app.js. So, in my app/calendar/calendar.js file, I would like to do something like:
$routeProvider
.when('/calendar', {
templateUrl: 'app/calendar/index.html',
controller: 'CalendarIndexController',
resolve: { ... }
})
However, the route defined in app.js takes precedence over this calendar route.
Currently, I'm adding an extra file after all module javascript files to set up fallback routes at the end, but this feels a bit cumbersome. Is there a way to define routes in app.js that can be overridden?