AngularJS之页面跳转Route实例代码


Posted in Javascript onMarch 10, 2017

AngulagJs的页面使用Route跳转

1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js"

2.通过$routeProvider定义路由,示例

var testModule = angular.module('testModule', ['ngRoute']);

testModule.config(['$routeProvider', function ($routeProvider) {
 $routeProvider.when('/2', {//'/2'定义的路由路径,以后通过此路径访问,通常定义为短路径
  templateUrl: "/home/index2",//"/home/index2"是路由实际访问的路径,可以是asp.net mvc的访问路径(如此例),也可是具体的页面路径,如“test/test.html"
  controller:'testController'//路由跳转的controller,后面必须定义此控制器
 });

 $routeProvider.when('/3', {
  templateUrl: "/home/index3",
  controller:'testController'
 })

}]);

3.使用路由跳转,结合ng-view做spa

3.1  在JS中使用$location进行跳转,如示例,在需要的时候调用goToIndex2即可

testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {

 $scope.goToIndex2 = function () {
  $location.path("/2")
 }
}]);

3.2 在html代码中使用href="#path"来进行跳转

<html >
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index1</title>
 @Styles.Render("~/Content/css/base")
 @Scripts.Render("~/script/base")
 <script src="~/scripts/ngmoudle/app.js"></script>
</head>
<body>
 <div ng-app="testModule" ng-controller="testController">
  <header>
   <h1>This is Index1</h1>
   <button type="button" class="btn btn-default" ng-click="goToIndex2()">Index2</button>
   <a href="#/3" class="btn btn-default">Index3</a><!--通过heft="#path"方式进行跳转-->
   <a href="#/2" class="btn btn-default" >Index2</a>
    </header>
  <div ng-view>

  </div>
  <footer>PAGE FOOTER</footer>
 </div>
</body>
</html>

 4.关于Angularjs版本不得不说的问题(追加部分),“/"变”%2F”问题

新的项目直接使用Nuget获取Angularjs后,发现按照以上的写法,不能跳转了,表现症状为 <a href="#/2">Index2</a> 点击之后,发现浏览器地址变为“#%22”,“/"变”%2F”导致路由不能跳转了,一顿猛查和调试,才发现AngularJs自1.6版本后对地址做了特别处理 知道原因后,解决问题也很简单,在Angular中声明用回旧有方式即可。

可参见 http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working

testModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
JS实现的自动打字效果示例
Mar 10 #Javascript
jquery实现的table排序功能示例
Mar 10 #Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
常用的js方法合集
Mar 10 #Javascript
You might like
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
删除节点的jquery代码
2014/01/13 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
浅述python2与python3的简单区别
2018/09/19 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
本科生个人求职自荐信
2013/09/26 职场文书
英语专业毕业生自我鉴定
2013/11/09 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
大学新生军训感言
2014/02/25 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
校庆口号
2014/06/20 职场文书
初中生毕业评语
2014/12/29 职场文书
2015年人事科工作总结
2015/04/28 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书