Enabling HTML5 mode in AngularJS

Current Location：Home > Learning > WEB FRONT-END > Angular >

Vue React JavaScript Angular CSS HTML

Enabling HTML5 mode in AngularJS

Author：JIYIK Last Updated：2025/04/18 Views：

This article will guide you through enabling HTML5 mode with deep linking on your AngularJS application.

Using HTML5 mode in AngularJS

$locationProvider.html5ModepushStateis a way to tell the browser that it needs to use HTML5 mode for URLs instead of the old HTTP protocol. This will allow the browser to use features such as that are not supported by older browsers .

Furthermore, we should use it for AngularJS applications as it has some advantages over the old model:

$locationProvider.html5ModeAllows developers to use HTML5's History API for URL navigation and history management in their applications, which provides a powerful and reliable solution for handling URLs in browser applications.
For easier debugging, we can inspect each URL from the Chrome developer tools.
It also provides better performance, especially when navigating between pages.
It provides users with a bookmarkable experience and enables features like share links, deep linking, and more.

Steps to enable HTML5 mode in AngularJS

The following steps will show you how to html5Modeset up an AngularJS application for AngularJS:

Include the library in your application module ngHref.
Create a new service provider that overrides $locationProvider()the function and sets to true. Setting this property to false will disable and use the browser's default location handling.html5Modehtml5Mode

TypeScript code:

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 code:

<!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>

Previous：Select an option in the Angular drop-down menu

Next：Setting default option value for Select From Typescript in AngularJs

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >