Activer le mode HTML5 dans AngularJS

  2. HowTo
  3. Howtos Angular
  4. Activer le mode HTML5 dans AngularJS
Muhammad Adil 30 janvier 2023
Angular Angular HTML5
  1. Utilisations du mode HTML5 dans AngularJS
  2. Étapes pour activer le mode HTML5 dans AngularJS
Activer le mode HTML5 dans AngularJS

Cet article vous guidera sur l’activation du mode HTML5 avec lien profond sur votre application AngularJS.

Utilisations du mode HTML5 dans AngularJS

Le $locationProvider.html5Mode est un moyen d’indiquer au navigateur qu’il doit utiliser le mode HTML5 pour les URL au lieu de l’ancien protocole HTTP. Cela permettra aux navigateurs d’utiliser des fonctionnalités comme pushState, qui n’est pas prise en charge par les anciens navigateurs.

De plus, nous devrions l’utiliser pour les applications AngularJS car il présente certains avantages par rapport à l’ancien modèle :

  • $locationProvider.html5Mode permet au développeur d’utiliser l’API d’historique de HTML5 pour la navigation dans les URL et la gestion de l’historique dans leur application, ce qui fournit une solution robuste et fiable pour la gestion des URL dans les applications du navigateur.
  • Le débogage est plus facile et nous pouvons inspecter chaque URL à partir des outils de développement Chrome.
  • Il offre également de meilleures performances, notamment lors de la navigation entre les pages.
  • Il offre une expérience de signet aux utilisateurs et active des fonctionnalités telles que les liens de partage, les liens profonds, etc.

Étapes pour activer le mode HTML5 dans AngularJS

Les étapes suivantes vous montreront comment configurer votre application AngularJS pour html5Mode :

  • Incluez la librairie ngHref dans le module de votre application.
  • Créez un nouveau fournisseur de services qui remplace la fonction $locationProvider() et définit html5Mode sur vrai. Définir cette propriété sur false désactivera html5Mode et utilisera la gestion de l’emplacement du navigateur par défaut.

Code 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>'
    })
;
})

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

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.

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