AngularJS之页面跳转Route实例代码
更新时间：2017年03月10日 15:13:12 作者：风清云淡
本篇文章主要介绍了AngularJS之页面跳转Route ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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(''); }]);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。2014-06-06
这篇文章主要介绍了Angular中点击li标签实现更改颜色的核心代码,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了angular6的table组件开发的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
详解AngularJS中$http缓存以及处理多个$http请求的方法
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据，通过本文给大家介绍AngularJS中$http缓存以及处理多个$http请求的方法，希望的朋友一起学习吧2016-02-02
这篇文章主要介绍了使用Angular CLI从蓝本生成代码详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Angular Ngrx Store应用程序状态典型示例详解
这篇文章主要为大家介绍了Angular Ngrx Store应用程序状态典型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了AngularJS数据绑定原理,较为详细的分析了AngularJS数据绑定的原理、使用技巧与相关注意事项,需要的朋友可以参考下2016-11-11
本篇文章主要介绍了浅谈Angular文字折叠展开组件的原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下2016-09-09
今天小编就为大家分享一篇angularJs自定义过滤器实现手机号信息隐藏的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
最新评论