Angular-UI - ui-router

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:

https://github.com/angular-ui/ui-router/wiki

twilson63/ui-router.md

Angular-UI - ui-router

mfunkie commented Mar 2, 2014

nathasm commented Mar 3, 2014