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. 使用Google的CDN JQuery库

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  2. jQuery获取元素对象本身的html

    Jquery获取html标签,包含该标签本身 2018年04月01日 20:16:10 清--水 阅读数:829   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.c ...

  3. tomcat log4j配置

    tomcat默认的log使用的是java.util.logging,配置文件在${catalina_base}/conf/logging.properties tomcat日志分类, 1.access ...

  4. HDU1384 差分约束

    Intervals Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. 在IIS中寄存服务

    http://blog.csdn.net/songyefei/article/details/7381595 第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型 ...

  6. 任务调度 Quartz 学习（二） CronTrigger

    在Quartz中Trigger有 SimpleTrigger与CronTrigger两种: SimpleTrigger:当需要的是一次性的调度(仅是安排单独的任务在指定的时间及时执行),或者你需要在指 ...

  7. mysql 索引 和mysql 的引擎

    1.索引的特点 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. ...

  8. max_element和min_element的用法

    首先,max_element和min_elemetn看字面意思是求最大值和最小值,这个确实是这个意思.不过,需要注意的是,他返回的是最大值(最小值)的地址,而非最大值(最小值).对于一般数组的用法则是 ...

  9. oracle scott用户不存在

    scott用户拥有一些基础的数据表,可以供我们练习sql.先执行 alter user scott account unlock; 查看scott用户是否存在 当scott用户不存在,我们就需要在$O ...

  10. 小程序var that=this

    小程序的js函数中,一般第一句就是var that=this,那么此语句的必要性是什么呢?下面用一段代码来解释这个问题 Page({ //页面的初始数据 loadUsers: function () ...