SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题

　　在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

第一步：引入必要的js：

 <script src="js/lib/angular.js"></script>
 <script src="js/lib/angular-animate.min.js"></script>
 <script src="js/lib/angular-route.min.js"></script><br><br><script src="app.js"></script>

第二步：准备好一个单页：

 <body ng-app="animateApp">

     <!-- inject our views using ng-view -->
     <!-- each angular controller applies a different class here -->
     <div class="page {{ pageClass }}" ng-view></div>

 </body>

第三步：准备好多个模板：

我的文件结构大致如下：
项目名
    --css
    --img
    --js
        --lib
            -angular.js
            -angular-route.js
            -angular-animate.js
       -app.js
    --tpl
       - page-home.html
       - page-about.html
       - page-contact.html
    --index.html
视图 page-home.html, page-about.html, page-contact.html
这些应该尽量保持清晰并且直接明了。我们只需要为每个页面准备一些文字以及链到其他页面的链接地址。

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-contact.html -->
<h1>Tons of Animations</h1>
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>
现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。
现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！

第四步：创建module并配置路由

// app.js
// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'tpl/page-home.html',
            controller: 'mainController'
        })

        // about page
        .when('/about', {
            templateUrl: 'tpl/page-about.html',
            controller: 'aboutController'
        })

        // contact page
        .when('/contact', {
            templateUrl: 'tpl/page-contact.html',
            controller: 'contactController'
        });

});

第五步：配置对应的Controller

 // home page controller
animateApp.controller('mainController', ['$scope',function($scope) {
    $scope.pageClass = 'page-home';
}]);

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});
现在，我们创建了我们的程序、路由以及控制器。
每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。

第六步：配置对应的动画

这个没有尝试，参考：

Animating AngularJS Apps: ngView

AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。的更多相关文章

  1. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  2. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  3. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  4. 利用MutationObserver对页面元素的改变进行监听

    'use strict'; let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || win ...

  5. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  6. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  7. ABP示例程序-使用AngularJs，ASP.NET MVC，Web API和EntityFramework创建N层的单页面Web应用

    本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深 ...

  8. 利用 html的锚点（元素a）功能实现ajax单页面应用的浏览器后退前进功能

    一.问题 随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...

  9. sellenium页面元素的定位方法

    1.findElements函数可用于多个元素定位 (1)使用ID定位:driver.findElement(By.id("ID值")); 例:HTML代码: 定位语句代码:Web ...

随机推荐

  1. linux git实现代理

    说明  Git 目前支持的三种协议 git://.ssh:// 和 http://,使用git:// 和 http://比较多,ssh://忽略,FQ后可以直接加快同步google和github代码. ...

  2. 在Mac OS X中配置Apache ＋ PHP ＋ MySQL

    在Mac OS X中配置Apache + PHP + MySQL Mac OS X 内置Apache 和 PHP,使用起来非常方便.本文以Mac OS X 10.6.3和为例.主要内容包括: 启动Ap ...

  3. ACM/ICPC 之 三维计算几何+暴力枚举+判重(HDU5839)

    CCPC网赛第八题,求立体几何数量,题解见注释 //立体几何-求满足要求的四面体个数 //要求1:至少4条边相等 //要求2:四条边相等时,另两条边一定不相邻(即对边) //题解:以当前边为不相邻的其 ...

  4. scala eclipse plugin 插件安装

    最近在看Apache Apollo 代码,其中有很多scala代码,没办法需要安装一个scala插件. 我试过zip 安装,直接下载的update-site.zip 不能直接安装到位.我又特别懒,不想 ...

  5. HCP查询配置

    1.配置命名空间Service里的Search功能为enable以及索引等相关配置 2.配置用户对该命名空间的查询为允许

  6. [转]ubuntu 下无法启动chrome

    这很不爽,google了半天也不知道答案(搜索到要重装chrome,可是我怎么都卸载不干净.....),最终解决方法如下: -------------------------------------- ...

  7. shell循环语句

    所有的笔记只记录一些例子,根据例子解释一些出现的语法,不介绍具体的语法 2015-07-01 21:58:33 星期三 for循环 用例一用for循环在家目录下创建aaa1-aaa10,然后在aaa1 ...

  8. vim简明教程

    在shell中新建一个文件 # vim a.txt vim有三种模式:一般模式.插入模式.底行模式 三种工作模式 1.命令模式 移动光标 hjkl yy 复制 nyy 从光标向下复制n行 0 移动光标 ...

  9. Python debug

  10. 【转载】 wpf无边框的方法以及拖拽的问题

    今天在做wpf程序的时候遇到了一个制作无边框的窗体并且有透明圆角的问题,我把解决的过程写下来,和大家学习 正常窗体必须把WindowStyle="None"这个属性加上去,但是加上 ...