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. Python通过PhantomJS获取JS渲染后的网页源代码

    新建一个文件,命名为test.js,内容如下: var page = require('webpage').create(), system = require('system'), address; ...

  2. android xml字符串通配

    1.基本使用方法 xml中定义如下字符串: <string name="buff">%1$d --- %2$s</string> 代码中解析: String ...

  3. ps命令查看进程指定项目信息、用户名过长显示UID

    有次一个在使用ps命令时,发现部分用户显示的是用户名,有些用户显示的是UID,那是因为用户名长度超过8位的:也就是说ps命令用户名列默认只能显示8位(含8位)的用户名,超过8位就显示UID,如何让长度 ...

  4. android 布局文件中控件ID、name标签属性的命名包含“@”、“.”、“+”等等符号的含义

    1. 在项目的根目录有个配置文件“AndroidManifest.xml”,是用来设置Activity的属性的如 <?xml version="1.0" encoding=& ...

  5. iPhoneX页面安全区域与内容重叠问题

    转载自:https://www.cnblogs.com/lolDragon/p/7795174.html 1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iP ...

  6. [C#] 类型学习笔记三：自定义值类型

    既前两篇之后,这一篇我们讨论通过struct 关键字自定义值类型. 在第一篇已经讨论过值类型的优势,节省空间,不会触发Gargage Collection等等. 在对性能要求比较高的场景下,通过str ...

  7. 2015/9/2 Python基础(7)：元组

    为什么要创造一个和列表差别不大的容器类型?元组和列表看起来不同的一点是元组用圆括号而列表用方括号.而最重要的是,元组是不可变类型.这就保证了元组的安全性.创造元组给它赋值和列表完全一样.除了一个元素的 ...

  8. consul windows安装

    Consul 是一个支持多数据中心分布式高可用的服务发现和配置共享的服务软件,由 HashiCorp 公司用 Go 语言开发, 基于 Mozilla Public License 2.0 的协议进行开 ...

  9. 使用Apache Curator监控Zookeeper的Node和Path的状态

    1.Zookeeper经常被我们用来做配置管理,配置的管理在分布式应用环境中很常见,例如同一个应用系统需要多台 PC Server 运行,但是它们运行的应用系统的某些配置项是相同的,如果要修改这些相同 ...

  10. 深入理解微服务架构spring的各个知识点（面试必问知识点）

    什么是spring spring是一个开源框架,spring为简化企业级开发而生,使用spring可以使简单的java bean 实现以前只有EJG才能实现的功能. Spring是一个轻量级的控制反转 ...