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"
    })
});

What to prefer : Controller Alias vs. $scope ?

Using Controller alias (Controller AS syntax)

• New technique in Angular 1
• No need to inject $scope object but internally uses $scope itself
• Makes code more readable

Using $scope

• Old technique in Angular 1
• Need to inject the $scope object in your controller definition

How to use properties of the nested Controllers ?

EXAMPLE

JS
app.controller("myController", function ($scope) {
   $scope.message = "My message";
});

app.controller("fatherController", function ($scope) {
   $scope.message = "Papa's message";
});

app.controller("grandFatherController", function ($scope) {
   $scope.message = "Grandpa's message";
});


HTML 1. NESTED CONTROLLERS


<div ng-controller="myController"> 
    {{ message }}
    <div ng-controller="fatherController">
       {{ message }}
       <div ng-controller="grandFatherController">
         {{ message }}
       </div>
    </div>
</div>

Output
My message
Papa's message
Grandpa's message



HTML 2. NESTED CONTROLLERS USING $parent

<div ng-controller="myController"> 
   {{ message }}
   <div ng-controller="fatherController">
      {{ $parent.message }} - {{ message }}
      <div ng-controller="grandFatherController">
        {{ $parent.$parent.message }} - {{ $parent.message }} - {{ message }}
      </div>
   </div>
</div>


Output
My message
My message - Papa's message
My message - Papa's message - Grandpa's message



HTML 3. NESTED CONTROLLERS USING ALIAS : MORE READABLE

<div ng-controller="myController as myCtrl"> 
   {{ myCtrl.message }}
   <div ng-controller="fatherController as fatherCtrl">
      {{ myCtrl.message }} - {{ fatherCtrl.message }}
      <div ng-controller="grandFatherController as grandFatherCtrl">
        {{ myCtrl.message }} - {{ fatherCtrl.message }} - {{ grandFatherCtrl.message }}
      </div>
   </div>
</div>


Output
My message
My message - Papa's message
My message - Papa's message - Grandpa's message

How to use Controller using Alias in Routes ?

2 ways to use Controller Alias with Routes
  1. controller property with "as" syntax
  2. "controllerAs" property

Example JS 1

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

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


Example JS 2

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

app.config( function ($routeProvider) {
   $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"
   })
});

What is the common problem with using Controller Aliases ?

Common problem occurred using Alias (Unavailability of this variable inside inner funtions) app.controller("controller1", function ($http) {
   $http.get("MyService/GetEmployee").then( function(response) {
      this.empData = response.data;
   }) });

Solution (Use another variable and assign this object outside the inner function and use it)
app.controller("controller1", function ($http) {
   var vm = this;
   $http.get("MyService/GetEmployee").then( function(response) {
      vm.empData = response.data;
   }) });

How to use Controller using alias ?

USING CONTROLLER WITHOUT ALIAS 
JS
app.controller("controller1", function ($scope) {
    $scope.message = "Hello World";
});

HTML
<h1 ng-controller="controller1">{{ message }}</h1>


USING CONTROLLER WITH ALIAS
JS
app.controller("controller1", function () {
    this.message = "Hello World";
});

HTML
<h1 ng-controller="controller1 as c1">{{ c1.message }}</h1>


Common problem occurred using Alias (Unavailability of this variable inside inner funtions)
app.controller("controller1", function ($http) {
   $http.get("MyService/GetEmployee").then( function(response) {
      this.empData = response.data;
   })
});


Solution (Use another variable and assign this object outside the inner function and use it)

app.controller("controller1", function ($http) {
   var vm = this;
   $http.get("MyService/GetEmployee").then( function(response) {
      vm.empData = response.data;
   })
});