溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹AngularJS怎么實現單一頁面內設置跳轉路由，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
具體如下：
單一頁面內設置跳轉路由
鑒于現在很多應用的應用功能以及場景都非常簡單，如果還按照以前的思路，每個頁面做一個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" ></audio>
然后通過路由進行跳轉
app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) {
$scope.LoginSucessLocation = function () {
var hre = './main#/1';
location.href = hre;
}
})以上是“AngularJS怎么實現單一頁面內設置跳轉路由”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
