Over a million developers have joined DZone.

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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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:

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
angular ,javascript ,web development

Published at DZone with permission of Kevin Hooke, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}