Angular UI Router

Finally a de-facto solution to nested views and routing

Matthieu Lux

AngularJS Router

AngularJS 1.0

  • $routeProvider.when(path, route)
    • path with parameters
    • controller
    • template
    • resolve
    • redirectTo
  • directive ng-view with no parameters
  • $routeParams

AngularJS 1.2

  • angular.router.js
  • paths with eager params

Nothing more

Case Study

UI Router project

Part of the AngularUI umbrella project

Karsten Sperling, Tim Kindberg, Jens Melgaard

Start at the begining of 2013

0.0.1 released in May 2013

In active development but surprisingly stable in 0.0.1

Nice new features already in master branch

Finite-State Machine

$stateProvider & $state

A state corresponds to a "place" in the application

A state describes what the UI looks like and does at that place.

Controller & View

You can rely your own code
on the state machine

State

  • URL: String, optional
  •  
  • Template
    • template: String
    • templateUrl: String
    • templateProvider: Function
  •  
  • Controller
    • String
    • Function
  •  
  • Resolve: Object
  •  
  • Data: Object
  •  
  • Nested Views
    • composed name:
      'parent.child'
    • parent: String
    • abstract: Boolean
  •  
  • Multiple Named Views
    • views:
      • name: String with hooks
      • template
      • controller
  •  
  • Callbacks
    • onEnter: Function
    • onExit: Function

URLs

  • Base
    • '/route'
  • Parameter
    • '/route/:routeId'
    • '/route/{routeId}'
  • Regexp
    • '/route/{routeId:[0-9]{1,8}}'
  • Query parameters
    • '/contacts?myParam'
    • '/contacts?myParam1&myParam2'
  • Nested routes
    • parent: '/parent'
    • child: '/:parentId/child'
    • will match: '/parent/:parentId/child'

Other features

  • Automatic handling of browser history
  • Can use HTML5 hash bangs

Common trick

  • Bind $state and $stateParams in $rootScope

Good to know

  • 'otherwise' feature is hidden in $urlRouterProvider

Nested Views


<!-- index.html -->
<body ng-controller="MainCtrl">
  <div ui-view></div>
</body>
            

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
            

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}
  </li>
</ul>

Nested States


$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [
        { name: 'Alice' },
        { name: 'Bob' }
      ];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

function MainCtrl($state){
  $state.transitionTo('contacts.list');
}

http://mydomain.com/

http://mydomain.com/link1

http://mydomain.com/link1/products

http://mydomain.com/link1/products/movies

http://mydomain.com/link1/products/movies/3/edit

Nested Tricks

  • Abstract States
    • Non usable states
    • Controller(s)
    • Template(s)
    • URL
    • Can be parent
  • Controller Stack
    • Nested states use several controllers
    • Controller are executed in order
    • Only switching states
      controllers are called
    • Scope is child of the parent controller

Reuse parent controller and scope for optimization

Multiple Named Views


<body>
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</body>
            

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates, controllers, etc ... },
      'tabledata': { ... },
      'graph': { ... },
    }
  })

View targeting


$stateProvider
  .state('contacts.detail', {
    views: {
      // relatively targets the "info" view
      "info" : { /* ... */ }
      // relatively targets the unnamed view
      "" : { /* ... */ }
      // absolutely targets the "detail" view in parent
      "detail@contacts" : { /* ... */ }
      // absolutely targets the unnamed view in parent
      "@contacts" : { /* ... */ }
      // absolutely targets the "status" view in root
      "status@" : { /* ... */ }
      // absolutely targets the unnamed view in root
      "@" : { /* ... */ }
    });

About 0.0.2

Animations AngularJS 1.1.5+


<body>
  <div ui-view="filters" ng-animate="'fade'"></div>
</body>

Directive ui-sref


<ul>
  <li ng-repeat="contact in contacts">
    <a ui-sref="contacts.view({ id: contact.id })">
      {{ contact.name }}
    </a>
  </li>
</ul>

Demos

year of moo

http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html

GOBO

Good Old Back Office

THE END

THANKS !

QUESTIONS ?

http://github.com/Swiip/talk-ui-router

BY Matthieu Lux / @Swiip