angularjs routing
DESCRIPTION
AngularJS RoutingTRANSCRIPT
![Page 1: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/1.jpg)
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual
C#blog: www.eVardi.com
AngularJS Routing
![Page 2: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/2.jpg)
'#' - The right side is
SPA URL
The history
work with '#‘ URL
ng-view
ng-include
![Page 3: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/3.jpg)
$location The $location service parses the URL in the browser address
bar and makes the URL available to your application.
![Page 4: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/4.jpg)
$location Service Configuration To configure the $location service,
retrieve the $locationProvider and set the parameters as follows:
html5Mode(mode): {boolean} true - see HTML5 mode false - see Hashbang mode (default: false)
hashPrefix(prefix): {string} prefix used for Hashbang URLs (used in
Hashbang mode or in legacy browser in Html5 mode)
default: ""$locationProvider.html5Mode(true).hashPrefix('!'
);
![Page 5: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/5.jpg)
Installation<script src="angular.js"></script><script src="angular-route.js"></script>
var myApp = angular.module('myApp', ['ngRoute']);
ng-view
href="#/news"
Sub To
olb
ar
Main Toolbar
ng-viewng-view
http://www.e4d.co.il/#/home
![Page 6: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/6.jpg)
$routeProvider Used for configuring routes.
var myApp = angular.module('myApp', ['ngRoute']);myApp.config(function ($routeProvider) { $routeProvider .when('/view2/:viewId',
{ templateUrl: 'View2.html', controller : 'viewCtrl' })
.otherwise({ redirectTo: '/' });});
Routing Object
![Page 7: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/7.jpg)
ng-view
Routing Flow
<a href="#/viewURL">Action Name</a>
$location.path('#/viewURL');
OR
href="#/news"
Sub To
olb
ar
Routeobject
$location
$routeProvider
$route
$locationChangeStart
$routeChangeStart
$routeChangeSuccess
Routeobject
$viewContentLoaded
![Page 8: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/8.jpg)
Routing Broadcasted Events
$locationChangeSt
art
$routeChangeStart
$routeChangeSucc
ess
$routeChangeError
$routeUpdat
e
![Page 9: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/9.jpg)
Route Object Used for configuring routes.
var myApp = angular.module('myApp', ['ngRoute']);myApp.config(function ($routeProvider) { $routeProvider .when('/view2/:viewId',
{ templateUrl: 'View2.html', controller : 'viewCtrl' })
.otherwise({ redirectTo: '/' });});
Routing Object
Controller or controllerAs
Template or TemplateUrl
Resolve
RedirectTo
[reloadOnSearch=true]
[caseInsensitiveMatch=false
]
![Page 10: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/10.jpg)
Routing in SPA
![Page 11: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/11.jpg)
Resolve Option An optional map of dependencies which
should be injected into the controller. If any of these dependencies are promises,
the router will wait for them all to be resolved or one to be rejected before the controller is instantiated.
Success : all the promises are resolved successfully.
Error: any of the promises are rejected.
![Page 12: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/12.jpg)
View I
Cancelling Route Changes$rootScope.$on('$locationChangeStart',
function (event, next, current) { var result = $window.confirm('Continue?'); if (!result) { event.preventDefault(); return; } });
View II
Cancel
OK
![Page 13: AngularJS Routing](https://reader036.vdocuments.us/reader036/viewer/2022082221/554f4e6cb4c905524c8b4c85/html5/thumbnails/13.jpg)
Thankseyalvardi.wordpress.com
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual C#blog: www.e4d.co.il