Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual
C#blog: www.eVardi.com
AngularJS Routing
'#' - The right side is
SPA URL
The history
work with '#‘ URL
ng-view
ng-include
$location The $location service parses the URL in the browser address
bar and makes the URL available to your application.
$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('!'
);
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
$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
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
Routing Broadcasted Events
$locationChangeSt
art
$routeChangeStart
$routeChangeSucc
ess
$routeChangeError
$routeUpdat
e
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
]
Routing in SPA
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.
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
Thankseyalvardi.wordpress.com
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual C#blog: www.e4d.co.il