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. 洛谷P3396 哈希冲突 (分块)

    洛谷P3396 哈希冲突 题目背景 此题约为NOIP提高组Day2T2难度. 题目描述 众所周知,模数的hash会产生冲突.例如,如果模的数p=7,那么4和11便冲突了. B君对hash冲突很感兴趣. ...

  2. 隐藏Nginx版本号

    一般来说,黑客攻击服务器的首要步骤就是收集信息,比如说你的软件版本,这些将成为下一步有针对性攻击的依据.所以说一定程度的隐藏这些信息就显得非常有必要了,本文将简单介绍如何在网络上隐藏Nginx版本号以 ...

  3. Linux下find命令及其参数的使用

    find命令原理:从指定的起始目录开始,递归地搜索其各个子目录,查找满足寻找条件的文件,并可以对其进行相关的操作. 格式:find [查找目录] [参数] [匹配模型] 多参数格式:find [查找目 ...

  4. spoj COT2 - Count on a tree II

    COT2 - Count on a tree II http://www.spoj.com/problems/COT2/ #tree You are given a tree with N nodes ...

  5. PowerDesigner16 修改表或表的字段Name的时候不让Code不自动跟着变

    在修改表或表的字段Name的时候不让Code不自动跟着变,设置如下: tools-> General   Options-> Dialog 去掉勾选 Name To Code mirror ...

  6. VirtualBox4.3.12 安装ubuntu 14.04 分辨率过小(600*480)问题的解决方法

    作为.net程序员,一直都跟windows系统打交道,在同事的影响下,今天安装了Ubuntu 14. 安装完系统就遇到了这个麻烦事,找了好久才解决,因此记录下来,或许对和我一样的Ubuntu新手有帮助 ...

  7. java -classpath or -cp 的设置和解释

    classpath is a parameter—set either on the command-line, or through an environment variable—that tel ...

  8. 我要AFO啦好伤感啊

    我要AFO啦 虽然一直很垃圾 但是也很开心 接下来我要去学物理啦 原因是今天早上没有吃早餐?! 就这样把~ 白白

  9. 【51NOD-0】1130 N的阶乘的长度 V2（斯特林近似）

    [算法]数学 [题解]斯特林公式: #include<cstdio> #include<algorithm> #include<cmath> using names ...

  10. Centos 6.5下安装vsftpd服务器

    1.查看是否安装vsftp  [root@localhost ~]#rpm -qa|grep vsftpd 如果出现 vsftpd-2.2.2-13.el6_6.1.x86_64  则说明已经安装了v ...