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

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

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

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

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

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

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

直接上代碼

聲明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" style="display: none;"></audio>

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

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

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

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章: