ngRoute 配置路径不能跳转问题
1.原因:AngularJS 版本更新至1.6后对地址做了特别处理。如:<a hret="#/someurl"> 在浏览器中被解析为“#!%2Fsomeurl”,导致路由无法跳转。
解决办法:如果您希望路由中没有哈希前缀,那么可以通过向应用程序添加配置块来恢复以前的行为如下:stackoverflow中的连接
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
2.ngRoute使用实例(mvc web项目为例子)
一 新建ASP.NET Web应用程序(.NET Framework),进入后选择mvc

二 使用nuget包管理安装angular1.6包,并添加文件夹结构如下


在BundleConfig.cs中添加如下代码
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-animate.js"
));
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/App_Myapp/js/app.js"
));
在—layout.cshtml中添加如下内容

app.js文件中内容如下:
var app = angular.module('myapp', ['ngRoute', 'ngAnimate']);
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/App_Myapp/Index', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/Index.html'
})
.when('/App_Myapp/Table1', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/tables/Table1.html'
})
.when('/App_Myapp/Table2', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/tables/Table2.html'
})
.otherwise({ redirectTo: '/App_Myapp/Index' });
}]);
app.controller('HomeController', ['$scope', function ($scope) {
$scope.title = "这是一个AngularJS应用程序";
}]);
点击运行即可
ngRoute 配置路径不能跳转问题的更多相关文章
- 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转
一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...
- nginx配置http强制跳转https
nginx配置http强制跳转https 网站添加了https证书后,当http方式访问网站时就会报404错误,所以需要做http到https的强制跳转设置. 一.采用nginx的rewrite方法 ...
- Nginx 配置 http 强制跳转到 https
个人真实配置 架构:Nginx 反向代理 + Nginx 前端(LNMP) 在 Nginx 反向代理的 虚拟机主机配置文件中,作如下配置: upstream ilexa_cn { server 192 ...
- k8s中的nginx-ingress如何配置路径重定向
k8s中的nginx-ingress如何配置路径重定向 一. 需求描述 路径重定向的一般应用场景: 调整用户浏览的URL,看起来更规范 为了让搜索引擎收录网站内容,让用户体验更好 网站更换新域名后 根 ...
- jsp中的路径与跳转
在jsp(serlvet)中,页面的"变换"有两种方式,第一重定向,第二转发: 先说重定向,它的调用方式是这样的 response.sendredirect("uri&q ...
- cdnbest配置强制ssl跳转
如何配置强制ssl跳转 1. 登陆用户站点,点击下图图标: 2. 如下图添加证书和开启强制ssl即可 hsts解释和作用: 国际互联网工程组织IETF正在推行一种新的Web安全协议HTTP Stric ...
- webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板
在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值. 并配置webpack打包文件配置路径: 配置webpack打包文件路径,及非入口 chunk文件: ...
- 如何解决安装istio后istioctl命令每次使用都需要重新配置路径
Kubernetes在安装istio后初次使用istioctl命令时会提示istioctl command not found 这时候如果在istio文件夹的根目录下配置 export PATH=$P ...
- 修改Nodejs内置的npm默认配置路径方法
Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下(吐槽一下:不明白为啥现在的软件都喜欢把资源装在这里) C盘这么小,肯定是不行的,下面一步步修改到D盘 1.打开cmd命令行, ...
随机推荐
- Python Pandas库 初步使用
用pandas+numpy读取UCI iris数据集中鸢尾花的萼片.花瓣长度数据,进行数据清理,去重,排序,并求出和.累积和.均值.标准差.方差.最大值.最小值
- Metalama简介2.利用Aspect在编译时进行消除重复代码
上文介绍到Aspect是Metalama的核心概念,它本质上是一个编译时的AOP切片.下面我们就来系统说明一下Metalama中的Aspect. Metalama简介1. 不止是一个.NET跨平台的编 ...
- 2021.08.05 P2168 荷马史诗(哈夫曼树模板)
2021.08.05 P2168 荷马史诗(哈夫曼树模板) [P2168 NOI2015] 荷马史诗 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.k叉哈夫曼树如果子结 ...
- c++:-2
上节介绍C++的函数介绍:c++:-1,本节学习类与对象 类与对象 定义 类定义 class 类名称 { public: 公有成员(外部接口) private: 私有成员 protected: 保护型 ...
- CTO 说了,如果发现谁用 kill -9 关闭程序就开除
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 来源:blog.csdn.net/qq_33220089 正文 kil ...
- Nginx编译安装及常用命令
一个执着于技术的公众号 前言 前面我们已经了解Nginx基础入门知识,今天就带大家一起学习下Nginx编译安装部署 准备工作 一台linux机器(本次实验以CentOS 7.5为例) 到Nginx官方 ...
- Linux启动故障排查和修复技巧
一个执着于技术的公众号 我发现Linux系统在启动过程中会出现一些故障,导致系统无法正常启动,我在这里写了几个应对单用户模式.GRUB命令操作.Linux救援模式的故障修复案例帮助大家了解此类问题的解 ...
- 让服务调用更简单 - Caller.HttpClient
前言 绝大多数项目都离不开服务调用,服务的调用方式通常是基于Http.RPC协议的调用,需要获取到对应服务的域名或者ip地址以及详细的控制器方法后才能进行调用,如果项目需要支持分布式部署,则需要借助服 ...
- .NET 中 GC 的模式与风格
垃圾回收(GC)是托管语言必备的技术之一.GC 的性能是影响托管语言性能的关键.我们的 .NET 既能写桌面程序 (WINFROM , WPF) 又能写 web 程序 (ASP.NET CORE),甚 ...
- 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理,简单粗暴!
"整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...