AngularJS之页面跳转Route
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的更多相关文章
- IE下angularJS页面跳转的bug
用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没 ...
- AngularJS进阶(八)实现页面跳转并进行参数传递
angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...
- angularjs项目的页面跳转如何实现
链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- AngularJs应用页面切换优化方案(转)
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
- AngularJs应用页面
AngularJs应用页面切换优化方案 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如 ...
- 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转
一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...
- AngularJS单页面路由配置恩,理解了就很简单啦
利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...
随机推荐
- Ubuntu16.04+Cuda8.0+1080ti+caffe+免OpenCV3.2.0+faster-rCNN教程
一.事先声明:1.Ubuntu版本:Ubuntu使用的是16.04.而不是16.04.1或16.04.2,这三个是有区别的.笔者曾有过这样的经历,Git上一个SLAM地图构建程序在Ubuntu14.0 ...
- ubuntu14安装tensorflow并测试
1.ubuntu版本的选择:看了很多博文,建议使用ubuntu14,稳定兼容性好. 2.tensorflow的安装: http://wiki.jikexueyuan.com/project/tenso ...
- bzoj 4069 [Apio2015]巴厘岛的雕塑 dp
[Apio2015]巴厘岛的雕塑 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 494 Solved: 238[Submit][Status][Dis ...
- 游戏编程入门之测试Xbox360控制输入
代码: #include<Windows.h> #include<d3d9.h> #include<d3dx9.h> #include<Xinput.h> ...
- 痛苦之旅——安装Eric4
因为想做桌面程序,所以在学PyQt4, 顺便装了下Eric4,这Eric4装起来可不简单,活活花了一个星期..... 网上有很多装Eric4的教程,详细我就不说了,大概步骤是: 1.安装SIP (需要 ...
- 浏览器报错:unexpected end of input 解决方法
直接上报错代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- ConvexScore
题目描述 You are given N points (xi,yi) located on a two-dimensional plane. Consider a subset S of the N ...
- c版http服务器 shttpd-1.38 vs2013
有个项目,本来是外网的.要做一个局域网版本. 项目启动就获取一大堆http的数据.考虑到可以提供http服务的软件虽然多,但是多要安装这样那样的软件,还要配置环境或者配置资源等问题. 发布的时候给人一 ...
- Drainage Ditches(POJ1273+网络流+Dinic+EK)
题目链接:poj.org/problem?id=1273 题目: 题意:求最大流. 思路:测板子题,分别用Dinic和EK实现(我的板子跑得时间均为0ms). Dinic代码实现如下: #includ ...
- FZUOJ 2205 据说题目很水 (无三元环图最大边数)
Problem Description Sunday最近对图论特别感兴趣,什么欧拉回路什么哈密顿回路,又是环又是树.在看完一本书后,他对自己特别有信心,便找到大牛牛犇犇,希望他出一题来考考自己. 在遥 ...