AngularJS で HTML5 モードを有効にする

Muhammad Adil 2023年1月30日
  1. AngularJS での HTML5 モードの使用
  2. AngularJS で HTML5 モードを有効にする手順
AngularJS で HTML5 モードを有効にする

この記事では、AngularJS アプリケーションでディープリンクを使用して HTML5 モードを有効にする方法について説明します。

AngularJS での HTML5 モードの使用

$locationProvider.html5Mode は、古い HTTP プロトコルの代わりに URL に HTML5 モードを使用する必要があることをブラウザに通知する方法です。これにより、ブラウザは、古いブラウザではサポートされていない pushState などの機能を使用できるようになります。

さらに、古いモデルに比べていくつかの利点があるため、AngularJS アプリケーションに使用する必要があります。

  • $locationProvider.html5Mode を使用すると、開発者は HTML5 の History API を使用して、アプリケーションの URL ナビゲーションと履歴管理を行うことができます。これにより、ブラウザー内の URL を処理するための堅牢で信頼性の高いソリューションが提供されます。
  • デバッグが簡単で、Chrome デベロッパーツール内からすべての URL を検査できます。
  • また、特にページ間を移動するときに、パフォーマンスが向上します。
  • ブックマーク可能なエクスペリエンスをユーザーに提供し、共有リンク、ディープリンクなどの機能を有効にします。

AngularJS で HTML5 モードを有効にする手順

次の手順は、AngularJS アプリケーションを html5Mode 用にセットアップする方法を示しています。

  • アプリケーションのモジュールに 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
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