AngularJS/:Routing

Egor Miasnikov

AngularJS/:Routing/:AGENDA1.What is routing?2.What is SPA?3.AngularJS Routing4.Examples5.Questions

AngularJS/:Routing/:WhatIsRouting

What is routing?

AngularJS/:Routing/:WhatIsRouting

AngularJS/:Routing/:WhatIsSPA

What is SPA?

AngularJS/:Routing/:WhatIsSPA

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

AngularJS/:Routing/:APIapp.config(function($routeProvider) {

$routeProvider.when('/', {templateUrl: ‘app.html', controller: ‘AppCtrl‘

}); $routeProvider.otherwise({redirectTo: '/'}); });

AngularJS/:Routing/:WrongWay

var app = angular.module("app", []);app.controller("AppCtrl", function($scope, $route){

$route.routes["/"] = {templateUrl: "app.html",controller: "AppCtrl"

})

AngularJS/:Routing/:Directive

<div><ng-view></ng-view>

</div>

AngularJS/:Routing/:Params app.config(function ($routeProvider) {

$routeProvider.when('/:message',{templateUrl: "app.html",controller: "AppCtrl"

})});

AngularJS/:Routing/:Params

app.controller("AppCtrl", function ($scope, $routeParams) {

$scope.message: $routeParams.message

}});

AngularJS/:Routing/:Events

$rootScope.$on(‘$routeChangeStart’, function(){})$rootScope.$on(‘$routeChangeSuccess’, function(){})$rootScope.$on(‘$routeChangeError’, function(){})$rootScope.$on(‘$routeUpdate’, function(){})

AngularJS/:Routing/:Resolve $routeProvider.when('/', { …. resolve: {

app: function ($q) {var defer = $q.defer; defer.resolve();

return defer.promise;}

….

AngularJS/:Routing/:Example

https://git.epam.com/epm-uii/blob/idea/idea/scripts/app.js

AngularJS/:Routing/:Questions