Part 35 AngularJS caseInsensitiveMatch and Inline Templates

Posted For Freedom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Part 35 AngularJS caseInsensitiveMatch and Inline Templates相关的知识,希望对你有一定的参考价值。

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. 


























以上是关于Part 35 AngularJS caseInsensitiveMatch and Inline Templates的主要内容,如果未能解决你的问题,请参考以下文章

Part 10 AngularJS sort rows by table header

Part 14 ng hide and ng show in AngularJS

Part 12 Angularjs filter by multiple properties

Part 39 AngularJS route change events

shell case in语句

Shell case in语句详解