本文執行個體講述了AngularJS多視圖切換用法。分享給大家供大家參考，具體如下：
在AngularJS應用中，我們可以將html片段寫在一個單獨的檔案中，然後在其他頁面中將該段片段載入進來。如果有多個片段檔案，我們還可以在控制器中根據使用者的操作動態載入不同的片段，從而達到切換視圖的效果。
先來看看筆者寫好的一個案例吧：
這兩首詞實際上是兩個html片段，分別寫在page1.html和page2.html。下面是這兩個檔案的內容：
<!--page1.html內容--><div> <p>《南鄉子·登京口北固亭有懷》</p> <p>何處望神州？滿眼風光北固樓。千古興亡多少事，悠悠，不盡長江滾滾流。</p> <p>年少萬兜鍪，坐斷東南戰未休。天下英雄誰敵手，曹劉。生子當如孫仲謀。</p></div>
<!--page2.html內容--><div> <p>《蝶戀花》</p> <p>佇倚危樓風細細，望極春愁，黯黯生天際。草色煙光殘照裡，無言誰會憑闌意。</p> <p>擬把疏狂圖一醉，對酒當歌，強樂還無味。衣帶漸寬終不悔，為伊消得人憔悴。</p></div>
接下來我們看看如何?這兩個片段的切換。
<!DOCTYPE html><html ng-app="routeMod"><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script> <link type="text/css" href="css/tutorial07.css" rel="stylesheet"> <title>tutorial07.html</title></head><body> <header> Header </header> <div id="content" ng-controller="MultiViewController"> <div id="myView" ng-view="myView" ng-init="init()"> </div> <div id="btnDiv"> <button ng-click="prePage()">上一頁</button> <button ng-click="nextPage()">下一頁</button> </div> </div> <footer> Copyright:Rongbo_J </footer> <script> var routeMod = angular.module('routeMod', ['ngRoute']); routeMod.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/1',{ templateUrl:'tutorial07/page1.html', controller:'MultiViewController' }) .when('/2',{ templateUrl:'tutorial07/page2.html', controller:'MultiViewController' }) }]) routeMod.controller("MultiViewController",function($scope,$log,$location){ $scope.init = function () { $location.path("/1"); } $scope.prePage = function () { $log.info("prePage"); $location.path("/1"); }; $scope.nextPage = function () { $log.info("nextPage"); $location.path("/2"); }; }); </script></body></html>
這裡我們需要用到AngularJs的路由模組ngRoute，模組代碼封裝在angular-route.js檔案，和上節一樣我們我們需要引入它。
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
然後將它注入到我們的模組中，代碼如下：
var routeMod = angular.module('routeMod', ['ngRoute']);
接下來的工作是配置html片段的訪問路徑，我們需要調用模組的config方法來對$routeProvider服務進行配置，代碼如下：
routeMod.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/1',{ templateUrl:'tutorial07/page1.html', controller:'MultiViewController' }) .when('/2',{ templateUrl:'tutorial07/page2.html', controller:'MultiViewController' })}])
我們通過ng-view指令定義了一個視圖，在控制器中調用$location.path()方法來指定在該視圖中載入哪一個片段。
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
