使用Angular构建单页面应用(SPA)

　　什么是SPA？看下图就是SPA：

　　下面说正经的，个人理解SPA就是整个应用只有一个页面，所有的交互都在一个页面完成，不需要在页面之间跳转。

　　单页面的好处是更快的响应速度，更流畅的用户体验，甚至和桌面应用或者原生App一样流畅。

　　有很多JS框架可以用来构建SPA，Ember.js、vue.js、React、Angular等等，甚至即使你用的是jQuery开发，也有相应的框架可以用来开发SPA，比如：page.js。

　　本文介绍如何用Angular构建SPA，其他的依葫芦画瓢就是了，原理都差不多。

(一)Demo效果图

(二)代码结构

　　　这个Demo使用Angular和Angular Route技术实现，相应地引入了angular和angular-route两个库，先看下代码结构，有个直观的印象：

(三)具体实现

　　1.创建不可变的布局list.html

 <!DOCTYPE html>

 <html ng-app="demoApp">

 <head>

     <meta charset="utf-8">

     <title>Angular SPA Demo</title>

     <link rel="stylesheet" href="../static/css/base.css">

     <link rel="stylesheet" href="../static/css/index.css">

 </head>

 <body>

     <header class="header" ng-controller="LogoutCtrl">

         <div class="left">Logo</div>

         <div class="right">Hi,kagol</div>

     </header>

     <section class="content" ng-controller="demoListCtrl">

         <aside class="wrap_nav">

             <ul class="nav">

                 <li>

                     <div class="title relative"><i class="icon_fl"></i><span class="span_fl">Demo List</span></div>

                     <ul>

                         <li><a href="#/demo/list/unassign">Uncompleted</a></li>

                         <li><a href="#/demo/completed/processed">Completed</a></li>

                         <li><a href="#/demo/followup">Follow Up</a></li>

                     </ul>

                 </li>

                 <li>

                     <div class="title relative"><i class="icon_set"></i><span class="span_set">Setting</span></div>

                     <ul>

                         <li><a href="#/account">Account Info</a></li>

                     </ul>

                 </li>

             </ul>

         </aside>

         <section class="main" ng-style="mainStyle">

             <div class="inner_content" ng-view></div>

         </section>

     </section>

     <footer class="footer">

         <div class="copyright">Copyright © 1998-2016 Tencent. All Rights Reserved</div>

     </footer>

     <script src="../static/js/angular-1.4.8.min.js"></script>

     <script src="../static/js/angular-route.min.js"></script>

     <script src="../static/js/demo/demo_list/demoControllers.js"></script>

     <script src="../static/js/demo/demo_list/app.js"></script>

 </body>

 </html>

　　ng-view里面的内容是视图的内容，是可变的，其余部分是布局，不可变，这里需要注意的是一个页面只能有一个ng-view。

　　2.创建可变的视图

 <!-- Uncompleted - To be Assigned -->

 <script type="text/ng-template" id="list_unassign.html">

     <div>To be Assigned</div>

 </script>

 <script type="text/ng-template" id="followup.html">

     <div>Follow Up</div>

 </script>

 <!-- 收藏 -->

 <script type="text/ng-template" id="completed_processed.html">

     <div>Completed</div>

 </script>

 <!-- Completed demo List -->

 <script type="text/ng-template" id="account.html">

     <div>Account</div>

 </script>

 <!-- 帐号管理（修改密码） -->

　　ng-template指令表示这是一个ng模板，id是该模板的标识，写路由规则的时候会用到。模板里可以任意发挥，编写自己需要的html内容。

　　3.引入视图

　　将视图代码放在包含ng-view指令的标签前面即可。

　　4.创建路由规则app.js

 var demoApp = angular.module('demoApp', [

     'ngRoute',

     'demoControllers'

 ]);

 demoApp.config(function($routeProvider) {

     $routeProvider.when('/', {

           templateUrl: 'list_unassign.html',

           controller: 'demoListUnassignCtrl'

       }).when('/demo/list/unassign', {

           templateUrl: 'list_unassign.html',

           controller: 'demoListUnassignCtrl'

       }).when('/demo/completed/processed', {

           templateUrl: 'completed_processed.html',

           controller: 'CompletedProcessedCtrl'

       }).when('/demo/followup', {

           templateUrl: 'followup.html',

           controller: 'FollowupCtrl'

       }).when('/account', {

           templateUrl: 'account.html',

           controller: 'AccountCtrl'

       }).otherwise({

           redirectTo: '/'

       });

 });

　　要使用Angular的路由服务，需要先引入ngRoute模块，然后使用$routeProvider服务配置路由。

　　5.创建Angular控制器demoControllers.js

 var demoControllers = angular.module('demoControllers', []);

 // Logout

 demoControllers.controller('LogoutCtrl', function($scope){

     console.log('this is logout');

 });

 // Account Info

 demoControllers.controller('AccountCtrl', function($scope, $routeParams){

     console.log('this is account');

 });

 // Follow Up

 demoControllers.controller('FollowupCtrl', function($scope, $http, $routeParams){

     console.log('this is followup');

 });

 // Completed - My Processed

 demoControllers.controller('CompletedProcessedCtrl', function($scope, $http, $routeParams){

     console.log('this is completed');

 });

 // Uncompleted - To be Assigned

 demoControllers.controller('demoListUnassignCtrl', function($scope, $http){

     console.log('this is uncompleted');

 });

 demoControllers.controller('demoListCtrl', function($scope, $http){

     console.log('this is demolist');

 });

　　控制器里可以任意发挥，编写自己需要的代码。

(四)进一步思考

　　这个Demo里左侧导航点击之后并没有高亮，大家可以想想怎么实现。