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>

4.关于Angularjs版本不得不说的问题（追加部分），“/"变”%2F”问题

新的项目直接使用Nuget获取Angularjs后，发现按照以上的写法，不能跳转了，表现症状为 Index2 点击之后，发现浏览器地址变为“#%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之页面跳转Route的更多相关文章

  1. IE下angularJS页面跳转的bug

    用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没 ...

  2. AngularJS进阶(八)实现页面跳转并进行参数传递

    angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...

  3. angularjs项目的页面跳转如何实现

    链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...

  4. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  5. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  6. AngularJs应用页面切换优化方案（转）

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

  7. AngularJs应用页面

    AngularJs应用页面切换优化方案   葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如 ...

  8. 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转

    一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...

  9. AngularJS单页面路由配置恩，理解了就很简单啦

    利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...

随机推荐

  1. Educational Codeforces Round 6 A

    A. Professor GukiZ's Robot time limit per test 0.5 seconds memory limit per test 256 megabytes input ...

  2. CentOS 下安装Mplayer播放器（转载）

    一.准备工作 需要的安装包及下载地址:1.mplayer源代码包(MPlayer-1.0rc4.tar.bz2)下载:http://www.mplayerhq.hu/MPlayer/releases/ ...

  3. android中dip、dp、px、sp和屏幕密度

    1. dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这    这个 ...

  4. C11简洁之道：tupe元祖

    tuple元组是一个固定大小不同类型的值的集合,是泛化的std::pair.我们也可以把它当作一个通用的结构体来使用,不需要创建结构体有获取结构体特征,在某些情况可以取代结构体,使程序更简洁.直观. ...

  5. 【C++对象模型】第四章 Function 语意学

    1.Member的各种调用方式 1.1 Nonstatic Member Functions 实际上编译器是将member function被内化为nonmember的形式,经过下面转化步骤: 1.给 ...

  6. 通过java客户端连接hbase 注意事项

    1.通过Java客户端连接Hbase,其中hbase通过zookeeper去管理,需要注意的是客户端端口. 通过在浏览器端输入地址查看:http://192.168.3.206:60010/maste ...

  7. 洛谷金秋夏令营模拟赛 第2场 T11737 时之终末

    这道题就是道状压dp...比赛的时候太贪心 然后状压又不好 所以T2 T3一起挂了QAQ 吸取教训QAQ f[i][j][k]表示前i个数选了j个 最后a个的状态为k的答案 #include<c ...

  8. idea 导入 java json 包

    1.java 项目导包 找到 External Libraries 下面的java版本包,在点击鼠标右键.直接找到jar路径全部选中导入即可.

  9. JS对象操作

    一.String常用操作 1.截取 substr(start,length) //返回从指定位置开始的指定长度的字符串. substring(start,end) //返回两个指定的位置之间的字符串. ...

  10. hdu 3371（prim算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3371 Connect the Cities Time Limit: 2000/1000 MS (Jav ...