使用 AngularJS 的路由和模板实现单页应用 (Single Page)

什么是单页应用？

单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

单页应用给传统网站带来的好处？

相对于传统网站，我们认为单页应用的主要好处是：

• 它提供了更加吸引人的用户体验。单页应用可以做到一举两得：桌面应用的即时性和网站的可移植性和可访问性。
• 单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站，许多用户操作都会重绘整张页面，结果是当浏览器从服务器获取数据时，页面会假死并有“闪烁”现象，然后再重绘页面上的所有东西。如果页面很大，服务器又繁忙，或者网络连接很慢，这种“闪烁”现象会持续好几秒钟甚至是更长时间，用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比，这是一种很恐怖的体验。
• 单页应用可以拥有和桌面应用一样的响应速度—尽可能地把（临时的）工作数据和处理过程从服务端转移到浏览器端，单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑，因此是很快的。只有数据验证、授权和持久存储必须要放在服务端，原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端，对大部分的用户输入的响应，他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比，这需要花费几秒钟的时间。
• 单页应用可以和桌面应用一样，把它的状态通知给用户—当单页应用确实必须等待服务器的响应时，可以动态地显示进度条或者繁忙指示器，因此用户不会因延时而困惑。相比传统的网站，用户实际上只能猜测页面何时加载完并可用。
• 单页应用像网络一样，几乎随处可以访问—不像大多数的桌面应用，用户可以通过任务网络连接和适当的浏览器访问单页应用。如今，这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。
• 单页应用可以像网站一样即时地更新和发布—用户不需要做任何事就能明白它的好处：他们只要重新加载浏览器就行了。维护软件的多个并存版本的麻烦在很大程度上消除了。开发单页应用的作者，在一天之内就能构建和更新很多次。桌面应用经常需要下载并且安装新版本需要管理访问权限，版本之间的间隔可能是很多个月或者很多年。
• 单页应用和网站一样，是跨平台的—和大多数的桌面应用不一样，精心编写的单页应用可以在提供现代HTML5浏览器的任意操作系统上运行。尽管这通常被认为是对开发人员的好处，但对很多同时使用多种设备的用户来说是非常有用的，比如工作时用Windows，在家用Mac，Linux服务器，Android手机和Amazon平板电脑。

所有这些好处意味着，你可能会想把下个应用做成单页应用。每次点击后都会重新渲染整张页面的笨拙网站，容易日益疏远富有经验的用户。精心编写的单页应用具有互动和快速响应的界面，还伴有访问网络的功能，这将帮助我们把客户留在属于他们的地方：使用我们的产品。

关于单页Web应用

单页Web应用（single page web application，SPA）无疑是目前网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌现在人们的面前，如Gmail、Evernote、Trello等。如果你是一名Web开发人员，却还没开发过或者甚至是没有听说过单页应用，那你已经Out很久了。

单页Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持，当然有的浏览器因为具备一些高级特性，从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点，网上讲解的文章有很多，这里就不展开论述了。 单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。

关于web单页面应用的优缺点，详细可以参考知乎上的一篇文章，地址是:http://www.zhihu.com/question/20792064

正题：使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。 目标     单页应用     无刷新式页面变化     每个页面包含不同数据 虽然使用Javascript和Ajax可以实现上述功能，但是在我们的应用中，Angular可以使我们处理更容易。 文档结构 ? 1 2 3 4 5 6 - script.js              <!-- stores all our angular code --> - index.html              <!-- main layout --> - pages                  <!-- the pages that will be injected into the main layout --> ----- home.html ----- about.html ----- contact.html

