Angular.JS去掉访问路径URL中的#号详解


Posted in Javascript onMarch 30, 2017

本文目录

  • 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错误。

Angular.JS去掉访问路径URL中的#号详解

就是这个问题纠结了我好长时间,让我不得不用带#号的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进行路由管理。我们就实现了路由的优化!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
js实现简易计算器功能
Oct 18 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
管理心得体会
2013/12/28 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
伦敦奥运会口号
2014/06/13 职场文书
广播体操口号
2014/06/18 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
python 实现图片特效处理
2022/04/03 Python