1. AngularJS/:Routing
Egor Miasnikov

2. AngularJS/:Routing/:AGENDA
1. What is routing?
2. What is SPA?
3. AngularJS Routing
4. Examples
5. Questions

3. AngularJS/:Routing/:WhatIsRouting
What is routing?

4. AngularJS/:Routing/:WhatIsRouting

5. AngularJS/:Routing/:WhatIsSPA
What is SPA?

7. AngularJS/:Routing/:WhatIsSPA

8. AngularJS/:Routing/:NeedToKnow
• App.config
• $routeProvider
•Ng-view
• Params
• Events
• Resolve

9. AngularJS/:Routing/:API
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: ‘app.html',
controller: ‘AppCtrl‘
});
$routeProvider.otherwise({redirectTo: '/'});
});

10. AngularJS/:Routing/:WrongWay
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope, $route){
$route.routes["/"] = {
templateUrl: "app.html",
controller: "AppCtrl"
})

11. AngularJS/:Routing/:Directive
<div>
<ng-view></ng-view>
</div>

12. AngularJS/:Routing/:Params
app.config(function ($routeProvider) {
$routeProvider.when('/:message',{
templateUrl: "app.html",
controller: "AppCtrl"
})
});

13. AngularJS/:Routing/:Params
app.controller("AppCtrl", function ($scope, $routeParams) {
$scope.message: $routeParams.message
}
});

14. AngularJS/:Routing/:Events
$rootScope.$on(‘$routeChangeStart’, function(){})
$rootScope.$on(‘$routeChangeSuccess’, function(){})
$rootScope.$on(‘$routeChangeError’, function(){})
$rootScope.$on(‘$routeUpdate’, function(){})

15. AngularJS/:Routing/:Resolve
$routeProvider.when('/', {
….
resolve: {
app: function ($q) {
var defer = $q.defer;
defer.resolve();
return defer.promise;
}
….

16. AngularJS/:Routing/:Example
https://git.epam.com/epm-uii/blob/idea/idea/scripts/app.js

17. AngularJS/:Routing/:Questions