ui-router
DESCRIPTION
UI-Router in AngularJS projectsTRANSCRIPT
UI-RouterThe hero we need…
Loc Nguyen
• 6:30 - 7:00 – Food and networking
• 7:00 - 7:05 – Announcements, LoanNow intro
• 7:05 - 7:30 – Restangular Lightning Talk
• 7:30 - 8:15 – UI-Router
• 8:15 - 8:25 – Wrap up and raffle
<ng-selfie />• Multi-platform SW engineering geek =>
Java, Ruby, JavaScript, C#, Node
• ~1.5 years of AngularJS experience => mostly freelancing
• Preferred Ember at first!
• Speaking at OC Java UG in October
ngRoute :-(• Transitions by URL
• Work-arounds to handle nested views
• Directives
• ngInclude
• ngSwitch
UI-Router (>^_^)>• Transitions by state rather then by URL
• Define and design states your application can be in
• Nested states!
States• Not all states need a URL, e.g. a modal, section
expansion
• Can configure in any order
• Can configure across modules
Nested States• Can configure child states before parents
• A child state and its ancestors are active
• Inherit parent dependencies using the resolve map
UI-Router Services• $stateProvider – define state transitions
• $state – transition to another state, check what the current state is
• $stateParams – get route and query parameter values for the current state
Simple State Configuration
angular.module('helloApp').config(function($stateProvider) {$stateProvider.state('login', {
url: '/login',templateUrl: 'views/login.html'
})});
Diff with ngRouteangular.module('helloApp').config(function($stateProvider) {
$stateProvider.state('login', {url: '/login',templateUrl: 'views/login.html'
})});
angular.module('helloApp').config(function($routeProvider) {$routeProvider.when('/login', {
templateUrl: 'views/login.html'})
});
Nested State Configuration
angular.module('helloApp').config(function ($stateProvider) {
$stateProvider.state('app', {template: '<html><body><header>you fancy</header>' +
'<ui-view></ui-view></body></html>'}).state('app.login', {
url: '/login',templateUrl: 'views/login.html'
});});
Transitioning States$state.go('login');
angular.module('sampleApp').config(function ($stateProvider) {$stateProvider.state('acount', {
url: '/account/:id?showDetails',templateUrl: 'views/account.html'
});});
$state.go('account', { id: 47, showDetails: true });
In & Out Callbacksangular.module('sampleApp').config(function ($stateProvider) {
$stateProvider.state('app.acount', {url: '/account/:id',templateUrl: 'views/account.html',onEnter: function () {
console.log('Google Analytics, open modal etc');},onExit: function () {
console.log('clean up, animate etc');}
});});
UI-Router Directives• uiSref – declarative link to a state
• uiSrefActive – adds CSS classes when a state is active
• uiView – where to place the state template
UI-Router Directives• uiSref is UI-Router’s ngHref
angular.module('sampleApp').config(function ($stateProvider) {$stateProvider.state('acount', {
url: '/account/:id?showDetails',templateUrl: 'views/account.html'
});});
<a ui-sref="login">Login</a>
<a ui-sref="account({ id: 47, showDetails: true })">Account</a>
UI-Router Directives• uiView is UI-Router’s version of ngView
• Tells UI-Router where to inject our views
• Supports named views
<html><body>
<header></header><ui-view></ui-view>
</body></html>
Named Views• More than one uiView in a template
• Flexible and dynamic layouts
<html><body>
<ui-view="header"></ui-view><ui-view="sideNav"></ui-view><ui-view="mainContent"></ui-view>
</body></html>
Named Viewsangular.module('sampleApp').config(function ($stateProvider) {
$stateProvider.state('login', {url: '/login',views: {
'header': { templateUrl: 'views/unauth-header.html' },'sideNav': { templateUrl: 'views/unauth-sidenav.html' },'content': { templateUrl: 'views/login.html' }
}});
});
Resolve & Controllersangular.module('sampleApp').config(function ($stateProvider) {
$stateProvider.state('app.acount', {url: '/account/:id',templateUrl: 'views/account.html',resolve: {
account: function ($http, $stateParams) {return $http.get('/api/account/' + $stateParams.id);
}},controller: function (account) { … }controller: 'AccountController'controller: ‘AccountController as account'
});});
Nested Resolve & Controllers
angular.module('sampleApp').config(function ($stateProvider) {$stateProvider.state('account', {
url: '/account/:id',templateUrl: 'views/account.html',resolve: {
account: function ($http, $stateParams) { … }}
}).state('account.details', {
controller: function (account, DetailService) { … }});
});
And more…• Regex parameters:
url: “/contacts/{contactId:[0-9]{1,8}}"
• $urlRouterProvider – watches $location and matches against URL configurations
Resources• Egghead.io UI-Router Cheat sheet:
http://goo.gl/ZcL0dv
• UI-Router at CincyNG meetup:https://www.youtube.com/watch?v=lBqiZSemrqg
• UI-Router extras:https://github.com/christopherthielen/ui-router-extras
Didn't win? Get a HUGE discount on the course by visiting:
http://tinyurl.com/AngularJSJumpstart
