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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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实现的在线人员函数库
2008/04/09 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python遍历数组的方法小结
2015/04/30 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python unittest实现api自动化测试
2018/04/04 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
家长评语大全
2014/01/22 职场文书
食品业务员岗位职责
2014/03/18 职场文书
《假如》教学反思
2014/04/17 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android