This document discusses Angular routing and the Angular route service. It explains how to configure routes using the $routeProvider to map URLs to templates and controllers. Key events like $routeChangeStart, $routeChangeSuccess are described. Guidelines are provided for defining route objects with properties like templateUrl, controller, and redirectTo.

2. The history
work with
'#‘ URL
'#' - The right
side is SPA URL

4. $locationProvider.html5Mode(true).hashPrefix('!');

5. <script src="angular.js"></script>
<script src="angular-route.js"></script>
var myApp = angular.module('myApp', ['ngRoute']);
Main Toolbar
href="#/news"
Sub Toolbar
ng-view
ng-view
ng-view

6. var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/view2/:viewId',
{
Routing Object
templateUrl: 'View2.html',
controller : 'viewCtrl'
})
.otherwise({ redirectTo: '/' });
});

7. <a href="#/viewURL">Action Name</a>
OR
$location.path('#/viewURL');
$locationChangeStart
href="#/news"
$location
Sub Toolbar
$routeProvider
$routeChangeStart
$route
Route
object
Route
ng-view
object
$viewContentLoaded

8. $locationChangeStart
$routeChangeStart
$routeChangeError
$routeUpdate
$routeChangeSuccess

9. var myApp = angular.module('myApp', ['ngRoute']);
Routing Object
myApp.config(function ($routeProvider) {
$routeProvider
 Controller or controllerAs
.when('/view2/:viewId',
 Template or TemplateUrl
{
templateUrl:
 Resolve
'View2.html',
controller : 'viewCtrl'
})
 RedirectTo
});
.otherwise({ redirectTo: '/' });
 [reloadOnSearch=true]
 [caseInsensitiveMatch=false]

12. $rootScope.$on('$locationChangeStart',
function (event, next, current) {
var result = $window.confirm('Continue?');
if (!result) {
event.preventDefault();
return;
}
});
View I
View II