AngularJS caseInsensitiveMatch and Inline Templates

Suggested Videos
Part 32 - AngularJS controller as syntax
Part 33 - Angular nested scopes and controller as syntax
Part 34 - AngularJS controller as vs scope



In this video we will discuss 2 simple but useful features in Angular

• caseInsensitiveMatch 
• Inline Templates

Let us understand these 2 features with examples.

caseInsensitiveMatch : The routes that are configured using config function are case sensitive by default. Consider the route below. Notice the route (/home) is lower case.

$routeProvider

    .when("/home", {

        templateUrl: "Templates/home.html",

        controller: "homeController",

        controllerAs: "homeCtrl",

    })

If we type the following URL in the browser, we will see home.html as expected.
http://localhost:51983/home

If you type the following URL, the you will see a blank layout page. This is because, by default routes are case-sensitive
http://localhost:51983/HOME

To make the route case-insensitive set caseInsensitiveMatch property to true as shown below.

$routeProvider

    .when("/home", {

        templateUrl: "Templates/home.html",

        controller: "homeController",

        controllerAs: "homeCtrl",

        caseInsensitiveMatch: true

    })

To make all routes case-insensitive set caseInsensitiveMatch property on $routeProvider as shown below.

$routeProvider.caseInsensitiveMatch = true;

Inline Templates : The view content for the route (/home), is coming from a separate html file (home.html)

$routeProvider

    .when("/home", {

        templateUrl: "Templates/home.html",

        controller: "homeController",

        controllerAs: "homeCtrl",

    })

Should the view content always come from a separate html file. Not necessarily. You can also use an inline template. To use an inline template use template property as shown below.

$routeProvider

    .when("/home", {

        template: "<h1>Inline Template in action</h1>",

        controller: "homeController",

        controllerAs: "homeCtrl"

    })

At this point, when you navigate to http://localhost:51983/home, you should see Inline Template in action.