is it possible to cancel the route change ?

While going away from page on click of any link, there could be a confirmation box on navigating away from a route.

We can handle (by confirmation) the cancelling of route change using $scope.$on function with event $routeChangeStart or $locationChangeStart and an Event handler function with :

• Event object
• Next route, where to navigate
• Current route, where to stay on cancel

app.controller("studentController", function ($route, $http, $scope) {
   $scope.$on("$routeChangeStart", function (event, next, current) {
       if(!confirm("Are you confirm to go away from this page ?")) {
           event.preventDefault();
       } 
   })
 
   var curr = this;
   curr.reloadData = function() {
      $route.reload();
   }
   $http.get("service/api/GetAllStudents").then(
     function(response) {
        curr.students = response.data;
     }
   )
});


How to use the current route paths in confirmation box ?
next.$$route.originalPath WITH $routeChangeStart
Example
if(!confirm("Are you confirm to go away to page: " + next.$$route.originalPath)) {
    event.preventDefault();
}
Output
Are you confirm to go away to page: /home


next WITH $locationChangeStart
Example
if(!confirm("Are you confirm to go away to page: " + next)) {
    event.preventDefault();
}
Output
Are you confirm to go away to page: http://localhost:8080/proj/home

How to handle the unavailable properties of controllers on the page ?

Handle unavailable properties

Check the property for undefined value and show the message using ng-show



JS
app.controller("helloController", function ($scope) {
   $scope.helloMessage = "Hello";
       $scope.rootMessage = "Welcome";
});

HTML
<div ng-controller="helloController"> 
    Root message : {{ rootMessage }}  <br/>
    Hello message : {{ helloMessage }}  <br/>
    Bye message :
       <span style="color:red" ng-show="byeMessage == undefined">
           Bye message is undefined.
       </span>
</div>





Output
Root message : Welcome
Hello message : Hello
Bye message : Bye message is undefined.

$scope vs. $rootScope

$rootScope is available globally for all the controllers.
$scope is available for a controller and its children.

JS
app.controller("helloController", function ($scope) {
   $scope.helloMessage = "Hello";
       $scope.rootMessage = "Welcome";
});

app.controller("byeController", function ($scope) {
   $scope.byeMessage = ""Bye, See you";
});



HTML
<div ng-controller="helloController"> 
    Root message : {{ rootMessage }}  <br/>
    Hello message : {{ helloMessage }}  <br/>
    Bye message : {{ byeMessage }}
</div>
 
<div ng-controller="byeController">
    Root message : {{ rootMessage }}  <br/>
    Hello message : {{ helloMessage }}  <br/>
    Bye message : {{ byeMessage }}
 </div>

Output
Root message : Welcome
Hello message : Hello
Bye message :

Root message : Welcome
Hello message :
Bye message : Bye, See you


Handle unavailable properties


Check the property for undefined value and show the message using ng-show
 
<div ng-controller="helloController"> 
    Root message : {{ rootMessage }}  <br/>
    Hello message : {{ helloMessage }}  <br/>
    Bye message :
       <span style="color:red" ng-show="byeMessage == undefined">
           Bye message is undefined.
       </span>
</div>


Output
Root message : Welcome
Hello message : Hello
Bye message : Bye message is undefined.

How to reload the current route instead of entire app ?

Overhead with Page refresh
The route displayed currently can be populated with latest data (if there are frequent changes in backend/DB) using Page refresh (F5)
But it will also reload all the resources - JS, css etc.

Better way is to use $route.reload() method to reload specific route.


$route.reload()
JS (Add a function to reload the route)

app.controller("homeController", function ($scope) {
   this.message = "Welcome to Home page";
});

app.controller("trainingController", function ($scope) {
   this.trainings = ["AngularJS", "HTML", "CSS", "Javascript"];
});

app.controller("studentController", function ($route, $http) {
   var curr = this;
   curr.reloadData = function() {
      $route.reload();
   }

   $http.get("service/api/GetAllStudents").then(
     function(response) {
        curr.students = response.data;
     }
   )
});


TEMPLATE (Add a button on template to reload the route)
students.html
<h1>Student List</h1>
<ul>
   <li ng-repeat="student in studentCrtl.students">
        <a href="students/{{student.id}}">
            {{ student.name }}
       </a>
   </li>
</ul>

<button ng-click="studentCrtl.reloadData()">Reload data</button>

template vs. templateUrl

• templateUrl property of the route is used to specify HTML file to load HTML content
• template property of the route is used to specify inline HTML

EXAMPLE 1. TEMPLATE URL
 
var app = angular.module("module1", ["ngRoute"]);

app.config( function ($routeProvider) {
   $routeProvider
   .when("/home", {
      templateUrl: "templates/home.html",
      controller: "homeController",
      controllerAs: "homeCtrl"
    })
   ...
 
});



EXAMPLE 2. INLINE TEMPLATE
 
var app = angular.module("module1", ["ngRoute"]);

app.config( function ($routeProvider) {
   $routeProvider
   .when("/home", {
      template: "<h1>Hello, I am inline text</h1>",
      controller: "homeController",
      controllerAs: "homeCtrl"
    })
   ...
 
});

is it possible to define case-insensitive paths in Routes ?

Yes !
  1. For single route, Set property caseInsensitiveMatch : true
  2. For all the routes, Set $routeProvider.caseInsensitiveMatch = true


EXAMPLE 1
var app = angular.module("module1", ["ngRoute"]);

app.config( function ($routeProvider) {
   $routeProvider
   .when("/home", {
      templateUrl: "templates/home.html",
      controller: "homeController",
      controllerAs: "homeCtrl"
      caseInsensitiveMatch: true
   })
   .when("/trainings", {
      templateUrl: "templates/trainings.html",
      controller: "trainingController",
      controllerAs: "trainingCtrl"
    })
   .when("/students", {
      templateUrl: "templates/students.html",
      controller: "studentController"      controllerAs: "studentCtrl"
    })
});


EXAMPLE 2
var app = angular.module("module1", ["ngRoute"]);

app.config( function ($routeProvider) {

   $routeProvider.caseInsensitiveMatch = true;

   $routeProvider
   .when("/home", {
      templateUrl: "templates/home.html",
      controller: "homeController",
      controllerAs: "homeCtrl"
   })
   .when("/trainings", {
      templateUrl: "templates/trainings.html",
      controller: "trainingController",
      controllerAs: "trainingCtrl"
    })
   .when("/students", {
      templateUrl: "templates/students.html",
      controller: "studentController"      controllerAs: "studentCtrl"
    })
});