用ng-view创建单页APP

学向勤中得，萤窗万卷书。这篇文章主要讲述用ng-view创建单页APP相关的知识，希望能为你提供帮助。
我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。
我们将会使用：

使用 ngRoute 来为我们的页面路由
使用 ngAnimate 来为页面创建动画效果
对页面使用 CSS Animations
当我们离开或进入试图时，我们的每一个页面会有不同的动画效果

让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。
我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。
ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass
需要的文件列表：

- index.html - style.css - app.js - page-home.html - page-about.html - page-contact.html

index.html,

加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。

< html> < head> < !-- CSS --> < !-- load bootstrap (bootswatch version) --> < link rel="stylesheet" href="https://www.songbingjia.com//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/style.css"> < !-- JS --> < !-- load angular, ngRoute, ngAnimate --> < script type="text/javascript" src="http://img.readke.com/220418/19360421W-0.jpg"> < /script> < script src="http://img.readke.com/220418/1936046023-1.jpg"> < /script> < script src="http://img.readke.com/220418/19360450U-2.jpg"> < /script> < script src="https://www.songbingjia.com/android/app.js"> < /script> < /head> < !-- apply our angular app --> < 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> < /html>

app.js
【用ng-view创建单页APP】现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。

// 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: ‘page-home.html‘, controller: ‘mainController‘ })// about page .when(‘/about‘, { templateUrl: ‘page-about.html‘, controller: ‘aboutController‘ })// contact page .when(‘/contact‘, { templateUrl: ‘page-contact.html‘, controller: ‘contactController‘ }); }); // CONTROLLERS ============================================ // home page controller animateApp.controller(‘mainController‘, 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‘; });

page-home.html

< !-- page-home.html --> < h1> Angular Animations Shenanigans< /h1> < h2> Home< /h2> < a href="https://www.songbingjia.com/android/#about" class="btn btn-success btn-lg"> About< /a> < a href="https://www.songbingjia.com/android/#contact" class="btn btn-danger btn-lg"> Contact< /a>

page-about.html

< !-- page-about.html --> < h1> Animating Pages Is Fun< /h1> < h2> About< /h2> < a href="https://www.songbingjia.com/android/#" class="btn btn-primary btn-lg"> Home< /a> < a href="https://www.songbingjia.com/android/#contact" class="btn btn-danger btn-lg"> Contact< /a>

page-contact.html

< !-- page-contact.html --> < h1> Tons of Animations< /h1> < h2> Contact< /h2> < a href="https://www.songbingjia.com/android/#" class="btn btn-primary btn-lg"> Home< /a> < a href="https://www.songbingjia.com/android/#about" class="btn btn-success btn-lg"> About< /a>

style.css

/* make our pages be full width and full height *//* positioned absolutely so that the pages can overlap each other as they enter and leave */.page { bottom: 0; padding-top: 200px; position: absolute; text-align: center; top: 0; width: 100%; }.page h1 { font-size: 60px; }.page a { margin-top: 50px; }/* PAGES (specific colors for each page) ============================================================================= */.page-home { background: #00D0BC; color: #00907c; }.page-about { background: #E59400; color: #a55400; }.page-contact { background: #ffa6bb; color: #9e0000; }/* ANIMATIONS ============================================================================= */.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; }.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }.ng-enter { z-index: 8888; }.ng-leave { z-index: 9999; }/* page specific animations ------------------------ *//* home -------------------------- */.page-home.ng-enter { animation: scaleUp 0.5s both ease-in; }.page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }/* about ------------------------ */.page-about.ng-enter { animation: slideInRight 0.5s both ease-in; }.page-about.ng-leave { animation: slideOutLeft 0.5s both ease-in; }/* contact ---------------------- */.page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }.page-contact.ng-enter { animation: slideInUp 0.5s both ease-in; }/* leaving animations ----------------------------------------- *//* rotate and fall */@keyframes rotateFall { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 40% { transform: rotateZ(17deg); } 60% { transform: rotateZ(16deg); } 100% { transform: translateY(100%) rotateZ(17deg); } }/* slide in from the bottom */@keyframes slideOutLeft { to { transform: translateX(-100%); } }/* rotate out newspaper */@keyframes rotateOutNewspaper { to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } }/* entering animations --------------------------------------- *//* scale up */@keyframes scaleUp { from { opacity: 0.3; -webkit-transform: scale(0.8); } }/* slide in from the right */@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }/* slide in from the bottom */@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。

我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。