UI-Router is a routing framework for AngularJS that allows defining application states and nested views. It handles routing based on states rather than URLs. States can be configured in any order and support nested views through named views. UI-Router provides services like $state and $stateParams to transition between states and retrieve parameters. It supports features like resolve blocks to load data, callbacks for state changes, and directives for links and views.
3. <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
4. ngRoute :-(
• Transitions by URL
• Work-arounds to handle nested views
• Directives
• ngInclude
• ngSwitch
5. UI-Router (>^_^)>
• Transitions by state rather then by URL
• Define and design states your application can be in
• Nested states!
6. States
• Not all states need a URL, e.g. a modal, section
expansion
• Can configure in any order
• Can configure across modules
7. Nested States
• Can configure child states before parents
• A child state and its ancestors are active
• Inherit parent dependencies using the resolve map
8. 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
13. In & Out Callbacks
angular.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');
}
});
});
14. 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
16. 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>
17. 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>