AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面
第一步：引入必要的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>
<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中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。
第六步：配置对应的动画
这个没有尝试，参考：