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. python string模块

    string.ascii_lowercase ='abcdefghijklmnopqrstuvwxyz' string.ascii_uppercase ='ABCDEFGHIJKLMNOPQRSTUV ...

  2. tp框架的增删改查

    首先,我们来看一下tp框架里面的查询方法: 查询有很多种,代码如下: <?php namespace Admin\Controller; use Think\Controller; class ...

  3. wps恢复经典模式

    经典模式 情况一: 恢复的方法:点击红色区域 情况二: 恢复的方法:点击红色区域

  4. libc++abi.dylib`__cxa_throw: 视频播放时异常

    这两天研究视频播放,集成RTMP视频出现的异常,刚好看到一篇博客,楼主使用［AVAudioPlayer Play］时出现了异常...记录下来: 由于xcode中设置了当所有异常出现时的断点,,解决办法 ...

  5. CSS3简易表盘时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 用typedef定义函数指针的问题

    在学习windows API的时候,遇到下面这段代码   以前见过的typedef的用法都是给一个数据类型取一个别名 typedef oldTypeName newTypeName   这种给数据类型 ...

  7. 在ubuntu下安装google chrome

    由于手上有两台电脑,再加上我那个选择困难症加上纠结劲.所以果断把其中一台电脑只装linux系统,另一台电脑只装windows了.免得我老纠结!于是linux便选择了ubuntu. 由于浏览器一直用的是 ...

  8. 在dll里malloc/new/cvCreate分配内存，在exe里free/Releases释放内存时会出错。

    写了个程序,在DLL中用malloc分配了一块内存,但是在exe程序中释放,结果程序crash,原因就是:其原因可能是堆被损坏,这也说明 TestMySticker.exe 中或它所加载的任何 DLL ...

  9. 如何让include标签包裹的布局置于屏幕最下方？

    如何让一个Layout 始终在屏幕的下方 我想让<include layout="@layout/bottom" />一直在屏幕下,怎么做? 1.相对布局中用属性  a ...

  10. 初识Python-Python介绍

    Python介绍 在了解了计算机以及操作系统的发展历程之后,又接触到了一门新的语音——Python,迈出了学习编程的第一步. 一.Python简介: Python(英国发音:/ˈpaɪθən/ 美国发 ...