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创建自定义指令的方法详解
这篇文章主要介绍了AngularJS创建自定义指令的方法,详细的分析了自定义指令的原理、实现步骤、实现方法与相关注意事项,需要的朋友可以参考下
2016-11-11
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下
2018-04-04
利用Angularjs和原生JS分别实现动态效果的输入框
现在的很多网站都将输入框做成了动态的效果，这样对于用户体检来说非常好，这篇文章分别用Angularjs和原生JS两种方法来实现动态效果的输入框，具有一定的参考价值，有需要的小伙伴们可以来参考借鉴。
2016-09-09
Angularjs material 实现搜索框功能
这篇文章主要介绍了Angularjs material 实现搜索框功能的相关资料,需要的朋友可以参考下
2016-03-03
Angular ng-repeat 对象和数组遍历实例
这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例，需要的朋友可以参考下
2016-09-09
AngularJS 中的事件详解
本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
2016-07-07
AngularJS操作键值对象类似java的hashmap(填坑小结)
我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何创造（使用）这样一个对象呢？今天小编通过本文给大家分享下，感兴趣的朋友一起学习吧
2016-11-11
详解如何在Angular中使用环境变量
如果你正在构建一个使用 API 的应用程序,你会想在开发过程中使用测试环境的 API 密钥,而在生产环境中使用生产环境的 API 密钥,在本教程中,你将学习如何在 Angular 中使用环境变量,需要的朋友可以参考下
2024-02-02
AngularJS的内置过滤器详解
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。
2015-05-05
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
今天小编就为大家分享一篇解决angularjs前后端分离调用接口传递中文时中文乱码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08