棱角分明 从访问路径的网址中删除#号

本文内容

URL的#问题找到了错误的原因。静态网站的解决方案。动态网站的解决方案一、网址的#问题

使用AngularJS的朋友应该知道，AngularJS框架定义了自己的前端路由控制器，通过不同的URL实现了从一个侧面(ng-app)对ng-view的部署和刷新，支持HTML5的历史功能。有关详细信息，请参考文章：AngularJS路由和模板。

默认情况下，不启动HTML5模式，URL中包含#号，以区分AngularJS管理的路径和WebServer管理的路径。

例如，下面带#的URL就是AngularJS管理的路径。

http://on book . me/http://on book . me/#/http://on book . me/#/book http://on book . me/#/关于这种体验其实不是很友好，尤其是像我这样喜欢简约设计的人。#的出现不是我自己的意愿，所以我觉得不舒服。AngularJS框架提供了一个HTML5模式的路由，可以直接去掉#号。

只需设置$ location provider . html 5 mode(true)。

Book.config (['$ routeprovider '，' $ locationprovider '，function ($ routeprovider，$ locationprovider) {//.省略代码$ location provider . html 5 mode(true)；}]);路由支持HTML5的网址。

http://onbook.me/http://onbook.me/bookhttp://onbook.me/about's下一个问题来了，当道路是这样设置的。如果用户从主页(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？

有两种情况：

1.如果用户先访问主页(http://onbook.me)，然后跳转到页面(http://onbook.me/book)，跳转的是AngularJS前台管理的URL，访问正常。

2.当用户直接访问页面(http://onbook.me/book)时，请求首先提交到WebServer的后台，后台路由没有页面对应的路由管理(http://onbook . me/book)，会出现错误404。

如果能理解这一层，技术上就很容易解决了。我们可以通过将AngularJS管理的所有路由URL发送到ng-app来解决404的问题。同时没有#，也支持HTML5历史查询！

实施分为两种解决方案：

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并添加基本标签。

html lang=' zh-cn ' ng-app=' book ' head base href='/' rel=' external no follow '/省略code /head编辑app.js并添加$ location provider . html 5 mode(true)；

book.config(['$routeProvider '，' $locationProvider '，' $ scepider '，' tplProvider '，function ($routeProvider，$locationProvider，$ scepider，tplProvider) { $routeProvider。when('/'，{ template URLs : tplprovider . html(' welcome ')，controller: 'WelcomeCtrl'})。when('/book '，{ template URL 3360 plprovider . html(' book ')，Controller : ' book ctrl ' })//book . when('/book-R1 '，{ template URL 3360 plprovider . html(' book-R1 ')，Controller : ' book R1 ctrl ' })//r的极客理想。当('/video '，{ template URL 3360 TPL provider . html(' video ')，controller : ' video ctrl ' })//video。当('/about '，{ template URL 3360 TPL provider . html(' about ')，controller : ' about ctrl ' })//关于作者。否则({ redirectto : '/' })；$ location provider . html 5 mode(true)；}]);编辑nginx的配置文件并添加try_files配置。

服务器{ set $ htdocs/www/deploy/mysite/on book；听80；server _ name onbook.me位置/{ root $ htdocs；try _ files $ uri $ uri//index . html=404；}}这样静态网站就定下来了，没有什么麻烦的#，可以直接访问，在任何页面都可以刷新。

四、动态网站的解决方案

动态网站，我们还需要修改三个文件。

index.html : ng-app的定义文件

App.js :对应ng-app的控制文件

server.js : Express框架的路由访问控制文件

修改了Index.html和app.js，与静态网站解决方案相同。动态网站一般不直接通过Nginx路由，而是由web服务器管理。假设我们使用的是Node.js的快速网络框架

打开Express框架的路由访问控制文件server.js，添加路由配置。

app.use(function (req，RES){ console . log(req . path)；if(req . path . indexof('/API '=0){ RES . send('服务器文本')；}else{ //angular启动页面RES . send file(' app/index . html ')；}});设置当站内路径(req.path)不包含/api时，将转发给AngularJS的ng-app(index.html)。因此，当我们直接访问地址(http://onbook.me/book)时，/book不包含/api，它会直接转发给AngularJS进行路由管理。我们实现了路由的优化！

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。