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 Ajax 带返回值
Aug 01 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
spring+angular实现导出excel的实现代码
Feb 27 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
人族 Terran 基本策略
2020/03/14 星际争霸
php中一个完整表单处理实现代码
2011/11/10 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
台湾家适得:Homeget
2019/02/11 全球购物
初中学生评语大全
2014/04/24 职场文书
高中课程设置方案
2014/05/28 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
大学生见习报告总结
2014/11/04 职场文书
生日答谢词
2015/01/05 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
MySQL视图概念以及相关应用
2022/04/19 MySQL
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技