单页面应用的路由问题

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中，进行页面的复杂操做。