ui-router and $state

7,214 views

Published on

ui-router is a great replacement for ngRoute that allows you encapsulate your application's state in a single place.

Published in: Technology, Education
1 Comment
20 Likes
Statistics
Notes
No Downloads
Views
Total views
7,214
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
137
Comments
1
Likes
20
Embeds 0
No embeds

No notes for slide

ui-router and $state

  1. 1. ui-router and $state gabe scholz 👏👏👏😁
  2. 2. who has heard of ui-router? 📈
  3. 3. what is the role of a controller? 🎉🎈🎊 what is the role of a model?
  4. 4. ui-router > ngRoute ! using routing to control state agenda 😍
  5. 5. If you’re using ngRoute you might be hacking state into your application. 👎
  6. 6. routes views dependencies state bonus features
  7. 7. routes views dependencies state bonus features
  8. 8. routes views dependencies state bonus features
  9. 9. routes views dependencies state bonus features
  10. 10. routes views dependencies state bonus features
  11. 11. angular.module(‘app’, [‘ngRoute’, ‘ui.router’]) ! .config(function ($routeProvider, $stateProvider) { // DO SOME STUFF!👌 }); housekeeping 🏡
  12. 12. housekeeping 🏡 Presentation id: 1 Slide id: 6 presentation_id: 1 Slide id: 6 presentation_id: 1 Slide id: 6 presentation_id: 1 Slide id: 1,2,3,4 presentation_id: 1 /presentation/:presentation_id/show ! /presentation/:presentation_id/slide/:slide_id
  13. 13. $routeProvider .when(‘/presentation/:id/show’, { templateUrl: ‘presentation.tpl.html', controller: ‘PresentationCtrl’, … }); ! $stateProvider .state(‘presentation’, { url: ’/presentation/:id/show’, templateUrl: ‘presentation.tpl.html', controller: ‘PresentationCtrl’, … }); routes 🚗 routes views dependencies state bonus
  14. 14. $routeProvider .when(‘/presentation/:id/show’, { templateUrl: ‘presentation.tpl.html', controller: ‘PresentationCtrl’, … }) .when(‘/presentation/:id/slides/:slide_id’, { templateUrl: ‘presentationSlide.tpl.html’, controller: ‘PresentationSlideCtrl’, … }); routes 🚗 routes views dependencies state bonus
  15. 15. $stateProvider .state(‘presentation’, { url: ’/presentation/:id’, templateUrl: ‘presentation.tpl.html', … }) .state(‘presentation.show’, { url: ’/show’, templateUrl: ‘presentationShow.tpl.html', controller: ‘PresentationCtrl’, … }) .state(‘presentation.slide’, { url: ‘/slide/:slide_id’, templateUrl: ‘presentationSlide.tpl.html’, controller: ‘PresentationSlideCtrl’, … }); routes 🚗 routes views dependencies state bonus
  16. 16. views 📺 presentation.tpl.html presentationSlide.tpl.html <div ng-view></div><div ng-view></div> routes views dependencies state bonus
  17. 17. views 📺 presentation.tpl.html ! $stateProvider .state(‘presentation’, { url: ’/presentation/:id’, templateUrl: ‘presentation.tpl.html’, … }); <div ui-view></div> <div ui-view></div> <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  18. 18. views 📺 presentation.tpl.html ! $stateProvider .state(‘presentation.slide’, { url: ‘/slide/:slide_id’, controller: … templateUrl: ‘presentationSlide.tpl.html’ … }); <div ui-view></div> presentationSlide.tpl.html <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  19. 19. views 📺 presentation.tpl.html ! $stateProvider .state(‘presentation’, { url: ’/presentation/:id’, controller: … templateUrl: ‘presentation.tpl.html’, … }); <div ui-view></div> <div ui-view=‘sideBar’></div> <div ui-view=‘mainContent’></div> <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  20. 20. presentation.tpl.html ! views 📺 mainContentsideBar $stateProvider .state(‘presentation.slide’, { url: ’/slide/:slide_id’, views: { ??? }, … }); <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  21. 21. views 📺 $stateProvider .state(‘presentation.slide’, { url: ’/slide/:slide_id’, views: { sideBar: { controller: … templateUrl: ‘sideBar.tpl.html’ } }, … }); presentation.tpl.html ! mainContent sideBar. tpl.html <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  22. 22. views 📺 $stateProvider .state(‘presentation.slide’, { url: ’/slide/:slide_id’, views: { sideBar: { controller: … templateUrl: ‘sideBar.tpl.html’ }, mainContent: { controller: … templateUrl: ‘mainContent.tpl.html’ } }, … }) presentation.tpl.html ! mainContent.tpl.html sideBar. tpl.html <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  23. 23. views 📺 $stateProvider .state(‘presentation.show’, { url: ’/show’, views: { sideBar: { template: ‘’ }, mainContent: { controller: … templateUrl: ‘showContent.tpl.html’ } }, … }); presentation.tpl.html ! showContent.tpl.html <div class=‘titleBar’>…</div> <div ui-view></div> routes views dependencies state bonus
  24. 24. $routeProvider .when(‘/presentation/:id/show’, { … resolve: { presentation: function ($routeParams, PresentationApi) { return PresentationApi.get($routeParams.id); } } }); ! $stateProvider .state(‘presentation’ { url: ‘presentation/:id’, … resolve: { presentation: function ($stateParams, PresentationApi) { return PresentationApi.get($stateParams.id); } } }); dependencies 👶 routes views dependencies state bonus
  25. 25. angular.module(‘app’, [‘ngRoute’]) ! .config(function ($routeProvider) { $routeProvider .when(‘/presentation/:id/show’, { … resolve: { presentation: function ($routeParams, PresentationApi) { return PresentationApi.get($routeParams.id); } } }); }) ! .controller(‘PresentationCtrl’, function ($scope, presentation) { $scope.presentation = presentation; }); resolve aside 👯 routes views dependencies state bonus
  26. 26. angular.module(‘app’, [‘ngRoute’]) ! .config(function($routeProvider) { $routeProvider .when(‘/presentation/:id/show’, { … resolve: { presentation: function ($routeParams, PresentationApi) { return PresentationApi.get($routeParams.id); } } }) .when(‘/presentation/:id/slides/:slide_id’, { … resolve: { presentation: function ($routeParams, PresentationApi) { return PresentationApi.get($routeParams.id); } slide: … ??? } }); }); ! .controller(‘PresentationSlideCtrl’, function ($scope, slide) { $scope.slide = slide; }); dependencies 👶 routes views dependencies state bonus
  27. 27. angular.module(‘app’, [‘ngRoute’]) ! .controller(‘PresentationSlideCtrl’, function ($scope, slide) { $scope.slide = slide; }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams) { $scope.slide = SlideApi.get($routeParams.slide_id); }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams, presentation) { $scope.slide = presentation.getSlideById($routeParams.slide_id); }); dependencies 👶 routes views dependencies state bonus
  28. 28. angular.module(‘app’, [‘ngRoute’]) ! .controller(‘PresentationSlideCtrl’, function ($scope, slide) { $scope.slide = slide; }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams) { $scope.slide = SlideApi.get($routeParams.slide_id); }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams, presentation) { $scope.slide = presentation.getSlideById($routeParams.slide_id); }); dependencies 👶 routes views dependencies state bonus
  29. 29. angular.module(‘app’, [‘ngRoute’]) ! .controller(‘PresentationSlideCtrl’, function ($scope, slide) { $scope.slide = slide; }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams) { $scope.slide = SlideApi.get($routeParams.slide_id); }); ! .controller(‘PresentationSlideCtrl’, function ($scope, $routeParams, presentation) { $scope.slide = presentation.getSlideById($routeParams.slide_id); }); dependencies 👶 routes views dependencies state bonus
  30. 30. $stateProvider .state(‘presentation’, { … resolve: { presentation: function ($stateParams, PresentationApi) { return PresentationApi.get($stateParams.id); } } }) .state(‘presentation.slide’, { … resolve: { slide: function ($stateParams, presentation) { return presentation.getSlideById($stateParams); } } }); dependencies 👶 routes views dependencies state bonus
  31. 31. “state”?😒 routes views dependencies state bonus
  32. 32. $stateProvider .state(‘presentation’, { … controller: function ($scope, presentation) { $scope.presentation = presentation; }, resolve: { presentation: function (…) { PresentationApi.get($stateParams.id); } } }) .state(‘presentation.slide’, {…}) .state(‘presentation.edit’, {…}) .state(‘presentation.show’, {…}); routes views dependencies state bonus
  33. 33. $state.go(‘presentation.slide.show’, { id: 1, slide_id: 2}); ! $state.go(‘user.delete’, {id: 42}); ! $state.go(‘.edit’); routes views dependencies state bonus
  34. 34. $stateProvider .state(‘presentation’, { abstract: true, … }) .state(‘presentation.slide’, { abstract: true, … }) .state(‘presentation.edit’, {…}) .state(‘presentation.show’, {…}) .state(‘presentation.slide.edit’, {…}) .state(‘presentation.slide.show’, {…}); bonus features 🍰 routes views dependencies state bonus
  35. 35. $state .state abstract: true … }) .state abstract: true … }) .state .state .state .state bonus features 🍰 www.medium.com/@gabescholz routes views dependencies state bonus
  36. 36. angular.module(‘app’, [‘ui.router’]) ! .config(function ($stateProvider) { $stateProvider .state(‘presentation.edit’, { data: { permissions: { admin: true } }, … }); }) ! .run(function ($rootScope, $state) { var currentUser = $rootScope.currentUser; ! $rootScope.$on(‘$stateChangeStart’, function (…) { if (toState.data.permissions.admin && !currentUser.admin) { event.preventDefault(); $state.go(‘home’); } }); }); bonus features 🍰 routes views dependencies state bonus
  37. 37. <a ui-sref=“^.slide({slide_id: (slide.id + 1)})”> Next Slide </a> ! <a ui-sref=“^.slide({slide_id: (slide.id - 1)})”> Previous Slide </a> bonus features 🍰 routes views dependencies state bonus
  38. 38. 👏😁thanks

×