最近想把以前一个用Asp.Net MVC做的项目前端改成用Angularjs,在路由那里,因为Angularjs的路由嵌套很复杂,就用了angular-ui-router,
不过不管是用Angularjs的router还是用angular-ui-router,在地址栏显示的是“http://localhost:8390/home.html#/index”,看起来非常难看,而看了其他网上用Angularjs做的网站,
如“http://angularjs.cn/latest”、“https://www.ele.me/shop/902882/rate”,
这些都看不到“.html”、“#”这种,
或者如“https://angular-ui.github.io/ui-router/site/#/api/ui.router”这种就只有一个“#”分隔。
请教下各位大神怎么做成这种效果?而不是“xxx.html#/xxx”这种不好看的样式。谢谢!
最终解决方案详见Chobits大神的内容,已经完美解决。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/
http://stackoverflow.com/questions/25730797/asp-net-mvc-hosting-angular-app-with-html5mode-and-routing
http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P
header里设置
新建app文件夹 把index.html放入
Try changing your RouteConfig.cs, like this:
Azure IIS Rewrites:
url中怎么显示 你在配置中是可以自己写的,比如下面一段配置。
楼主已经知道
angular-ui-router和angular的一些用法可以看到上面的每条路由几乎都是
一个状态对应着一个url一个模板一个控制器当某个
状态触发的时候,地址栏中显示的就是你在这份配置中该状态对应的url,并且当前页面渲染的是该状态对应的模板,模版中的数据,逻辑等来自该条路由的控制器。所以楼主,url怎么显示,是你自己定的,你不要在url中设置 *.html,就不会出现你所说的情况了呀
1.使用angular的话是可以配置你的路由显示模式的,使用
$locationProvider服务来进行配,默认的情况下使用的是标签模式,也就是我们常见的那种带有#的模式,不过也可以启用html5Mode模式来去除路由中的#;可以像下面这样使用:这样你的路由就是
html5Mode模式了。2.如果是本地测试的话,那么一般情况下建议使用browserSync结合gulp或者webpack开启本地服务,进行测试。
这个就是打开姿势的问题了,我分别试了三种方式(
ng-ui-router)没做任何特殊配置:1.直接打开文件,url是这样的:
file:///Users/showonne/Desktop/ngdemo/index.html#/login,2.在webstorm中点击chrome图标打开(其实是webstorm给你开了一个简单的files server),url是这样的:
http://localhost:63342/ngdemo/index.html#/login,3.使用
browser-sync在项目的根目录下启动服务browser-sync start --server --files .,url是这样的:http://localhost:3002/#/index。总结一下: 应该发现了,前两个url比最后一个多了一层
ngdemo,其实就是文件服务器host的根目录不同。