Bevor wir uns mit dem Konzept befassen, wollen wir uns noch einmal vorstellen, wie eine Webanwendung funktioniert.

Serverseitiges Rendering-Konzept

Bei Server-Programmiersprachen (SSR/Server Side Rendering) wie php, java, c# … funktioniert der Mechanismus wie folgt:

• Der Benutzer besucht den Link (URL) im Browser und sendet eine Anfrage (Request) mit der GET -Methode an den Server
• Der Server empfängt das Signal und gibt den entsprechenden gesamten Webseiteninhalt basierend auf dem Pfad und den Pfadparametern (der Pfad und die Parameter, die zur Definition der Anfrage verwendet werden) als Volltext einschließlich HTML, CSS, JAVASCRIPT zurück
• Der Client empfängt die zurückgegebenen Daten, der Browser verlässt sich auf den Textinhalt, einschließlich HTML, CSS, JS, rendert ihn an die Schnittstelle und zeigt ihn für den Benutzer zur Interaktion an.
• Nachdem der Benutzer mit der angezeigten Schnittstelle interagiert hat und der Benutzer weiterhin mit der Website interagiert, um Informationen an den Server zu senden (z. B. Registrierung, Anmeldung, Formularübermittlung), sendet der Browser weiterhin die Nachrichteninformationen über eine Methode an den Server (GET oder POST), normalerweise wird bei SSR-Programmiersprachen nach dem Senden der Anfrage die Seite neu geladen oder zu einer neuen Seite gewechselt. (erfahren Sie mehr FORM in HTML, um es besser zu verstehen).

Clientseitiges Rendering-Konzept

Bei Client-Programmiersprachen (CSR/Client Side Rendering) wie anglejs,angular,reactjs,vuejs … allgemein bekannt mit dem Konzept der Single Page Application (SPA) ist der Wirkmechanismus wie folgt:

• Beim ersten Treffer wird die Anfrage trotzdem an den Server gesendet, der Server gibt das HTML zurück, und in das HTML wird ein Javascript-Framework integriert, dann wird beim ersten Durchlauf die ganze Anwendung initialisiert (die Anwendung ist komplett in Javascript geschrieben ). und clientseitig ausführen)
• Nachdem die Anwendung ausgeführt wurde, interagiert der Benutzer bei der nächsten Kommunikation mit dem Server mit der Schnittstelle und sendet über den AJAX-Mechanismus (Asynchronous JavaScript and XML) eine Anfrage an den Server. Bei diesem Mechanismus kommuniziert der Client mit dem Server und sendet und empfängt alle Daten über Javascript, was bedeutet, dass der Inhalt der partiellen HTML-Schnittstelle über Javascript aktualisiert werden kann, ohne die gesamte Seite neu zu laden.

Vergleichen Sie die Vor- und Nachteile der beiden Mechanismen

Routen in AngularJS mit clientseitigem Rendering

Stellen Sie sich eine Beispielwebsite mit Menüfunktion für die Benutzernavigation vor, wenn wir jedes Mal, wenn der Benutzer HTML oder PHP, C#, Java erreicht, sehen wir, dass wir jedes Mal, wenn der Benutzer klickt, die Seite auf eine andere Seite verschieben, eine neue Seite, oder wenn der Benutzer absendet das Formular, entweder lädt der Benutzer die Seite neu oder wechselt auch zu einer neuen Seite, wie zum Beispiel, meine aktuelle Seite verwendet das CMS von WordPress mit serverseitigem Rendering-Mechanismus, wenn auf die obige Link-Navigation geklickt wird, wechselt die Anwendung zu einer neuen Seite, Der Server gibt eine HTML-Schnittstelle zurück, der Browser lädt die Seite neu und rendert alle HTML-, Javascript-, CSS- …

Beim Routenmechanismus in AngularJS gibt es einen Unterschied wie folgt: Wenn der Benutzer mit einer AngularJS-Anwendung auf den Link im Menü klickt und der Mechanismus korrekt geschrieben ist, lädt der Browser die Seite nicht neu, die Kopf- und Fußzeile jedoch nicht ändern (Javascript, CSS muss nicht neu gerendert werden), was sich ändert, ist nur der HTML-Bereich, den wir aktualisieren müssen (im Falle eines Menüklicks ist es der gesamte Hauptinhalt unter dem Menü), dies erspart dem Browser das gesamte HTML, JS, CSS neu laden müssen, aber nur das neue HTML in dem Bereich aktualisieren müssen, der aktualisiert werden muss, was der Anwendung hilft, die Leistung bei den nächsten Interaktionen stark zu verbessern.

