Lately, I have been digging into the angular-ui-router, (https://github.com/angular-ui/ui-router), I would say from ng-conf, it is the recommended way to do routing in Angular. What I find interesting about it, is how you can have multiple views and your routing graph can be defined in your loosely coupled modules. This provides a very conventional way to assembling your angular.modules for an angularjs application. Instead of having several features in your controller and templates directory, you can have several repositories that just focus on a particular feature.
For example, if you have two CRUD modules, (projects and contacts), with ui-router you can keep each routing state independent of the other as long as they are unique.
So in one module projects, I can have a config section and create the following routing state:
angular.js('projects', [])
.config(function($stateProvider) {
$stateProvider
.state('projects', {
url: '/projects',
abstract: true,
template: '<div ui-view></div>'
})
.state('projects.list', {
url: '',
controller: ...,
template: ...
})
.state('projects.new', {
url: '/new',
controller: ...,
template: ...
})
.state('projects.show', {
url: '/:id',
controller: ...,
template: ...
})
;
});This would create the following paths:
| Path | State |
|---|---|
| /projects | projects.list |
| /projects/new | projects.new |
| /projects/:id | projects.show |
Now if I had another module contacts, and I had a config section defined as:
angular.js('contacts', [])
.config(function($stateProvider) {
$stateProvider
.state('contacts', {
url: '/contacts',
abstract: true,
template: '<div ui-view></div>'
})
.state('contacts.list', {
url: '',
controller: ...,
template: ...
})
.state('contacts.new', {
url: '/new',
controller: ...,
template: ...
})
.state('contacts.show', {
url: '/:id',
controller: ...,
template: ...
})
;
});This would create the following paths:
| Path | State |
|---|---|
| /contacts | contacts.list |
| /contacts/new | contacts.new |
| /contacts/:id | contacts.show |
So now, I have two independent modules that are independently packaged, and I want to include them into one container application.
<body>
<div ui-view></div>
<!-- add module scripts -->
<!-- add app script -->
<script src="app.js"></script>
</body>angular.module('app', ['ui.router', 'projects', 'contacts'])
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/projects');
// default to projects
});So by including the packaged script files of the projects and contacts modules, the ui-router will automatically wire up each module state graph with the main application. This keeps the main application from having to worry about the routes of each module and lets the module work as an independent applet and focus on the domain in its container. You could also, have a separate module called nav that dynamically builds the navigation based on the active or available applets.
For more information about ui-router, check out this video:
https://egghead.io/lessons/angularjs-introduction-ui-router
Also they have good documentation on their wiki:
This is exactly how I've structured all my applications.