快捷導(dǎo)航

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

更新時(shí)間：2017年06月28日 09:51:17 作者：小魏的馬仔

這篇文章主要介紹了AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實(shí)例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法。分享給大家供大家參考，具體如下：

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

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

因此，我們?cè)陂_(kāi)發(fā)過(guò)程中，將頁(yè)面邏輯封裝到同一個(gè)html中。當(dāng)系統(tǒng)第一次加載頁(yè)面時(shí)，將所有頁(yè)面全部加載進(jìn)去，然后通過(guò)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>

在頁(yè)面中全部加載所有view

<body ng-app="ngRouteWxCtb" class="ng-scope">
<!--用戶登錄-start-->
<script type="text/ng-template" id="0.html">
  <div>
  頁(yè)面0
  </div>
</script>
<!--用戶登錄-end-->
<!--加入校區(qū)-start-->
<script type="text/ng-template" id="1.html">
  <div>
  頁(yè)面1
  </div>
</script>
<!--加入校區(qū)-end-->
<!--裁剪圖片-start-->
<script type="text/ng-template" id="2.html">
  <div>
  頁(yè)面2
  </div>
</script>
<!--開(kāi)始上傳圖片 - start-->
<script type="text/ng-template" id="3.html">
  <div>
  頁(yè)面3
  </div>
</script>
<!--開(kāi)始上傳圖片-end-->
<!--上傳圖片-start-->
<script type="text/ng-template" id="4.html">
  <div>
  頁(yè)面4
  </div>
</script>
<!--上傳圖片-end-->
<!--上傳圖片完成-start-->
<script type="text/ng-template" id="5.html">
  <div>
  頁(yè)面5
  </div>
</script>
<audio controls="controls" style="display: none;"></audio>

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

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

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: