UI-Router

UI-Router
The 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 ngRoute
angular.module('helloApp').config(function($stateProvider) {
url: '/login',
})
});
angular.module('helloApp').config(function($routeProvider) {
$routeProvider.when('/login', {
})
});

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',
});
});

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 Callbacks
$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

• uiSref is UI-Router’s ngHref
$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>

• 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 Views
url: '/login',
views: {
'header': { templateUrl: 'views/unauth-header.html' },
'sideNav': { templateUrl: 'views/unauth-sidenav.html' },
'content': { templateUrl: 'views/login.html' }
}
});
});

Resolve & Controllers
$stateProvider.state('app.acount', {
resolve: {
account: function ($http, $stateParams) {
return $http.get('/api/account/' + $stateParams.id);
}
},
controller: function (account) { … }
controller: 'AccountController'
controller: ‘AccountController as account'
});
});

Nested Resolve & Controllers
$stateProvider.state('account', {
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

UI-Router

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to UI-Router (20)

Recently uploaded (20)

UI-Router