单页面应用的路由问题

一、概念

     单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序. 

    一旦页面被第一次加载后，不再会发生整个页面的更新，而是只会发生页面的局部更新，这样前后端的数据交互量会很小，用户体验会更好。

　  在一个SPA中, 所有必需的代码（HTML, JavaScript, 以及 CSS ）， 要不全部在初始页面中写好，要不在用户操作页面的过程中被动态加载。

    开发单页面程序，因为只有一个总的html文件，会带来如下几个负面的问题：

   1）总html文件的内容可能会比较多，一个文件的内容多了，就比较容易造成混乱，可读性和可维护性较差，管理和修改起来比较麻烦

   2）在进行局部更新的时候，用户习惯希望页面的url也能发生变化，这样用户可以利用浏览器的前进和后退功能进行操作。

本文主要介绍如何在单页面情况下实现多视图的路由功能。

二、实现例子

在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。

三、存在的问题

利用angulajs，一个页面只能允许有一个 ng-view， 对于复杂的页面设计，可能有些问题。

一个可能的解决方案是，不设置模板内容，而是在该路由的 controller中，进行页面的复杂操作。