Die Initialisierungssyntax, um Routen in AngularJS verwenden zu können, durch den Abhängigkeitsinjektionsmechanismus ( Abhängigkeitsinjektionstechnik ), das Konzept wird im folgenden Artikel behandelt.

Zum ersten Mal in der Serie sehen wir die angleJS-Anwendung, die das Element als Zeichenfolge als zweiten Parameter verwendet, und darüber hinaus müssen wir die Datei angle-route.min.js in die Artikel aufnehmen, damit die Anwendung geladen werden kann . bevor wir alle ein leeres Array übergeben haben (keine Elemente):

 <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> ... var app = angular.module('myApp', ['ngRoute']);

Nachdem wir das ngRoute-Objekt in das Projekt aufgenommen hatten, konnten wir die Routen in angleJS über den Dienst $routeProvider verwenden

Betrachten Sie das folgende Beispiel, in dem Sie $routeProvider verwenden und die Routen für die angleJS-Anwendung konfigurieren, um eine Umleitungsanwendung zu erstellen

Schritt 1: Datei index.html erstellen

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Examole Routes AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> <style> .container { max-width: 400px; margin: 0 auto; padding: 15px; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .list-none { list-style: none; } .menu-list { padding: 0px; margin: 0px; justify-content: flex-end; } .menu-list li { margin: 0px 5px; } .menu-list li a { text-decoration: none; color: #000; } .menu-list li a:hover { color: #46b8e6; } .no-margin { margin: 0; } .main-header { display: flex; background: #f5f5f5; } .logo-wrap { width: 45px; } .main-header nav { width: calc(100% - 46px); } .main-footer { background: #fa726c; } .white { color: #fff; } .blue { color: #46b8e6; } </style> </head> <body ng-app="myApp"> <div ng-controller="headerController" ng-class="[gc.container, gc.mainheader ,gc.flexwrap]"> <div ng-class="gc.logowrap"> <h2 ng-class="[gc.nomargin, gc.blue]">{{logotext}}</h2> </div> <nav> <ul ng-class="[gc.flexwrap , gc.listnone, gc.menulist]"> <li><a ng-href="#!">Home</a></li> <li><a ng-href="#!about">About</a></li> <li><a ng-href="#!contact">Contact</a></li> </ul> </nav> </div> <div ng-controller="mainController" ng-class="[gc.container, gc.mainbox, gc.flexwrap]"> <div ng-view></div> </div> <div ng-controller="footerController" ng-class="[gc.container,gc.flexwrap,gc.mainfooter,gc.white]"> {{copyRight}} </div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'templates/index.html' }) .when('/about', { templateUrl: 'templates/about.html' }) .when('/contact', { templateUrl: 'templates/contact.html' }); }); app.run(function ($rootScope) { // global class variable $rootScope.gc = { container: 'container', mainheader: 'main-header', mainfooter: 'main-footer', flexwrap: 'flex-wrap', listnone: 'list-none', menulist: 'menu-list', nomargin: 'no-margin', white: 'white', logowrap: 'logo-wrap', blue: 'blue' }; }); app.controller('headerController', function ($scope, $location) { $scope.navigation = [ { name: 'Home', url: '/', controller: 'mainController' }, { name: 'About', url: '/about', controller: 'mainController' }, { name: 'Contact', url: '/contact', controller: 'mainController' } ]; $scope.logotext = 'web888.vn'; }); app.controller('mainController', function ($scope, $location) { $scope.homedata = { title: 'Home', description: 'This is home page' }; $scope.aboutdata = { title: 'About', description: 'This is about page' }; $scope.contactdata = { title: 'Contact', description: 'This is contact page' }; }); app.controller('footerController', function ($scope) { $scope.copyRight = '@copyright web888.vn'; }); </script> </html>

Schritt 2: Erstellen Sie einen Vorlagenordner und die Dateien home.html, about.html, contact.html mit sequenziellem Quellcode:

 <div> <h2>{{homedata.title}}</h2> <p>{{homedata.description}}</p> </div>

 <div> <h2>{{aboutdata.title}}</h2> <p>{{aboutdata.description}}</p> </div>

 <div> <h2>{{contactdata.title}}</h2> <p>{{contactdata.description}}</p> </div>

Die Browser-Anzeigeschnittstelle kann mit dem Menü interagieren, die Daten werden aktualisiert, ohne die Seite neu zu laden

Wenn Sie flexiblere erweiterte Funktionen wünschen, können Sie Router in Kombination mit benutzerdefinierten Anweisungen verwenden, um eine SPA-Anwendung mit einer komplexen Struktur und hoher Wiederverwendbarkeit zu erstellen.