Habilitar el modo HTML5 en AngularJS

  2. HowTo
  3. Howtos de Angular
  4. Habilitar el modo HTML5 en AngularJS
Muhammad Adil 23 mayo 2022
Angular Angular HTML5
  1. Usos del modo HTML5 en AngularJS
  2. Pasos para habilitar el modo HTML5 en AngularJS
Habilitar el modo HTML5 en AngularJS

Este artículo lo guiará para habilitar el modo HTML5 con enlaces profundos en su aplicación AngularJS.

Usos del modo HTML5 en AngularJS

El $locationProvider.html5Mode es una forma de decirle al navegador que necesita usar el modo HTML5 para las URL en lugar del antiguo protocolo HTTP. Esto permitirá que los navegadores utilicen funciones como pushState, que no es compatible con los navegadores más antiguos.

Además, deberíamos usarlo para aplicaciones AngularJS porque tiene algunas ventajas sobre el modelo anterior:

  • $locationProvider.html5Mode permite al desarrollador utilizar la API de historial de HTML5 para la navegación de URL y la gestión del historial en su aplicación, lo que proporciona una solución robusta y fiable para gestionar las URL en las aplicaciones del navegador.
  • Es más fácil de depurar y podemos inspeccionar cada URL desde las Herramientas para desarrolladores de Chrome.
  • También ofrece un mejor rendimiento, especialmente al navegar entre páginas.
  • Proporciona una experiencia que se puede marcar como favorita para los usuarios y habilita funciones como compartir enlaces, enlaces profundos, etc.

Pasos para habilitar el modo HTML5 en AngularJS

Los siguientes pasos le mostrarán cómo configurar su aplicación AngularJS para html5Mode:

  • Incluya la librería ngHref en el módulo de su aplicación.
  • Cree un nuevo proveedor de servicios que anule la función $locationProvider() y establezca html5Mode como verdadero. Establecer esta propiedad en falso deshabilitará html5Mode y usará el manejo de ubicación predeterminado del navegador.

Código 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>'
    })
;
})

Código 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>

Haga clic aquí para ver la demostración en vivo del código anterior.

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