AngularJS中如何移除URL中的#

本篇文章為大家展示了AngularJS中如何移除URL中的#，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司主營曲沃網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),曲沃h5小程序定制開發(fā)搭建,曲沃網(wǎng)站營銷推廣歡迎曲沃等地區(qū)企業(yè)咨詢

AngularJS 默認(rèn)將會使用一個 # 號來對URL進(jìn)行路由.

例如:

http://example.com/
http://example.com/#/about
http://example.com/#/contact

要獲得干凈的URL并將井號從URL中移除是很容易的.

完成兩件事情就行了.

配置 $locationProvider
設(shè)置我們的相對連接的起點路徑

$location 服務(wù)

在Angular中, $location服務(wù)會解析地址欄中的URL，并對你的應(yīng)用程序作出改變，反之亦然.

我強(qiáng)烈推薦通讀官方的 Angular $location 文檔以對$location 服務(wù)及其所提供的特性有一個了解.

$locationProvider 和 html5 模式（html5Mode）

我們會使用 $locationProvider 模塊，并將html5Mode設(shè)置為true.

我們會在你定義Angular應(yīng)用程序并配置你的路由時做這些.

angular.module('scotchy', [])            .config(function($routeProvider, $locationProvider) {           $routeProvider              .when('/', {                  templateUrl : 'partials/home.html',                  controller : mainController              })              .when('/about', {                  templateUrl : 'partials/about.html',                  controller : mainController              })              .when('/contact', {                  templateUrl : 'partials/contact.html',                  controller : mainController              });                // use the HTML5 History API          $locationProvider.html5Mode(true);      });

什么是 HTML5 History API? 它是使用一個腳本來操作瀏覽器歷史的標(biāo)準(zhǔn)方法. 有了它就能在不刷新頁面的前提下讓 Angular 改變路由和頁面的URL. 更多的信息，這里有一篇蠻好的 HTML5 History API 文章.

為相對鏈接設(shè)置<base>

為了在應(yīng)用程序各處使用相對鏈接，你將需要在你文檔的<head>里面設(shè)置一個<set>.

<!doctype html> <html> <head>     <meta charset="utf-8">      <base href="/"> </head>

有大量的方法可以用來配置這個東西，而將HTML5Mode設(shè)置為true就會自動的解析相對鏈接了. 在我這兒這種方式總是能起效. 如果你應(yīng)用程序的根同url相比有所不同,例如 /my-base, 那就用那個作為你的起點路徑.

老瀏覽器的回調(diào)

$location服務(wù)對不支持HTML5瀏覽歷史API的瀏覽器將自動回調(diào)hashbang方法。

一切的發(fā)生對你是透明的，你不需為此做任何配置。從Angular $location文檔中，你可以看到回調(diào)的方法已經(jīng)它是如何工作的。

AngularJS中如何移除URL中的#

這是一個在Angular應(yīng)用中獲得漂亮URL并刪除哈希標(biāo)記的簡單方法。

上述內(nèi)容就是AngularJS中如何移除URL中的#，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：AngularJS中如何移除URL中的#
URL分享：http://bm7419.com/article22/pcdpcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗、企業(yè)網(wǎng)站制作、虛擬主機(jī)、企業(yè)建站、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容