HTML页面 这一部分比较简单。我们使用Bootstrap和Font Awesome。打开你的index.html文件，然后我们利用导航栏，添加一个简单布局。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!-- index.html --> <! DOCTYPE  html> < html > < head >    <!-- SCROLLS -->    <!-- load bootstrap and fontawesome via CDN -->    < link  rel = "stylesheet"  href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"  />    < link  rel = "stylesheet"  href = "//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"  />      <!-- SPELLS -->    <!-- load angular via CDN -->    < script  src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" ></ script >    < script  src = "script.js" ></ script > </ head > < body >        <!-- HEADER AND NAVBAR -->      < header >          < nav  class = "navbar navbar-default" >          < div  class = "container" >              < div  class = "navbar-header" >                  < a  class = "navbar-brand"  href = "/" >Angular Routing Example</ a >              </ div >                < ul  class = "nav navbar-nav navbar-right" >                  < li >< a  href = "#" >< i  class = "fa fa-home" ></ i > Home</ a ></ li >                  < li >< a  href = "#about" >< i  class = "fa fa-shield" ></ i > About</ a ></ li >                  < li >< a  href = "#contact" >< i  class = "fa fa-comment" ></ i > Contact</ a ></ li >              </ ul >          </ div >          </ nav >      </ header >        <!-- MAIN CONTENT AND INJECTED VIEWS -->      < div  id = "main" >            <!-- angular templating -->          <!-- this is where content will be injected -->        </ div >        <!-- FOOTER -->      < footer  class = "text-center" >          View the tutorial on < a  href = "http://scotch.io/tutorials/angular-routing-and-templating-tutorial" >Scotch.io</ a >      </ footer >   </ body > </ html > 在页面超链接中，我们使用"#"。我们不希望浏览器认为我们实际上是链接到about.html和contact.html。 Angular应用 模型和控制器 此时我们准备设置我们的应用。让我们先来创建angular模型和控制器。关于模型和控制器，请查阅文档已获得更多内容。 首先，我们需要用javascript来创建我们的模型和控制器，我们将此操作放到script.js中： ? 1 2 3 4 5 6 7 8 9 10 11 // script.js   // create the module and name it scotchApp var  scotchApp = angular.module( 'scotchApp' , []);   // create the controller and inject Angular's $scope scotchApp.controller('mainController ', function($scope) {        // create a message to display in our view      $scope.message = ' Everyone come and see how good I look!'; }); 接下来让我们把模型和控制器添加到我们的HTML页面中，这样Angular可以知道如何引导我们的应用。为了测试功能有效，我们也会展示一个我们创建的变量$scope.message的值。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!-- index.html --> <! DOCTYPE  html>   <!-- define angular app --> < html  ng-app = "scotchApp" > < head >    <!-- SCROLLS -->    <!-- load bootstrap and fontawesome via CDN -->    < link  rel = "stylesheet"  href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"  />    < link  rel = "stylesheet"  href = "//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"  />      <!-- SPELLS -->    <!-- load angular via CDN -->    < script  src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js" ></ script >        < script  src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js" ></ script >    < script  src = "script.js" ></ script > </ head >   <!-- define angular controller --> < body  ng-controller = "mainController" >   ...   <!-- MAIN CONTENT AND INJECTED VIEWS --> < div  id = "main" >      {{ message }}        <!-- angular templating -->      <!-- this is where content will be injected --> </ div > 在main这个div层中，我们现在可以看到我们创建的消息。知道了我们的模型和控制器设置完毕并且Angular可以正常运行，那么我们将要开始使用这一层来展示不同的页面。

将页面注入到主布局中 ng-view 是一个用来包含当前路由(/home, /about, or /contact)的模板的angular指令, 它会获得基于特定路由的文件并将其诸如到主布局中(index.html). 我们将会想div#main中的站点加入ng-view代码来告诉Angular将我们渲染的页面放在哪里. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <!-- index.html --> ...   <!-- MAIN CONTENT AND INJECTED VIEWS --> < div  id = "main" >        <!-- angular templating -->      <!-- this is where content will be injected -->      < div  ng-view></ div >   </ div >   ...

配置路由和视图 由于我们在创建一个单页应用，并且不希望页面刷新，那么我们会用到Angular路由的能力。 让我们看一下我们的Angular文件，并添加到我们的应用中。我们将会在Angular中使用$routeProvider来处理我们的路由。通过这种方式，Angular将会处理所有神奇的请求，通过取得一个新文件并将其注入到我们的布局中。 AngularJS 1.2 和路由 在1.1.6版本之后，ngRoute模型不在包含在Angular当中。你需要通过在文档开头声明该模型来使用它。该教程已经为AngularJS1.2更新： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 // script.js   // create the module and name it scotchApp      // also include ngRoute for all our routing needs var  scotchApp = angular.module( 'scotchApp' , [ 'ngRoute' ]);   // configure our routes scotchApp.config( function ($routeProvider) {      $routeProvider            // route for the home page          .when( '/' , {              templateUrl :  'pages/home.html' ,              controller  :  'mainController'          })            // route for the about page          .when( '/about' , {              templateUrl :  'pages/about.html' ,              controller  :  'aboutController'          })            // route for the contact page          .when( '/contact' , {              templateUrl :  'pages/contact.html' ,              controller  :  'contactController'          }); });   // create the controller and inject Angular's $scope scotchApp.controller('mainController ', function($scope) {      // create a message to display in our view      $scope.message = ' Everyone come and see how good I look! '; });   scotchApp.controller(' aboutController ', function($scope) {      $scope.message = ' Look! I am an about page. '; });   scotchApp.controller(' contactController ', function($scope) {      $scope.message = ' Contact us! JK. This is just a demo.'; }); 现在，我们已经通过$routeProvider定义好了我们的路由。通过配置你会发现，你可以使用指定路由、模板文件甚至是控制器。通过这种方法，我们应用的每一部分都会使用Angular控制器和它自己的视图。

