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中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
vue实现简单跑马灯效果
May 25 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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中使用XML
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
js绑定事件和解绑事件
2017/04/27 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
新浪网技术部笔试题
2016/08/26 面试题
采用怎样的方法保证数据的完整性
2013/12/02 面试题
教师推荐信范文
2013/11/24 职场文书
简历的自我评价
2014/02/03 职场文书
全运会口号
2014/06/20 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
培训通知
2015/04/17 职场文书
运动会致辞稿
2015/07/29 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
vue递归实现树形组件
2022/07/15 Vue.js