首页 > 代码库 > AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
1 <script src="http://www.mamicode.com/js/lib/angular.js"></script>2 <script src="http://www.mamicode.com/js/lib/angular-animate.min.js"></script>3 <script src="http://www.mamicode.com/js/lib/angular-route.min.js"></script><br><br><script src="http://www.mamicode.com/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="http://www.mamicode.com/#about" class="btn btn-success btn-lg">About</a><a href="http://www.mamicode.com/#contact" class="btn btn-danger btn-lg">Contact</a><!-- page-about.html --><h1>Animating Pages Is Fun</h1><h2>About</h2><a href="http://www.mamicode.com/#" class="btn btn-primary btn-lg">Home</a><a href="http://www.mamicode.com/#contact" class="btn btn-danger btn-lg">Contact</a><!-- page-contact.html --><h1>Tons of Animations</h1> <h2>Contact</h2><a href="http://www.mamicode.com/#" class="btn btn-primary btn-lg">Home</a><a href="http://www.mamicode.com/#about" class="btn btn-success btn-lg">About</a>现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！
第四步：创建module并配置路由
// app.js// define our application and pull in ngRoute and ngAnimatevar animateApp = angular.module(‘animateApp‘, [‘ngRoute‘, ‘ngAnimate‘]);// ROUTING ===============================================// set our routing for this application// each route will pull in a different controlleranimateApp.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 controlleranimateApp.controller(‘aboutController‘, function($scope) { $scope.pageClass = ‘page-about‘;});// contact page controlleranimateApp.controller(‘contactController‘, function($scope) { $scope.pageClass = ‘page-contact‘;});现在，我们创建了我们的程序、路由以及控制器。每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。第六步：配置对应的动画
这个没有尝试，参考：
Animating AngularJS Apps: ngView
AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。