Dive into AngularJS Routing
-
Upload
egor-miasnikov -
Category
Engineering
-
view
3.089 -
download
0
Transcript of Dive into AngularJS Routing
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