溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

AngularJS怎么實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由

發(fā)布時(shí)間：2021-04-23 11:21:10 來源：億速云 閱讀：135 作者：小新 欄目：web開發(fā)

這篇文章主要介紹AngularJS怎么實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁更加美觀。

具體如下：

單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由

鑒于現(xiàn)在很多應(yīng)用的應(yīng)用功能以及場景都非常簡單，如果還按照以前的思路，每個(gè)頁面做一個(gè)html，通過路由進(jìn)行跳轉(zhuǎn)，不僅在時(shí)間上會有延遲，在某些特殊的瀏覽器（最典型的如微信內(nèi)置瀏覽器）中，跳轉(zhuǎn)過程中會出現(xiàn)短暫的白頁。

因此，我們在開發(fā)過程中，將頁面邏輯封裝到同一個(gè)html中。當(dāng)系統(tǒng)第一次加載頁面時(shí)，將所有頁面全部加載進(jìn)去，然后通過angularJS內(nèi)置的路由進(jìn)行加載。

直接上代碼

聲明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-->
<!--加入校區(qū)-start-->
<script type="text/ng-template" id="1.html">
  <div>
  頁面1
  </div>
</script>
<!--加入校區(qū)-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>

然后通過路由進(jìn)行跳轉(zhuǎn)

app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) {
  $scope.LoginSucessLocation = function () {
   var hre = './main#/1';
   location.href = hre;
  }
})

以上是“AngularJS怎么實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手