mg不朽情缘中大奖

書名： AngularJS入門與進(jìn)階
作者名：江榮波
本章字?jǐn)?shù)： 278字
更新時(shí)間： 2020-11-28 23:44:35

6.5 $location實(shí)現(xiàn)多視圖切換

在前面的案例中，我們都是通過超鏈接的形式改變?yōu)g覽器地址欄URL，從而達(dá)到視圖切換的效果。本節(jié)我們將以一個(gè)案例說明如何使用$location服務(wù)實(shí)現(xiàn)視圖的切換。

代碼清單：ch06\ch06_05.html

        <!doctype html>
        <html ng-app=”routeModule”>
        <head>
            <meta charset=”UTF-8”>
            <title>ch06_05</title>
            <script src=”/angular-1.5.5/angular.js”></script>
            <script src=”/angular-1.5.5/angular-route.js”></script>
        </head>
        <body ng-controller=”MultiViewController”>
            <div>
                <button ng-click=”goView1()">view1</button>&nbsp;
                <button ng-click=”goView2()">view2</button>
            </div>
            <div ng-view></div>
            <script type=”text/ng-template” id=”/view1.html”>
                <h1>View1內(nèi)容<h1>
            </script>
            <script type=”text/ng-template” id=”/view2.html”>
                <h1>View2內(nèi)容<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'
                          }）
                  }]）;
                routeModule.controller（"MultiViewController”,
                    function（$scope, $location）{
                        $scope.goView1 = function() {
                            $location.path（"/view1”）;
                        };
                        $scope.goView2 = function() {
                            $location.path（"/view2”）;
                        };
                }）;
            </script>
        </body>
        </html>

在瀏覽器中運(yùn)行ch06_05.html，效果如圖6.7所示。

圖6.7 $location實(shí)現(xiàn)多視圖切換案例

本例中我們把ch06_03.html中的超鏈接改成了兩個(gè)按鈕，然后在控制器中響應(yīng)按鈕的單擊事件，在事件響應(yīng)方法中調(diào)用$location.path()方法改變?yōu)g覽器地址欄URL，所以單擊兩個(gè)按鈕時(shí)同樣可以達(dá)到視圖切換的效果。

官术网_书友最值得收藏!

AngularJS入門與進(jìn)階

6.5 $location實(shí)現(xiàn)多視圖切換