清理URL: angular默认会将一个井号放入URL中。为了避免这种事情，我们需要使用$locationProvider来启用 HTML History API. 它将会移除掉hash并创建出漂亮的URL。更多的信息将: AngularJS中漂亮的URL: 移除井号. 我们的主页将会拉取 home.html 文件. About 和 contact 页面将会拉取它们关联的文件. 现在如果我们查看我们的应用，并点击导航，我们的内容将会照我们的意思进行改变. 要完成这个教程，我们只需要定义好将会被注入的页面就行了. 我们也将会让它们每一个都展示来自与他们相关的控制器的消息. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!-- home.html --> < div  class = "jumbotron text-center" >      < h1 >Home Page</ h1 >        < p >{{ message }}</ p > </ div >   <!-- about.html --> < div  class = "jumbotron text-center" >      < h1 >About Page</ h1 >        < p >{{ message }}</ p > </ div >   <!-- contact.html --> < div  class = "jumbotron text-center" >      < h1 >Contact Page</ h1 >        < p >{{ message }}</ p > </ div > 本地运行: Angular路由只会在你为其设置的环境后才会起效。你要确保是使用的 http://localhost 或者是某种类型的环境. 否则angular会说跨域请求支持HTTP.

Angular应用的动画 一旦你把所有的路由都完成之后，你就能开始把玩你的站点并向其加入动画了. 为此，你需要使用angular提供的 ngAnimate 模块. 后面你就可以用CSS动画来用动画的方式切换视图了. 关于如何让你的站点拥有动画的教程，请看看: AngularJS应用的动画: ngView.

单页面App上的SEO 理想情况下，此技术可能会被用在有用户登录后的应用程序中。你当然不会真的想要特定用户私人性质的页面被搜索引擎索引. 例如，你不会想要你的读者账户，Facebook登录的页面或者博客CMS页面被索引到. 如果你确实像针对你的应用进行SEO，那么如何让SEO在使用js构建页面的应用/站点上起效呢? 搜索引擎难于处理这些应用程序因为内容是由浏览器动态构建的，而且对爬虫是不可见的.

让你的应用对SEO友好 使得js单页面应用对SEO友好的技术需要定期做维护. 根据官方的Google 建议, 你需要创建HTML快照. 其如何运作的概述如下: 爬虫会发现一个友好的URL(http://scotch.io/seofriendly#key=value) 然后爬虫会想服务器请求对应这个URL的内容(用一种特殊的修改过的方式) Web服务器会使用一个HTML快照返回内容 HTML快照会被爬虫处理 然后搜索结果会显示原来的URL 更多关于这个过程的信息，可以去看看Google的 AJAX爬虫 和他们有关创建HTML快照 的指南. SEO 文章: 我们写过一篇如何让Angular对SEO友好的教程. 如果你感兴趣的话可以读一下: 使用Prerender.io完成AngularJS 的 SEO .

结论 这是一个非常简单的关于如何使用Angular来在一层中展示不同的视图。现在，你可以继续前进创建更大的单页应用。当然，关于Angular依然有很多需要学习的地方，我会在我学习Angular的过程中不断记录下不同的特性。 如果有任何人有任何建议，关于我将来的Angular文章或者不同的方式来展示我们目前做的东西（写同样的东西有太多的方式，这可以让人疯掉的），请在评论中指出。 延伸阅读 如果你正在寻找更多的路由的灵活性，如嵌套视图和基于状态模板而不是基于路由，你绝对会有兴趣看一下UI Router 这里推荐一篇关于UI Rooter的文章：AngularJS Routing Using UI-Router