ui-router and $state
DESCRIPTION
ui-router is a great replacement for ngRoute that allows you encapsulate your application's state in a single place.TRANSCRIPT
![Page 1: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/1.jpg)
ui-router and $state gabe scholz
šššš
![Page 2: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/2.jpg)
who has heard of ui-router? š
![Page 3: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/3.jpg)
what is the role of a controller? ššš
what is the role of a model?
![Page 4: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/4.jpg)
ui-router > ngRoute !
using routing to control state
agenda š
![Page 5: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/5.jpg)
If youāre using ngRoute you might be hacking state
into your application. š
![Page 6: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/6.jpg)
routes views
dependencies state
bonus features
![Page 7: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/7.jpg)
routes views
dependencies state
bonus features
![Page 8: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/8.jpg)
routes views
dependencies state
bonus features
![Page 9: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/9.jpg)
routes views
dependencies state
bonus features
![Page 10: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/10.jpg)
routes views
dependencies state
bonus features
![Page 11: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/11.jpg)
angular.module(āappā, [āngRouteā, āui.routerā]) !.config(function ($routeProvider, $stateProvider) { // DO SOME STUFF!š });
housekeeping š”
![Page 12: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/12.jpg)
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
![Page 13: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/13.jpg)
$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
![Page 14: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/14.jpg)
$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
![Page 15: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/15.jpg)
$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
![Page 16: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/16.jpg)
views šŗ
presentation.tpl.html presentationSlide.tpl.html
<div ng-view></div><div ng-view></div>
routes views dependencies state bonus
![Page 17: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/17.jpg)
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
![Page 18: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/18.jpg)
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
![Page 19: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/19.jpg)
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
![Page 20: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/20.jpg)
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
![Page 21: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/21.jpg)
views šŗ
$stateProvider .state(āpresentation.slideā, { url: ā/slide/:slide_idā, views: { sideBar: { controller: ā¦ templateUrl: āsideBar.tpl.htmlā } }, ā¦ });
presentation.tpl.html !
mainContentsideBar.tpl.html
<div class=ātitleBarā>ā¦</div>
<div ui-view></div>
routes views dependencies state bonus
![Page 22: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/22.jpg)
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.htmlsideBar.tpl.html
<div class=ātitleBarā>ā¦</div>
<div ui-view></div>
routes views dependencies state bonus
![Page 23: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/23.jpg)
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
![Page 24: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/24.jpg)
$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
![Page 25: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/25.jpg)
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
![Page 26: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/26.jpg)
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
![Page 27: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/27.jpg)
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
![Page 28: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/28.jpg)
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
![Page 29: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/29.jpg)
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
![Page 30: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/30.jpg)
$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
![Page 31: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/31.jpg)
āstateā?š
routes views dependencies state bonus
![Page 32: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/32.jpg)
$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
![Page 33: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/33.jpg)
$state.go(āpresentation.slide.showā, { id: 1, slide_id: 2}); !
$state.go(āuser.deleteā, {id: 42}); !
$state.go(ā.editā);
routes views dependencies state bonus
![Page 34: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/34.jpg)
$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
![Page 35: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/35.jpg)
$state.state abstract: true ā¦}) .state abstract: true ā¦}) .state.state.state.state
bonus features š°
www.medium.com/@gabescholz
routes views dependencies state bonus
![Page 36: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/36.jpg)
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
![Page 37: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/37.jpg)
<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
![Page 38: ui-router and $state](https://reader034.vdocuments.site/reader034/viewer/2022051514/54972493ac79592f2e8b5290/html5/thumbnails/38.jpg)
ššthanks