本文實例講述了AngularJS實現單一頁面內設置跳轉路由的方法。分享給大家供大家參考，具體如下：
單一頁面內設置跳轉路由
鑒于現在很多應用的應用功能以及場景都非常簡單，如果還按照以前的思路，每個頁面做一個html，通過路由進行跳轉，不僅在時間上會有延遲，在某些特殊的瀏覽器（最典型的如微信內置瀏覽器）中，跳轉過程中會出現短暫的白頁。
因此，我們在開發過程中，將頁面邏輯封裝到同一個html中。當系統第一次加載頁面時，將所有頁面全部加載進去，然后通過angularJS內置的路由進行加載。
直接上代碼
聲明app
<script type="text/javascript"> var app = angular.module('ngRouteWxCtb', ['ngRoute','ngCookies']) .config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/0', { templateUrl: '0.html', controller: 'loginCtrl' }).when('/1', { templateUrl: '1.html', controller: '1Ctrl' }).when('/2', { templateUrl: '2.html', controller: '2Ctrl' }).when('/3', { templateUrl: '3.html', controller: '3Ctrl' }).when('/4', { templateUrl: '4.html', controller: '4Ctrl' }).when('/5', { templateUrl: '5.html',// controller: '5Ctrl' }).otherwise({redirectTo: '/login'}); }]);</script>在頁面中全部加載所有view
<body ng-app="ngRouteWxCtb" class="ng-scope"><!--用戶登錄-start--><script type="text/ng-template" id="0.html"> <div> 頁面0 </div></script><!--用戶登錄-end--><!--加入校區-start--><script type="text/ng-template" id="1.html"> <div> 頁面1 </div></script><!--加入校區-end--><!--裁剪圖片-start--><script type="text/ng-template" id="2.html"> <div> 頁面2 </div></script><!--開始上傳圖片 - start--><script type="text/ng-template" id="3.html"> <div> 頁面3 </div></script><!--開始上傳圖片-end--><!--上傳圖片-start--><script type="text/ng-template" id="4.html"> <div> 頁面4 </div></script><!--上傳圖片-end--><!--上傳圖片完成-start--><script type="text/ng-template" id="5.html"> <div> 頁面5 </div></script><audio controls="controls" style="display: none;"></audio>
然后通過路由進行跳轉
app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) { $scope.LoginSucessLocation = function () { var hre = './main#/1'; location.href = hre; }})更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
