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

1. ui-router and $state
gabe scholz
👏👏👏😁

2. who has heard of ui-router?
📈

3. what is the role of a controller?
🎉🎈🎊
what is the role of a model?

4. ui-router > ngRoute
!
using routing to control state
agenda 😍

5. If you’re using ngRoute
you might be hacking state
into your application.
👎

6. routes
views
dependencies
state
bonus features

7. routes
views
dependencies
state
bonus features

8. routes
views
dependencies
state
bonus features

9. routes
views
dependencies
state
bonus features

10. routes
views
dependencies
state
bonus features

11. angular.module(‘app’, [‘ngRoute’, ‘ui.router’])
!
.config(function ($routeProvider, $stateProvider)
{
// DO SOME STUFF!👌
});
housekeeping 🏡

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. $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. $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. $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. views 📺
presentation.tpl.html presentationSlide.tpl.html
<div ng-view></div><div ng-view></div>
routes views dependencies state bonus

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. 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. 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. 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. 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. 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. 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. $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. 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. 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. 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. 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. 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. $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. “state”?😒
routes views dependencies state bonus

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. $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. $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. $state
.state
abstract: true
…
})
.state
abstract: true
…
})
.state
.state
.state
.state
bonus features 🍰
www.medium.com/@gabescholz
routes views dependencies state bonus

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. <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. 👏😁thanks