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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
js实现简易计算器小功能
Nov 18 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Add a Table to a Word Document
2007/06/15 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python加速程序运行的方法
2020/07/29 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
行政经理的岗位职责
2013/11/23 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
员工保密承诺书
2014/05/28 职场文书
学生检讨书如何写
2014/10/30 职场文书
会议通知
2015/04/15 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
创业计划书之便利店
2019/09/05 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers
Redis过期数据是否会被立马删除
2022/07/23 Redis