本文目录
- URL的#号问题
- 找到错误原因
- 静态网站的解决方案
- 动态网站的解决方案
一、 URL的#号问题
使用AngularJS的朋友都应该了解,AngularJS框架定义了自己的前端路由控制器,通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新,并支持HTML5的历史记录功能,详细介绍可以参考文章:AngularJS路由和模板。
对于默认的情况,是不启动HTML5模式的,URL中会包括一个#号,用来区别是AngularJS管理的路径还是WebServer管理的路径。
比如:下面的带#号的URL,是AngularJS管理的路径。
http://onbook.me/ http://onbook.me/#/ http://onbook.me/#/book http://onbook.me/#/about
这种体验其实是不太友好的,特别是像我这种喜欢简洁设计的人,#号的出现非我自愿的,怎么看怎么难受。AngularJS框架提供了一种HTML5模式的路由,可以直接去掉#号。
通过设置$locationProvider.html5Mode(true)
就行了。
book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { //..省略代码 $locationProvider.html5Mode(true); }]);
支持HTML5的路由URL。
http://onbook.me/ http://onbook.me/book http://onbook.me/about
接下来的问题就来了,当用这种方式设置了路径以后。如果用户从首页(http://onbook.me/)开始访问,然后跳转到 图书页(http://onbook.me/book)一切正常。但如果用户直接打开 图书页(http://onbook.me/book) ,就会出现404错误。
就是这个问题纠结了我好长时间,让我不得不用带#号的URL。
二、找到错误原因
那么,这个问题的原因出在哪里了呢? 在路径解析上出错了。
让我从头说起,AngularJS是单页应用,一个ng-app对应一个页面,一个URL。AngularJS实现了自己的前端路由,让一个ng-app可以管理多个URL,再对应到多个ng-vew上面。当我们去访问URL(http://onbook.me/book) 的时候,怎么确定这个路径是 WebServer 后台管理的URL还是AngularJS前台管理的URL呢?
分2种情况看:
1. 用户如果是先访问 首页(http://onbook.me),然后再跳转到 页面(http://onbook.me/book),则这个跳转是由AngularJS前台管理的URL,访问是正常的。
2. 用户直接访问 页面(http://onbook.me/book)时,请求是先被提交到了WebServer后台,后台路由没有对应页面(http://onbook.me/book)的路由管理,就会出现404的错误。
如果能把这层想明白,技术上就非常容易解决了。我们让WebServer把属于AngularJS管理的路由URL,都发转到ng-app就可以解决404的问题了,同时,没有#号,还支持HTML5的历史记录查询!!
实现起来分为2种解决方案:
1. 静态网站:纯前台网站(JS+HTML+CSS),通过Nginx提供Web服务。
2. 动态网站:前台(JS + HTML + CSS) + 后台Node.js提供Web服务。
三、静态网站的解决方案
静态网站,我们需要修改的地方包括3个文件
index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
nginx.conf : nginx的网站配置文件
编辑 index.html,增加base标签。
<html lang="zh-CN" ng-app="book"> <head> <base href="/" rel="external nofollow" > // 省略代码 </head>
编辑app.js,增加 $locationProvider.html5Mode(true);
book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) { $routeProvider .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'}) .when('/book', {templateUrl: tplProvider.html('book'), controller: 'BookCtrl'}) //图书 .when('/book-r1', {templateUrl: tplProvider.html('book-r1'), controller: 'BookR1Ctrl'}) //R的极客理想 .when('/video', {templateUrl: tplProvider.html('video'), controller: 'VideoCtrl'}) //视频 .when('/about', {templateUrl: tplProvider.html('about'), controller: 'AboutCtrl'}) //关于作者 .otherwise({redirectTo: '/'}); $locationProvider.html5Mode(true); }]);
编辑nginx的配置文件,增加try_files配置。
server { set $htdocs /www/deploy/mysite/onbook; listen 80; server_name onbook.me; location / { root $htdocs; try_files $uri $uri/ /index.html =404; } }
这样,静态网站就搞定了,没有麻烦的#号了,可以直接访问和任意页面的刷新。
四、动态网站的解决方案
动态网站,我们同样需要修改的地方包括3个文件。
index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
server.js : Express框架的路由访问控制文件
index.html 和 app.js两个文件修改,同静态网站的解决方案。动态网站,一般不是通过Nginx直接路由,而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。
打开Express框架的路由访问控制文件server.js,增加路由配置。
app.use(function (req, res) { console.log(req.path); if(req.path.indexOf('/api')>=0){ res.send("server text"); }else{ //angular启动页 res.sendfile('app/index.html'); } });
设置当 站内路径(req.path) 不包括 /api 时,都转发到 AngularJS的ng-app(index.html)。所以,我们再直接访问地址 (http://onbook.me/book)时,/book 不包括 /api,就会被直接转发到AngularJS进行路由管理。我们就实现了路由的优化!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]