Aktivieren des HTML5-Modus in AngularJS

  2. How-To's
  3. Angular Howtos
  4. Aktivieren des HTML5-Modus in AngularJS
Muhammad Adil 23 Mai 2022
Angular Angular HTML5
  1. Verwendung des HTML5-Modus in AngularJS
  2. Schritte zum Aktivieren des HTML5-Modus in AngularJS
Aktivieren des HTML5-Modus in AngularJS

In diesem Artikel erfahren Sie, wie Sie den HTML5-Modus mit Deep-Linking in Ihrer AngularJS-Anwendung aktivieren.

Verwendung des HTML5-Modus in AngularJS

Der $locationProvider.html5Mode ist eine Möglichkeit, dem Browser mitzuteilen, dass er anstelle des älteren HTTP-Protokolls den HTML5-Modus für URLs verwenden muss. Dadurch können Browser Funktionen wie pushState verwenden, die von älteren Browsern nicht unterstützt werden.

Darüber hinaus sollten wir es für AngularJS-Anwendungen verwenden, da es einige Vorteile gegenüber dem älteren Modell hat:

  • $locationProvider.html5Mode erlaubt dem Entwickler, die History-API von HTML5 für die URL-Navigation und die Verlaufsverwaltung in ihrer Anwendung zu verwenden, was eine robuste und zuverlässige Lösung für die Handhabung von URLs in Browseranwendungen bietet.
  • Es ist einfacher zu debuggen und wir können jede URL in den Chrome Developer Tools überprüfen.
  • Es bietet auch eine bessere Leistung, insbesondere beim Navigieren zwischen Seiten.
  • Es bietet den Benutzern ein lesezeichenfähiges Erlebnis und ermöglicht Funktionen wie Links teilen, Deep-Linking usw.

Schritte zum Aktivieren des HTML5-Modus in AngularJS

Die folgenden Schritte zeigen Ihnen, wie Sie Ihre AngularJS-Anwendung für den html5Mode einrichten:

  • Binden Sie die Bibliothek ngHref in das Modul Ihrer Anwendung ein.
  • Erstellen Sie einen neuen Dienstanbieter, der die Funktion $locationProvider() überschreibt und html5Mode auf true setzt. Wenn Sie diese Eigenschaft auf false setzen, wird html5Mode deaktiviert und die Standortverwaltung des Standardbrowsers verwendet.

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

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

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.

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