在 AngularJS 中啟用 HTML5 模式

Muhammad Adil 2023年1月30日 2022年4月20日
  1. AngularJS 中 HTML5 模式的使用
  2. 在 AngularJS 中啟用 HTML5 模式的步驟
在 AngularJS 中啟用 HTML5 模式

本文將指導你在 AngularJS 應用程式上啟用帶有深度連結的 HTML5 模式。

AngularJS 中 HTML5 模式的使用

$locationProvider.html5Mode 是一種告訴瀏覽器它需要對 URL 使用 HTML5 模式而不是舊的 HTTP 協議的方法。這將允許瀏覽器使用舊版瀏覽器不支援的諸如 pushState 之類的功能。

此外,我們應該將它用於 AngularJS 應用程式,因為它比舊模型具有一些優勢:

  • $locationProvider.html5Mode 允許開發人員在其應用程式中使用 HTML5 的 History API 進行 URL 導航和歷史管理,這為處理瀏覽器應用程式中的 URL 提供了一個強大而可靠的解決方案。
  • 更容易除錯,我們可以從 Chrome 開發者工具中檢查每個 URL。
  • 它還提供更好的效能,尤其是在頁面之間導航時。
  • 它為使用者提供可收藏的體驗,並啟用共享連結、深度連結等功能。

在 AngularJS 中啟用 HTML5 模式的步驟

以下步驟將向你展示如何為 html5Mode 設定 AngularJS 應用程式:

  • 在你的應用程式模組中包含 ngHref 庫。
  • 建立一個覆蓋 $locationProvider() 函式並將 html5Mode 設定為 true 的新服務提供者。將此屬性設定為 false 將禁用 html5Mode 並使用預設瀏覽器的位置處理。

TypeScript 程式碼:

var app = angular.module('Deo', ['ui.router']);

app.controller('Sample', function($scope, $state) {
    $scope.name = 'demo';
});

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
  
    $stateProvider
    .state('Home', {
        url: '/Home',
        template: '<h3>Home tab is active</h3>',
    })
    .state('About', {
        url: '/About',
        template: '<h3>About tab is active</h3>'
    })
;
})

HTML 程式碼:

<!DOCTYPE html>
<html ng-app="Deo">
    <head>
        <meta charset="utf-8" />

        <script>document.write('<base href="' + document.location + '" />');</script>

        <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
        <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
        <script src="app.component.js"></script>
    </head>

    <body ng-controller="Sample">
        <h2>Example of Angular html5Mode</h2>
        {{state.current.name}}<br>
        <ul>
            <li><a ui-sref="Home">Home</a>
            <li><a ui-sref="About">About</a>    
        </ul>
        <div ui-view=""></div>
    </body>
</html>

點選這裡檢視上面程式碼的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook