AngularJS去掉的URL裡的 號

2021-07-08 16:22:42 字數 1672 閱讀 6555

前言

天天都在用angularjs,各類文件也都看過好幾遍,但總是些程式設計上的事找不到優雅的解決辦法。今天終於把angularjs的專案訪問路徑url裡的#號去掉了,這個問題不見得有多難,關鍵是花多長時間去理解angularjs框架本身。目錄

url的#號問題

找到錯誤原因

靜態**的解決方案

動態**的解決方案

對於預設的情況,是不啟動html5模式的,url中會包括乙個#號,用來區別是angularjs管理的路徑還是webserver管理的路徑。

比如:下面的帶#號的url,是angularjs管理的路徑。

通過設定$locationprovider.html5mode(true)就行了。

book.config(['$routeprovider', '$locationprovider', function ($routeprovider, $locationprovider) ]);
支援html5的路由url。

接下來的問題就來了,當用這種方式設定了路徑以後。如果使用者從首頁(開始訪問,然後跳轉到 圖書頁(一切正常。但如果使用者直接開啟 圖書頁( ,就會出現404錯誤。

就是這個問題糾結了我好長時間,讓我不得不用帶#號的url。

那麼,這個問題的原因出在**了呢? 在路徑解析上出錯了。

分2種情況看:

實現起來分為2種解決方案:

靜態**,我們需要修改的地方包括3個檔案

nginx.conf : nginx的**配置檔案

編輯 index.html,增加base標籤。

book.config(['$routeprovider', '$locationprovider', '$sceprovider', 'tplprovider', function ($routeprovider, $locationprovider, $sceprovider, tplprovider) )

.when('/book', ) //圖書

.when('/book-r1', ) //r的極客理想

.when('/about', ) //關於作者

.otherwise();

$locationprovider.html5mode(true);

}]);

編輯nginx的配置檔案,增加try_files配置。

server 

}

這樣,靜態**就搞定了,沒有麻煩的#號了,可以直接訪問和任意頁面的重新整理。

動態**,我們同樣需要修改的地方包括3個檔案。

server.js : express框架的路由訪問控制檔案

開啟express框架的路由訪問控制檔案server.js,增加路由配置。

console.log(req.path);

if(req.path.indexof('/api')>=0)else

});

我已用了angularjs有8-9個月了,主要功能都用到了,但還不見其全貌。經常會遇到各種問題,不過比起jquery的各種無解的問題,還是值得的。優秀的框架值得我們的研究和使用,在摸索中前進!

AngularJS去掉URL中的 號

from 前言 天天都在用angularjs,各類文件也都看過好幾遍,但總是些程式設計上的事找不到優雅的解決辦法。今天終於把angularjs的專案訪問路徑url裡的 號去掉了,這個問題不見得有多難,關鍵是花多長時間去理解angularjs框架本身。目錄 url的 號問題 找到錯誤原因 靜態 的解決...

關於AngularJS去掉的URL裡的 號

原文 url的 號問題 對於預設的情況,是不啟動html5模式的,url中會包括乙個 號,用來區別是angularjs管理的路徑還是webserver管理的路徑。比如 下面的帶 號的url,是angularjs管理的路徑。通過設定 locationprovider.html5mode true 就行...

AngularJs去掉鏈結中的「 」

angularjs的路由機制會給鏈結中新增乙個 是跳到子頁面的錨點。由於專案需求,需要將鏈結中的 去掉,其實angular還提供了html5mode 跳轉機制。config function locationprovider 其實前兩步的設定已經可以實現去掉 跳轉了,但是每次重新整理或者直接輸鏈結進...