Angular.JS去掉访问路径URL中的#号详解
本文目录
- 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进行路由管理。我们就实现了路由的优化！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
解析AngularJS中get请求URL出现的跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"
-
AngularJS利用Controller完成URL跳转
具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button
-
AngularJS通过$location获取及改变当前页面的URL
注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati
-
移除AngularJS下URL中的#字符的方法
AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了. 配置 $locationProvider 设置我们的相对连接的起点路径 $location 服务 在Angular中, $location服务会解析地址栏中的URL,并对你的应用程序作出改变,反之亦
-
Angular.JS去掉访问路径URL中的#号详解
本文目录 URL的#号问题 找到错误原因 静态网站的解决方案 动态网站的解决方案 一. URL的#号问题 使用AngularJS的朋友都应该了解,AngularJS框架定义了自己的前端路由控制器,通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新,并支持HTML5的历史记录功能,详细介绍可以参考文章:AngularJS路由和模板. 对于默认的情况,是不启动HTML5模式的,URL中会包括一个#号,用来区别是AngularJS管理的路径还是WebServer管理的路径. 比如
-
Angular2+如何去除url中的#号详解
前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧. 1. 为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题: 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径: '#'有点丑. 2. 怎
-
Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,:http://www.jb51.net/article/79536.htm 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.js var http = require('http'); var fs = require('fs');//引入文件读取模块 var documentRoot = '/node/www';//需要访问的文件的存放目录 var
-
Python Django获取URL中的数据详解
目录 Django获取URL中的数据 URL路径参数 使用path函数 使用re_path函数 URL关键字形式 总结 Django获取URL中的数据 URL中的参数一般有两种形式.如下所示: 1. https://zy010101.blog.csdn.net/article/details/120816954 2. https://so.csdn.net/so/search?q=Django&t=blog&u=zy010101 我们将第一种形式称为"URL路径参数":
-
SpringBoot配置项目访问路径URL的根路径方式
目录 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 2.SpringBoot在2.0之后版本 设置默认访问路径 1.继承WebMvcConfigurerAdapter类或实现WebMvcConfigurer接口 2.@Controller路由设置 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 使用server.context-path server.context-path=/api 2.SpringBoot在2.0之后版本 使用serve
-
URL中“#” “？” &“”号的作用浅析
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username 这是主流网站第一次将"#"大规模用于重要URL中.这表明井号(Hash)的作用正在被重新认识.本文根据HttpWatch的文章,整理与井号有关的所有重要知识点. 一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置
-
URL中井号的作用介绍
URL中的井号(#)是比较常见的,它并不影响网址的指向,而是有众多功能和特点的.下面就为大家介绍一些有关井号的故事. 1.页面中的某一个位置可以用井号在URL中指定 井号作为比较长出现在URL的一种符号,通常也会代表这个页面中的某一个位置,比如:http://aoshu.juren.com/chzt/xiaoxueshijuan/index.html#nn1,此URL表示在这个页面中nn1的位置.浏览器读取这个URL后,会自动将nn1位置滚动至可视区域. 设置描点只需在相应位置添加,然后在按钮的
-
python爬虫中的url下载器用法详解
前期的入库筛选工作已经由url管理器完成了,整理的工作自然要由url下载器接手.当我们需要爬取的数据已经去重后,下载器的主要任务的是这些数据下载下来.所以它的使用也并不复杂,不过需要借助到我们之前所学过的一个库进行操作,相信之前的基础大家都学的很牢固.下面小编就来为大家介绍url下载器及其使用的方法. 下载器的作用就是接受URL管理器传递给它的一个url,然后把该网页的内容下载下来.python自带有urllib和urllib2等库(这两个库在python3中合并为urllib),它们的作用就是
-
Webpack中publicPath使用详解
目录 output output.path output.publicPath webpack-dev-server中的publicPath html-webpack-plugin template filename 最后 斜杠/的含义 参考 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output outp
-
原生js实现贪食蛇小游戏的思路详解
先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>