zoukankan      html  css  js  c++  java
  • 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. 

  • 相关阅读:
    springboot 2.4.5 redis 配置类+缓存
    华为ensp模拟器 提示40 错误问题
    Nodejs
    Python PermissionError:[Errno 13]权限被拒绝 [winerr 5]
    Window10的linux docker 安装(wsl版本)
    window10的 Linux 子系统ssh配置
    vue3.0中provide和inject实现响应式传值
    正确开启vue3.0调试工具vue-devtools
    vue动态设置组件样式
    element-ui菜单导航的三种递归写法(三)
  • 原文地址:https://www.cnblogs.com/gester/p/6535370.html
Copyright © 2011-2022 走看看