初次使用AngularJS中的ng-view,路由控制
2024-10-10 15:19:45
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中,这样我们的每一个页面都有了不同的类名。通过这些不同的类名,我们可以为不同的页面添加不同的动画效果。
第六步:配置对应的动画
这个没有尝试,参考:
Animating AngularJS Apps: ngView
最新文章
- P3P设置第三方cookie解决方案
- 【C语言】文件
- sql 里 text类型的操作(转载)
- iOS开发网络篇—JSON介绍
- 【转】eclipse怎么设置字体大小
- VC和VS系列(2005)编译器对双精度浮点溢出的处理
- jmeter summariser(命令行执行时的输出) 、查看结果树等结果中文乱码
- Google Android官方文档进程与线程(Processes and Threads)翻译
- 6 款国外开源web oa办公系统(转)
- 兼容各浏览器中的PNG透明效果CSS定义
- Objective-C中NSString和NSMutableString的基本用法
- 系列五AnkhSvn
- 推荐vim学习教程--《Vim 练级手册》
- jQuery中的CSS(二)
- Java 9 - Java Number类
- PHP轻量级框架 Slim 使用(一)
- soapui 调用wsdl 步骤以及出现的问题
- python 异步IO(syncio) 协程
- 【Python学习笔记】有关包的基本知识
- [bzoj4832][Lydsy1704月赛]抵制克苏恩
热门文章
- Unity3D UGUI之fbx模型导入问题
- canvas :曲线的面积图 加渐变效果
- 20145337 GDB调试汇编堆栈过程分析
- 数组和链表--Java学习笔记(一)
- 安卓初級教程(5):TabHost的思考
- 用DataGridView导入TXT文件,并导出为XLS文件
- International Conference for Smart Health 2015 Call for Papers
- 浅谈Android应用保护(零):出发点和背景
- [nRF51822] 15、穿戴式设备上电量检测装置的设计及细节技术点(偏专业硬件文章)
- ASP.NET MVC学前篇之Ninject的初步了解