AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。相关的知识，希望对你有一定的参考价值。
1 <script src="js/lib/angular.js"></script> 2 <script src="js/lib/angular-animate.min.js"></script> 3 <script src="js/lib/angular-route.min.js"></script><br><br><script src="app.js"></script>
第二步：准备好一个单页：
1 <body ng-app="animateApp"> 2 3 <!-- inject our views using ng-view --> 4 <!-- each angular controller applies a different class here --> 5 <div class="page {{ pageClass }}" ng-view></div> 6 7 </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
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可以控制页面元素的改变，使多页面变成一个单页面。。。的主要内容，如果未能解决你的问题，请参考以下文章
在 spring boot+security+angularjs 中使用 angular-routing(ui-sref) 刷新页面
AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构