angluar去掉url中#
2015-07-09 16:23
113 查看
众所周知,angular项目中路由机制会在地址栏加一个#来实现各个页面的切换,虽然url中有个#号也无伤大雅,但每次看到多一个这个东西总是不舒服(我不是强迫证啊),趁着项目间隙还是决定把它去掉。
去谷哥百度一下,发现用html5的形式也解决这个问题,就一行代码,so easy.
我把这行代码加入了app.js的config中然后运行一下,发现并没有什么卵用,还报了错。
好吧,原来还要加index.html的header中加入base标签。
OK, base标签加上之后果然运行成功,#成功去掉。
等等!
然而并没有那么简单,当我刷新页面时居然报出了404,什么鬼?!
在谷歌的帮助下我找到了原因,我还是太天真了,上边这种形式只适用于客户端的页面跳转,不适用于重新请求服务器。。。这不是坑爹吗?
终于还在谷歌的帮助下,还是让我找到了服务器端的解决方案,修改apache的配置文件,利用rewrite对发过来url地址进行重写(要确保apache中已安装rewrite模块)。
apache配置文件:
重新启动apache,运行成功,完美去掉#。
打完收工。
参考1 https://github.com/yeoman/generator-angular/issues/433
参考2 https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
参考3 http://www.tech.theplayhub.com/angularjs_routeprovider_404/
去谷哥百度一下,发现用html5的形式也解决这个问题,就一行代码,so easy.
$locationProvider.html5Mode('true');
我把这行代码加入了app.js的config中然后运行一下,发现并没有什么卵用,还报了错。
好吧,原来还要加index.html的header中加入base标签。
<base href="/">
OK, base标签加上之后果然运行成功,#成功去掉。
等等!
然而并没有那么简单,当我刷新页面时居然报出了404,什么鬼?!
在谷歌的帮助下我找到了原因,我还是太天真了,上边这种形式只适用于客户端的页面跳转,不适用于重新请求服务器。。。这不是坑爹吗?
终于还在谷歌的帮助下,还是让我找到了服务器端的解决方案,修改apache的配置文件,利用rewrite对发过来url地址进行重写(要确保apache中已安装rewrite模块)。
apache配置文件:
<VirtualHost *:80> ServerName my-app DocumentRoot /path/to/app <Directory /path/to/app> RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] </Directory> </VirtualHost>
重新启动apache,运行成功,完美去掉#。
打完收工。
参考1 https://github.com/yeoman/generator-angular/issues/433
参考2 https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
参考3 http://www.tech.theplayhub.com/angularjs_routeprovider_404/
相关文章推荐
- 第1章 Lua基础
- lua
- Lua编程示例(八):生产者-消费者问题
- Lua脚本之语法基础快速入门
- Lua编程示例(七):协同程序基础逻辑
- Lua编程示例(六): C语言调用Lua函数
- Lua编程示例(五): C语言对Lua表的读取和添加
- lua的几个时间相关处理函数
- Lua编程示例(三):稀疏表、双端队列、格式化输出、表和循环表的格式化输出
- Lua编程示例(二):面向对象、metatable对表进行扩展
- Lua编程示例(一):select、debug、可变参数、table操作、error
- Lua函数用法研究
- lua 安装配置
- Lua中调用C++函数示例
- C++中调用Lua配置文件和响应函数示例
- Lua脚本语言基本语法快速入门教程
- Lua在windows下的安装及环境配置
- Lua和C++交互总结(很详细)
- 浅谈chuck-lua中的多线程
- 整理 ubuntu14.04下lua开发环境搭建及测试