單頁面應用的路由問題

1、概念

     單頁面引用 (SPA), 被定義成一個目的在於提供一種接近桌面應用程序的流暢用戶體驗單web頁面應用程序. 

    一旦頁面被第一次加載後，再也不會發生整個頁面的更新，而是隻會發生頁面的局部更新，這樣先後端的數據交互量會很小，用戶體驗會更好。

　  在一個SPA中, 全部必需的代碼（HTML, JavaScript, 以及 CSS ）， 要不所有在初始頁面中寫好，要不在用戶操做頁面的過程當中被動態加載。

    開發單頁面程序，由於只有一個總的html文件，會帶來以下幾個負面的問題：

   1）總html文件的內容可能會比較多，一個文件的內容多了，就比較容易形成混亂，可讀性和可維護性較差，管理和修改起來比較麻煩

   2）在進行局部更新的時候，用戶習慣但願頁面的url也能發生變化，這樣用戶能夠利用瀏覽器的前進和後退功能進行操做。

本文主要介紹如何在單頁面狀況下實現多視圖的路由功能。

2、實現例子

在Angulajs中，實現機制是經過設置頁面的 hash發生變化（能夠經過連接 或 js代碼），觸發一個路由，而後動態去更新局部頁面內容。

    <div  ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="javascript:;" onclick="window.location.hash='#/b'">
                click b</a>
            </li>
        </ul>
        <ng-view></ng-view>
    </div>

上面的html代碼，但願實現的是當用戶點擊連接時，能從服務器或本地獲取新的內容更新到 <ng-view> 標籤對應的區域下。

爲了實現上述目的，須要編寫以下的Js代碼：

angular.module("myApp",["ngRoute"]);

angular.module("myApp").controller("myCtrl",function(){
    });

angular.module("myApp").config(function($routeProvider) {
        $routeProvider
        .when('/a', {
            templateUrl: 'a.html',
            controller: 'aController'
          })
        .when('/b', {
            template: '<h1> i am b</h1>',
            controller: 'bController'
        })
        .otherwise({
            redirectTo: '/a'
        });
    });

最關鍵的就是上面最後一段代碼。它定義了當瀏覽器的url的hash部分發生變化後，會自動觸發局部內容的加載（templateUrl表示從服務器加載，template表示從本地加載）. 也能夠根據須要爲所加載的內容配置 controller。

3、存在的問題

利用angulajs，一個頁面只能容許有一個 ng-view， 對於複雜的頁面設計，可能有些問題。

一個可能的解決方案是，不設置模板內容，而是在該路由的 controller中，進行頁面的複雜操做。