欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-05 21:13:15
本文目录 url的#号问题 找到错误原因 静态网站的解决方案 动态网站的解决方案 一、 url的#号问题 使用angu...

本文目录

  • 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进行路由管理。我们就实现了路由的优化！

总结

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

上一篇： Oracle自动备份脚本

下一篇： 讲解Oracle数据库中的数据字典及相关SQL查询用法

推荐阅读