溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)

發(fā)布時(shí)間：2021-08-17 11:36:29 來(lái)源：億速云 閱讀：153 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要介紹“Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)”，在日常操作中，相信很多人在Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

本文目錄

  • URL的#號(hào)問(wèn)題

  • 找到錯(cuò)誤原因

  • 靜態(tài)網(wǎng)站的解決方案

  • 動(dòng)態(tài)網(wǎng)站的解決方案

一、 URL的#號(hào)問(wèn)題

使用AngularJS的朋友都應(yīng)該了解，AngularJS框架定義了自己的前端路由控制器，通過(guò)不同URL實(shí)現(xiàn)單面(ng-app)對(duì)視圖(ng-view)的部署刷新，并支持HTML5的歷史記錄功能，詳細(xì)介紹可以參考文章：AngularJS路由和模板。

對(duì)于默認(rèn)的情況，是不啟動(dòng)HTML5模式的，URL中會(huì)包括一個(gè)#號(hào)，用來(lái)區(qū)別是AngularJS管理的路徑還是WebServer管理的路徑。

比如：下面的帶#號(hào)的URL，是AngularJS管理的路徑。

http://onbook.me/
http://onbook.me/#/
http://onbook.me/#/book
http://onbook.me/#/about

這種體驗(yàn)其實(shí)是不太友好的，特別是像我這種喜歡簡(jiǎn)潔設(shè)計(jì)的人，#號(hào)的出現(xiàn)非我自愿的，怎么看怎么難受。AngularJS框架提供了一種HTML5模式的路由，可以直接去掉#號(hào)。

通過(guò)設(shè)置$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

接下來(lái)的問(wèn)題就來(lái)了，當(dāng)用這種方式設(shè)置了路徑以后。如果用戶從首頁(yè)(http://onbook.me/)開(kāi)始訪問(wèn)，然后跳轉(zhuǎn)到 圖書(shū)頁(yè)(http://onbook.me/book)一切正常。但如果用戶直接打開(kāi) 圖書(shū)頁(yè)(http://onbook.me/book) ，就會(huì)出現(xiàn)404錯(cuò)誤。

Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)

就是這個(gè)問(wèn)題糾結(jié)了我好長(zhǎng)時(shí)間，讓我不得不用帶#號(hào)的URL。

二、找到錯(cuò)誤原因

那么，這個(gè)問(wèn)題的原因出在哪里了呢？ 在路徑解析上出錯(cuò)了。

讓我從頭說(shuō)起，AngularJS是單頁(yè)應(yīng)用，一個(gè)ng-app對(duì)應(yīng)一個(gè)頁(yè)面，一個(gè)URL。AngularJS實(shí)現(xiàn)了自己的前端路由，讓一個(gè)ng-app可以管理多個(gè)URL，再對(duì)應(yīng)到多個(gè)ng-vew上面。當(dāng)我們?nèi)ピL問(wèn)URL(http://onbook.me/book) 的時(shí)候，怎么確定這個(gè)路徑是 WebServer 后臺(tái)管理的URL還是AngularJS前臺(tái)管理的URL呢？

分2種情況看：

      1. 用戶如果是先訪問(wèn) 首頁(yè)(http://onbook.me)，然后再跳轉(zhuǎn)到 頁(yè)面(http://onbook.me/book)，則這個(gè)跳轉(zhuǎn)是由AngularJS前臺(tái)管理的URL，訪問(wèn)是正常的。

      2. 用戶直接訪問(wèn) 頁(yè)面(http://onbook.me/book)時(shí)，請(qǐng)求是先被提交到了WebServer后臺(tái)，后臺(tái)路由沒(méi)有對(duì)應(yīng)頁(yè)面(http://onbook.me/book)的路由管理，就會(huì)出現(xiàn)404的錯(cuò)誤。

如果能把這層想明白，技術(shù)上就非常容易解決了。我們讓W(xué)ebServer把屬于AngularJS管理的路由URL，都發(fā)轉(zhuǎn)到ng-app就可以解決404的問(wèn)題了，同時(shí)，沒(méi)有#號(hào)，還支持HTML5的歷史記錄查詢??！

實(shí)現(xiàn)起來(lái)分為2種解決方案：

      1. 靜態(tài)網(wǎng)站：純前臺(tái)網(wǎng)站(JS+HTML+CSS)，通過(guò)Nginx提供Web服務(wù)。

      2. 動(dòng)態(tài)網(wǎng)站：前臺(tái)(JS + HTML + CSS) + 后臺(tái)Node.js提供Web服務(wù)。

三、靜態(tài)網(wǎng)站的解決方案

靜態(tài)網(wǎng)站，我們需要修改的地方包括3個(gè)文件

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

      app.js : 對(duì)應(yīng)ng-app的控制文件

      nginx.conf : nginx的網(wǎng)站配置文件

編輯 index.html，增加base標(biāo)簽。

<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'}) //圖書(shū)
 .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'}) //關(guān)于作者
 .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;
 }
}

這樣，靜態(tài)網(wǎng)站就搞定了，沒(méi)有麻煩的#號(hào)了，可以直接訪問(wèn)和任意頁(yè)面的刷新。

四、動(dòng)態(tài)網(wǎng)站的解決方案

動(dòng)態(tài)網(wǎng)站，我們同樣需要修改的地方包括3個(gè)文件。

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

      app.js : 對(duì)應(yīng)ng-app的控制文件

      server.js : Express框架的路由訪問(wèn)控制文件

index.html 和 app.js兩個(gè)文件修改，同靜態(tài)網(wǎng)站的解決方案。動(dòng)態(tài)網(wǎng)站，一般不是通過(guò)Nginx直接路由，而是通過(guò)Web服務(wù)器管理路由。假設(shè)我們使用的是Node.js的Express的Web框架。

打開(kāi)Express框架的路由訪問(wèn)控制文件server.js，增加路由配置。

app.use(function (req, res) {
 console.log(req.path);
 if(req.path.indexOf('/api')>=0){
 res.send("server text");

 }else{ //angular啟動(dòng)頁(yè)
 res.sendfile('app/index.html');
 }
});

設(shè)置當(dāng) 站內(nèi)路徑(req.path) 不包括 /api 時(shí)，都轉(zhuǎn)發(fā)到 AngularJS的ng-app(index.html)。所以，我們?cè)僦苯釉L問(wèn)地址 (http://onbook.me/book)時(shí)，/book 不包括 /api，就會(huì)被直接轉(zhuǎn)發(fā)到AngularJS進(jìn)行路由管理。我們就實(shí)現(xiàn)了路由的優(yōu)化！

到此，關(guān)于“Angular.JS怎么去掉訪問(wèn)路徑URL中的#號(hào)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手