My talk on uiRouter from the October ngNYC meetup. http://www.meetup.com/ng-nyc

1. ARCHITECTURE, AUTH, AND ROUTING WITH UIROUTER
chris caplinger
ccaplinger@neosavvy.com
@unicode_snowman

2. WHAT IS UIROUTER?
“AngularUI Router is a routing framework for
AngularJS, which allows you to organize the
parts of your interface into a state machine.
Unlike the $route service in the Angular ngRoute
module, which is organized around URL routes,
UI-Router is organized around states, which may
optionally be associated with URLs.”

3. WHY A ROUTER IN GENERAL?
Associates Routes/URLs with application state
i.e. views and their associated controllers and models

4. “When we wrote the original router it was, to our
imagination, pretty cool... except it was vastly
inadequate for a large number of use cases.”

5. NGROUTE SHORTCOMINGS
only one ngView
encourages ngShow/ngHide/ngIf/ngSwitch abuse
nested templates in nested templates in nested templates... in nested templates..
...overall, painful with larger apps

7. SO WHAT'S DIFFERENT ABOUT UIROUTER?

8. STATE STATE STATE
“...an abstract machine that can be in one of a
finite number of states. The machine is in only
one state at a time... It can transition from one
state to another by a triggering event or
condition; A particular FSM is defined by a list of
its states, and the triggering condition for each
transition.”

9. YOUR APP IS ALREADY STATEFUL!

10. angular.module('MyApp').config(function ($stateProvider) {
$stateProvider
.state({
name: 'home',
url: '/',
templateUrl: '/where/is/my/home/template-ptl.html',
controller: 'HomeController',
resolve: { /* get some data! */ }
})
.state({
name: 'items',
url: '/items',
templateUrl: '/where/is/my/template-ptl.html',
controller: 'ItemsController',
resolve: {
items: function (Item) {
return Item.all();
}
}
});
<}!)-;- somewhere else, likely index.html -->
<ui-view></ui-view>

11. $STATE
// navigate to /home state
$state.go('home')
// navigate to /items state
$state.go('items')

12. <a ui-sref="items">Check Out These Items</a>

13. NESTED VIEWS
$stateProvider
.state({
name: 'items',
url: '/items', // navigate to /items
templateUrl: '/my/item/template-ptl.html',
})
.state({
name: 'items.detail',
url: '/:id', // navigate to /items/123 because items.detail is a child state of items
templateUrl: 'my/item/detail/template-ptl.html',
controller: 'ItemController',
resolve: {
item: function (Items, $stateParams) {
return Items.find($stateParams.id);
}
}
});

14. <!-- index.html -->
<ui-view></ui-view>
<!-- my/item/template-ptl.html -->
<ui-view></ui-view>

15. // get there with...
$state.go('items.detail', { id: 123 });
// or relative...
$state.go('.detail', { id: 123 });
<!-- or via a link... -->
<a ui-sref=".detail({ id: 123 })">Item 123</a>

16. DEMO TIME
STEP-BY-STEP FLOW!

17. NAMED VIEWS

18. $stateProvider
.state({
name: 'someParent',
url: '/parent',
views: {
'layoutA': {
templateUrl: '/layout-a.html'
},
'content1@someParent': {
templateUrl: 'content-1.html'
},
'content2@someParent': {
templateUrl: 'content-2A.html'
}
}
})
.state({
name: 'someParent.child',
url: '/:id',
views: {
<!-- index.html -->
<ui-view name="layoutA"></ui-view>
<!-- layout-a.html -->
<div>
'content2@someParent': {
templateUrl: 'content-2B.html'
}
<ui-view name="content1"></ui-view>
}
</div>
<div>
});
<ui-view name="content2"></ui-view>
</div>

19. THE RETURN OF DEMO
TIME
NAMED VIEWS!

20. AUTHORIZATION AND REDIRECTION

21. OBLIGATORY OBVIOUS
THING
CLIENT-SIDE AUTH AIN'T NO THING
server side is where the magic happens
this is really about UX

22. $STATECHANGE* EVENTS
angular.app('MyApp').run(function ($rootScope, $state) {
$rootScope.$on('$stateChangeError', function (e, toState, toParams, fromState, fromParams, if (error.status == 401) {
$state.go('login');
} else {
// other error types, 404, 500
// maybe a redirect, maybe not
}
});
});

23. angular.app('MyApp').run(function ($rootScope, $state, AuthService, User) {
$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams, if (toState.data.checkAuth && !User.isAuthorized) {
e.preventDefault();
AuthService.doAsyncThing().then(function (res) {
$state.go(toState, toParams, { notify: false }).then(function () {
$rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState
});
}).catch(function (err) {
// do something here, redirect, or let your $stateChangeError handler catch })
}
});
});

24. OTHER THOUGHTS ON REDIRECTION
decorate $state.transitionTo for finer-grained control (a bit
hackier than I'd like, but it works)
$stateChangeError redirection from navigating directly to a
URL, need to replace entry

25. QUESTIONS, COMMENTS, CONCERNS?
chris caplinger
ccaplinger@neosavvy.com
@unicode_snowman