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