6.3 ng-template指令的使用_AngularJS入门与进阶-QQ阅读男生轻小说网

书名：AngularJS入门与进阶
作者名：江荣波
本章字数：338字
更新时间：2020-11-28 23:44:34

6.3 ng-template指令的使用

在本章前面的两个案例中，我们把每个视图都写在一个单独的HTML文件中，有时候视图内容比较少，我们可能会希望把不同的视图集成到同一个页面中，或者要开发一个单页面应用（SPA），就可以使用ng-template指令来实现。下面是一个ng-template指令的使用案例：

代码清单：ch06\ch06_03.html

        <!doctype html>
        <html ng-app="routeModule">
        <head>
            <meta charset="UTF-8">
            <title>ch06_03</title>
            <script src="/angular-1.5.5/angular.js"></script>
            <script src="/angular-1.5.5/angular-route.js"></script>
        </head>
        <body>
            <div>
                <a href="#/view1">view1</a> <a href="#/view2">view2</a>
            </div>
            <div ng-view></div>
            <script type="text/ng-template" id="/view1.html">
                <h1>View1内容<h1>
            </script>
            <script type="text/ng-template" id="/view2.html">
                <h1>View2内容<h1>
            </script>
            <script>
                var routeModule = angular.module（'routeModule', ['ngRoute']）
                routeModule.config（['$routeProvider',
                    function（$routeProvider）{
                        $routeProvider.
                          when（'/view1', {
                            templateUrl: '/view1.html'
                          }）.
                          when（'/view2', {
                            templateUrl: '/view2.html'
                          }）
                  }]）;
            </script>
        </body>
        </html>

在上面的案例中，我们通过<script>标签和ng-template指令定义了两个视图模板，id属性分别为/view1.html和/view2.html。

        <script type="text/ng-template" id="/view1.html">
            <h1>View1内容<h1>
        </script>
        <script type="text/ng-template" id="/view2.html">
            <h1>View2内容<h1>
        </script>

路由的定义和前面介绍的相同，templateUrl为<script>标签的id属性。

        routeModule.config（['$routeProvider',
            function（$routeProvider）{

            $routeProvider.
                    when（'/view1', {

            templateUrl: '/view1.html'
                    }）.
                    when（'/view2', {

            templateUrl: '/view2.html'
                    }）
          }]）;

在浏览器中预览ch06_03.html，效果如图6.5所示。

图6.5 ng-template指令使用案例

单击view1、view2链接，视口中显示对应<script>标签中定义的视图内容。从中可以看出使用ng-template同样能够达到多视图切换效果。