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中，這樣我們的每一個頁面都有了不同的類名。通過這些不同的類名，我們可以為不同的頁面添加不同的動畫效果。
第六步：配置對應的動畫
這個沒有嘗試，參考：