干净的 angularjs router

Paste_Image.png

angularjs 确实好用, 但是每次访问angular的 资源的时候url 后面总是带个#号让人略显不爽.
<pre>http://localhost:7160/boss/index.html#/auth/login</pre>

以下办法可以教你去除url后面的符号 变成干净整洁的url
以上特性都建立在html5 history上面, 具体参考这个(http://diveintohtml5.info/history.html)
简单来说可以使用javascript修改地址栏路径,而不刷新页面。

<pre>http://localhost:7160/boss/auth/login</pre>

html5mode

$locationProvider --> html5Mode
在 angularjs 中 只需要开启html5Mode的模式 就可以使用这个特性 位置是在路由配置的地方
<pre>
$locationProvider.html5Mode(true)
</pre>

<base>

<pre>
<head>
<base href="/项目名/index.html">
</head>
</pre>

在head中写入base 标签 这里采用根路径定位当前index.html
关于base配置可参考angularjs 官方文档
https://docs.angularjs.org/error/$location/nobase

部署服务器重写

当你发现刷新页面 或者新打开一个url的时候 显示404 这部分是因为url 交给服务端接管了 解决办法 在服务端 检查发现url 来自angular 转发给我们的base即可

服务器端配置

nginx
<pre>
server {
server_name my-app; root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
</pre>

Paste_Image.png

其他服务器请参考如下链接:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

参考文章 :
http://www.tuicool.com/articles/7NnUFr2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,308评论 19 139
  • Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内...
    一口咖啡一口茶阅读 15,427评论 5 39
  • Angular应用程序启动 ng-app指令 指令指定Angular应用程序的根(root)元素,用于启动Angu...
    angelwgh阅读 3,262评论 0 1
  • 时光了无踪, 景似人不同。 平明一阵风乍起, 何处夕阳红? ——17.5.2夜于夜宵前发呆随笔,囫囵吞枣,不得其味。
    吴凡风之翼阅读 975评论 0 0
  • 自大的苹果 慢慢成熟的喜欢 渐渐发酵的寂寞 剔除腐烂的爱 剩下的 可食用
    大写的张十五阅读 1,781评论 0 0