AngularJS and Routing
Why Routing?
Old Web
URL Change
Browser Takes Over
New Web
URL Change
EcmaScript Takes Over
Single Page Applications
Mirror the Desktop
First SPA Framework?
GWT? (2006)
Angular (2009)
Backbone (2010)
Knockout (2010)
Ember (2011)
Meteor (2012)
Durandal (2012)
React (2013)
Requirements for SPA
EcmaScript
HTTP Requests
AJAX or HTML5 Websockets
DOM Manipulation
HTML5 History API
Our Sample Application
Behavior Reporting
Tour
How does Angular do routing?
Routing is modular
ng-route module
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
angular.module( 'myApp', ['ngRoute'] );
</script>Providers
$routeProvider
Services
$route
$routeParams
Directives
ngView
URL driven
$routeProvider.when( '/manage', {
templateUrl : 'views/manage.html',
controller : 'ManageCtrl',
resolve : {
groups : ['appService', function ( appService ) {
return appService.getGroups();
}]
}
} )Resolves are work done before view
ng-route events
$routeUpdate
$routeChangeSuccess
$routeChangeStart
$routeChangeError
Activate a route
<a href="#/manage">Back</a>
<a ng-href="#/manage/{{group.id}}">Item 5</a>function($location) {
$location.url( '#/manage' )
}Content container
<!-- index.html -->
<html>
<head>...</head>
<body>
<header>...</header>
<div id="main">
<div ng-view></div>
</div>
<footer>...</footer>
</body>
</html>
ng-route
under the covers
Happy Path
- Detect change to browser's url
- Match new URL to config or rule
- Broadcast $routeChangeStart event
- Resolve all promises (wait)
- Instantiate controller
- Load view template
- Parse template -> dom
- Update ngView with new dom
- Broadcast $routeChangeSuccess event
Live Code
Issues with ng-route?
The initial Angular router was designed to handle just a few simple cases. As Angular grew, we've slowly added more features. However, the underlying design is ill-suited to be extended much further.
It's very easy for developers to write apps that ignore URLs and break the back button with Angular. Angular should make it easier for developers to create apps with deeplinking.
Weaknesses
- Doesn't support nested nor sibling views
- "resolve" option in route config feels misplaced
- Uses hrefs to navigate
- Can't instantiate a controller without a template
Angular 2.0 Router Design Document
http://goo.gl/zO5ZGz
ui-router module
improvement?
The ui-router library is one of the most useful that the AngularUI library gives us. It’s a routing framework that allows us to organize our interface by a state machine, rather than a simple URL route.
-- ng-newsletter (http://goo.gl/HrNqQO)
uiRouter is an alternative router for AngularJS v1.0. Instead of configuring a list of routes, you configure states. It's popular in the open source world, and solves a lot of the same problems we're aiming to solve in Angular 2.0's router.
-- Angular 2.0 Router Design Document
<script src="angular.js"></script>
<script src="angular-ui-router.js"></script>
<script>
angular.module( 'myApp', ['ui.router'] );
</script>Providers
$urlRouterProvider
$stateProvider
$uiViewScrollProvider
Services
$urlRouter
$state
$uiViewScroll
$view
Directives
ui-view
ui-sref
ui-sref-active
ui-sref-active-eq
Filters
includedByState
isState
State driven
State machine
$stateProvider.state( 'app.manage.groups', {
url : '^/manage',
views : {
'content' : {
templateUrl : 'views/manage-groups.html',
controllerAs : 'manageGroups',
controller : 'ManageGroupsCtrl'
}
}
} )Design your states
Hierarchical State
If you want
Yes, you want
Resolve Inheritance
Data Inheritance
Maintainable Views
ui-router Events
$stateChangeStart
$stateNotFound
$stateChangeSuccess
$stateChangeError
$viewContentLoading
$viewContentLoaded
State Activation
<a ui-sref="app.manage.groups">Manage</a>
<a ui-sref="app.manage.members({id: group.id})">Edit</a>function( $state ) {
$state.go( 'app.manage.groups' );
}