Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Converting an ngRoute Based AngularJS App to Angular ui-router

DZone's Guide to

Converting an ngRoute Based AngularJS App to Angular ui-router

I've finally gotten to the point where I need more than just single URL based routes to views, I need to have at least one of the views incorporate other nested views that are part of a wizard set of pages. This is something that’s not supported by default in ngRoute, so I’m taking a look at AngularJS ui-router as an alternative.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

My AngularJS app I’ve been developing was using ngRoute for it’s routing between views (I put together a simple example for reference on GitHub here) for a while. I've finally gotten to the point where I need more than just single URL based routes to views, I need to have at least one of the views incorporate other nested views that are part of a wizard set of pages. This is something that’s not supported by default in ngRoute, so I’m taking a look at AngularJS ui-router as an alternative.

AngularUI Router is state based, rather than URL based.

Here’s my starting point for my app before adding the nested views and converting to ui-router:

var myApp = angular.module('MyApp', [ "ngRoute", "ngAnimate",
 "MyControllers" ]);

myApp.config([ '$routeProvider', function($routeProvider{
  $routeProvider.when('/', {
    templateUrl : 'home.html'
  }).when('/page1', {
    templateUrl : 'page1/page1.html',
    controller : 'Page1Controller'
  }).when('/page2', {
    templateUrl : 'page2.html'
  }).when('/page3', {
    templateUrl : 'page3.html'
  }).otherwise({
    redirectTo : '/'
  });
}]);

Converted to the state based approach, my routing config now looks like:

var myApp = angular.module('MyApp', [ "ui.router", "ngAnimate", "MyControllers" ]);

myApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    // show home page
    .state('home', {
      url: '/home',
      templateUrl: 'home.html'
    })

    //show page2
    .state('page2', {
      url: '/page2',
      templateUrl: 'page2/page2.html',
      controller: 'Page2Controller'
    })

    //show page3
    .state('page3', {
      url: '/page3',
      templateUrl: 'page3.html'
    })

  // catch all route
  // send users to the home page
  $urlRouterProvider.otherwise('/home');
});

The ng-view from ngRoute is now replaced with the ui-view directive from ui-router:

<div ng-view></div>

becomes:

<div ui-view></div>

My menu links looked like this previously:

<li><a href="index.html#/home">Home</a></li>
<li><a href="index.html#/page1">Page 1</a></li>
<li><a href="index.html#/page2">Page 2</a></li>

Instead of using URLs that map to view templates, ui-router uses states and state changes to move between page templates–here’s what the replacement for the above menu links looked like:

<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="page1">Page 1</a></li>
<li><a ui-sref="page2">Page 2</a></li>

Right now the routing configuration is really not that much different than before: the ui-router config is slightly different and ui-sref states replaced the links. Where the interesting part is that now you can also support nested views, that look like this in the configuration:

$stateProvider
  // show page2
  .state('page2', {
    url: '/page2',
    templateUrl: 'page2/page2.html'
  })

  //show page2 - sub page1
  .state('page2.subsection1', {
    url: '/page2/sub1',
    templateUrl: 'page2/page2sub1.html'
  })

  //show page2 - sub page2
  .state('page2.subsection2', {
    url: '/page2/sub2',
    templateUrl: 'page2/page2sub2.html'
  })

This is the routing for page 2 and two nested views that are nested within the main ui-view (ui-view is the ui-router replacement for ng-view) with a states of page2.subsection1 and page2.subsection2.

The nested views have corresponding nested states in the routing, identified with a dot notation. Assuming page 2 has a submenu and it’s own ui-view nested view, the submenu would like this:

<li><a ui-sref="page2.subsection1">Subsection 1</a></li>
<li><a ui-sref="page2.subsection2">Subsection 2</a></li>

With a following ui-view nested view in the page following the Page 2’s submenu:

<div ui-view></div>

Clicking on the submenu items will load the nested view fragments into this nested view.

Full docs for ui-router are here.

I have two working sample apps showing an approach using ngRouter and then the examples above updates to use ng-router:

  • Using ng-route here
  • Using ui-router here

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
angular ,javascript ,web development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}