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. 【DP】【Uva437】UVA437 The Tower of Babylon

    传送门 Description Input Output Sample Input Sample Output Case : maximum height = Case : maximum heigh ...

  2. 深入JavaScript对象创建的细节

    最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...

  3. 常州模拟赛d7t3 水管

    分析:第一问还是很好做的,关键是怎么做第二问.我们可以每次删掉最小生成树上的一条边,然后再求一次最小生成树,看边权和大小和原来的是不是一样的,不过这个做法效率很低. 考虑Kruskal算法的原理,每次 ...

  4. Dynamic len(set(a[L:R])) UVA - 12345（这么过分一定要写博客）

    给出一个有n个元素的数组,有以下两种操作:Q x y,求出区间[x,y)内不同元素的个数, M x y,把第x个元素的值修改为y.注意题目中的下标是从0开始的 这题超级超级坑 妈的一个水题找了几个小时 ...

  5. bzoj 4831 [Lydsy1704月赛]序列操作 dp

    [Lydsy1704月赛]序列操作 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 203  Solved: 69[Submit][Status][Dis ...

  6. 元类编程-- __new__和__init__的区别

    class User: def __new__(cls, *args, **kwargs): print (" in new ") return super().__new__(c ...

  7. 元类编程--property动态属性

    from datetime import date, datetime class User: def __init__(self, name, birthday): self.name = name ...

  8. shell 25个常用命令

    1.列出所有目录使用量,并按大小排序.   ls|xargs du -h|sort -rn #不递归下级目录使用du -sh 2.查看文件排除以#开关和空白行,适合查看配置文件.   egrep -v ...

  9. Robot Framework Change chrome language

    由于open browser的参数只有一个ff_profile_dir,所以不能指定chrome profile. 只能通过python 传递lang这个参数去改变语言. python: from s ...

  10. 启动hbase输出ignoring option PermSize=128m; support was removed in 8.0告警信息

    ./start-hbase.sh starting master, logging to /home/hadoop/hbase-1.2.4/bin/../logs/hbase-hadoop-maste ...