初次使用AngularJS中的ng-view,路由控制
时间:2022-05-04
本文章向大家介绍初次使用AngularJS中的ng-view,路由控制,主要内容包括AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面、第二步:准备好一个单页:、第三步:准备好多个模板:、第四步:创建module并配置路由、第五步:配置对应的Controller、第六步:配置对应的动画、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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
- SendCloud邮件队列状态和已使用额度的Python监控脚本
- linux/scp命令报“bash: scp: command not found lost connection”错误的解决办法
- bat/cmd批处理连接SqlServer数据库查询脚本
- 一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
- 解决mstsc无法连接问题:由于没有远程桌面授权服务器可以提供许可证…
- Apache/Nginx伪静态规则匹配http://出现的问题与解决
- 微信文件微起底
- Go语言TCP Socket编程--1
- Go语言TCP Socket编程--2
- 服务器 数据库设计技巧--1
- CVE-2015-0235:Linux glibc高危漏洞的检测及修复方法
- zabbix监控在lnmp环境下编译安装小记
- 【重磅】百度开源分布式深度学习平台,挑战TensorFlow (教程)
- WordPress评论ajax动态加载,解决静态缓存下评论不更新问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring Boot启动slf4j提示找不到weblogic.xml日志异常
- Angular 应用的DevDependencies
- 轻量级服务网格 - osm
- 漫画:设计模式之 “外观模式”
- 使用 Zotero 在 Markdown 中优雅处理参考文献
- Mybatis plus自动生成业务代码
- 功能强大的CD工具 - flagger
- Swift defer
- MySQL 最佳实践:CPU 100%,MySQL 到底在干什么
- 【译】Flutter 1.20 发布
- 算法面试题:一个List,要求删除里面的男生,不用Linq和Lamda,求各种解,并说明优缺点!
- Angular CLI创建的项目文件用途一栏
- [888]python内置函数vars()|dir()|locals()
- Mdnice,一种记录知识的新方式
- [887]python中@classmethod和@staticmethod