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 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 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中一个完整表单处理实现代码
2011/11/10 PHP
php 字符串替换的方法
2012/01/10 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
js实例属性和原型属性示例详解
2014/11/23 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
小区消防演习方案
2014/02/21 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Java Spring Lifecycle的使用
2022/05/06 Java/Android
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS