Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI-Router

3,286 views

Published on

UI-Router in AngularJS projects

Published in: Engineering
  • Be the first to comment

UI-Router

  1. 1. UI-Router The hero we need… Loc Nguyen
  2. 2. • 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
  3. 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. 4. ngRoute :-( • Transitions by URL • Work-arounds to handle nested views • Directives • ngInclude • ngSwitch
  5. 5. UI-Router (>^_^)> • Transitions by state rather then by URL • Define and design states your application can be in • Nested states!
  6. 6. States • Not all states need a URL, e.g. a modal, section expansion • Can configure in any order • Can configure across modules
  7. 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. 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
  9. 9. Simple State Configuration angular.module('helloApp').config(function($stateProvider) { $stateProvider.state('login', { url: '/login', templateUrl: 'views/login.html' }) });
  10. 10. Diff with ngRoute angular.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' }) });
  11. 11. 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' }); });
  12. 12. 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 });
  13. 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. 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
  15. 15. 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>
  16. 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. 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>
  18. 18. Named Views angular.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' } } }); });
  19. 19. Resolve & Controllers angular.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' }); });
  20. 20. 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) { … } }); });
  21. 21. And more… • Regex parameters: url: “/contacts/{contactId:[0-9]{1,8}}" • $urlRouterProvider – watches $location and matches against URL configurations
  22. 22. 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
  23. 23. Didn't win? Get a HUGE discount on the course by visiting: http://tinyurl.com/AngularJSJumpstart

×