Share
Mit Anwendungen auf einer Seite können Sie einen bestimmten Teil einer Webseite aktualisieren, indem Sie den in einer separaten HTML-Datei gespeicherten Inhalt weiterleiten. Dadurch laden Sie Ihre Hauptseite nicht neu.
AngularJS bietet genau für diesen Zweck ein Modul mit dem Namen ngRoute.
Ein weiteres nützliches Modul von AngularJS ist ngAnimate, das die Animation mit bestimmten CSS-Klassen erleichtert.
In diesem Tutorial werde ich versuchen, jeden Schritt gründlich zu erklären, obwohl Sie noch Grundkenntnisse in AngularJS benötigen, um folgen zu können.
Diese index.html-Datei wird unsere Hauptseite sein, auf der wir sowohl festen als auch gerouteten Inhalt haben.
Ich beginne mit einem einfachen HTML-Dokument und füge alle notwendigen Bibliotheken zusammen mit unserem benutzerdefinierten Stylesheet hinzu style.css und eine JavaScript-Datei angleApp.js.
Jetzt füge ich zwei DIVs mit den ID-Namen von hinzu fixedContent und routedContent in einem mainWrapper DIV.
routedContent ist auch in einem anderen DIV namens umschlossen Verpackung. Das liegt daran, dass die routedContent sollte absolut relativ zu einem übergeordneten DIV positioniert sein, da bei der Routing-Animation zwei verschiedene Inhalte miteinander kollidieren.
Wie die ID-Namen implizieren, fixedContent wird der statische Inhalt unserer Hauptseite sein und routedContent wird sich bei Benutzerinteraktion dynamisch ändern.
Um eine Angular-App in unserer HTML-Datei zu definieren, müssen Sie die ng-app Richtlinie. Da es sich bei der gesamten Seite um eine Angular-App handelt, müssen wir diese Direktive der mainWrapper DIV.
Wir brauchen auch die ng-view Direktive, die der DIV mitteilt, dass der zugewiesene Seiteninhalt angezeigt wird.
Nun sieht unsere index.html Datei so aus:
Wir benötigen ein Navigationsmenü, um verschiedene Inhalte zu routen ng-view.
Wir werden die verwenden ul und ein Elemente, um ein einfaches horizontales Menü zu erstellen. Unten sehen Sie den HTML-Ausschnitt für die Menüstruktur.
Seite1 Seite2 Seite3 Seite4
Standardmäßig ist die ng-route Modul verwendet die ! Präfix. Hier verwenden wir jedoch nur # vor unseren Seiten weitergeleitet werden. Dies geschieht mit der hashPrefix In der Konfiguration verwendetes Attribut, das ich später im zugehörigen Abschnitt erläutern werde. Für jetzt nehmen Sie es, wie es ist.
Unsere endgültige HTML-Datei lautet wie folgt:
Seite1 Seite2 Seite3 Seite4
Da sich dieses Tutorial auf AngularJS konzentriert, werde ich das CSS-Styling nicht detailliert beschreiben. Wenn Sie über frühere CSS-Kenntnisse verfügen, gestalten Sie die Seite wie gewünscht. Andernfalls können Sie das unten angegebene Styling verwenden.
html, body margin: 0; Polsterung: 0; #mainWrapper display: flex; Flex-Richtung: Spalte; Ausrichten-Elemente: Mitte; margin-top: 50px #fixedContent margin-bottom: 50px; #wrapper width: 350px; #routedContent width: 350px; Position: absolut; ul display: flex; Begründungsinhalt: Leerzeichen; Breite: 350px; Marge: 0; Polsterung: 0; eine Textdekoration: keine; Farbe: #FFFFFF; Schriftfamilie: Arial; Listenstil: keine; Hintergrundfarbe: #cecece; Polsterung: 7px 10px; Grenzradius: 2px;
Jede Seite, die mit dem DIV an DIV weitergeleitet wird ng-view Die Direktive in der Haupt-HTML-Datei kann eine eindeutige HTML-Struktur und einen CSS-Stil haben.
Lass uns beginnen mit page1.html.
Da wir für jede Seite ein bestimmtes Design wünschen, benötigen wir separate CSS-Dateien für jede Seite. Deshalb erstellen wir auch eine Datei mit dem Namen page1.css, welches die Styling-Regeln von enthält page1.html.
Die grundlegende HTML-Struktur für page1 sieht wie folgt aus:
Seite 1
Lorem ipsum dolor sitzen amet, consectetur adipiscing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniy, quis nostrud ausüben ullamco laboris nisi ut aliquip ex a commodo follat. Duis auture irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
Oben haben wir auf die CSS-Datei verlinkt, die die Seite gestalten soll, und wir haben eine DIV mit dem ID-Namen von deklariert Seite 1, wo der ganze Inhalt gelegt wird.
Ich werde es einfach halten, aber es liegt ganz bei Ihnen, wie Sie die HTML-Datei strukturieren. Denken Sie daran, dass Ihr Container immer der DIV ist, zu dem der Container gehört ng-view Direktive wird zugewiesen. Alles auf Ihren gerouteten Seiten wird also relativ zu diesem DIV sein.
Das Styling von page1.html ist unten angegeben:
# page1 font-family: Arial; h1 color: # ffa42a;
Die anderen drei Seiten können völlig unterschiedlich sein, aber der Einfachheit halber verwende ich für jede HTML-Seite nur die gleiche Vorlage und etwas andere CSS-Dateien (anders) h1 Textfarben).
Seite 2
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, ni ut aliquid ex ea commodi follatur? Quis autem vel eum iure reprehenderit qui in ee voluptate veli nihil molestiae follatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page2 font-family: Arial; h1 color: cornflowerblue;
Seite 3
Lorem ipsum dolor sitzen amet, consectetur adipiscing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniy, quis nostrud ausüben ullamco laboris nisi ut aliquip ex a commodo follat. Duis auture irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 color: # b2ce6f;
Seite 4
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, ni ut aliquid ex ea commodi follatur? Quis autem vel eum iure reprehenderit qui in ee voluptate veli nihil molestiae follatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page4 font-family: Arial; h1 color: # ff4517;
Bisher haben wir alle notwendigen HTML- und CSS-Dateien fertiggestellt. Nun ist es an der Zeit, den JavaScript-Code zu schreiben, der das Routing und die Animation steuert.
Seit unserem ng-app Direktive heißt mainApp, Wir verwenden diese ID in der Modulfunktion. Wir müssen auch die ngRoute und ngAnimate Abhängigkeiten.
mainAngular = angle.module ('mainApp', ['ngRoute', 'ngAnimate']);
Jetzt haben wir Zugriff auf $ routeProvider und $ locationProvider.
Wir werden die verwenden $ routeProvider um die Arbeitspläne zu verwalten und $ locationProvider um es zu ändern hashPrefix, was eingestellt ist ! standardmäßig.
Wir gebrauchen .wann ('/ page1', templateUrl: 'page1.html') um festzulegen, wann die Seite weitergeleitet werden soll Seite 1 wird in unserer Haupt-HTML-Datei angeklickt.
Wir wiederholen dieselbe Codezeile für jede Seite, die weitergeleitet werden soll. Am Ende verwenden wir .ansonsten (redirectTo: '/ page1'), die unerwartete Seitennamen behandelt. Wenn Sie versuchen, einen undefinierten Seitennamen aufzurufen, sagen Sie Seite5, Sie werden zu weitergeleitet Seite 1.
Der vollständige JavaScript-Code befindet sich unten:
Accentsconagua
var mainAngular = angle.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (Funktion ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl: 'page2.html') ) .when ('/ page3', templateUrl: 'page3.html') .when ('/ page4', templateUrl: 'page4.html') .otherwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Zusätzliche Anmerkung:Wenn Sie eine bestimmte hinzufügen möchten ng-Controller Direktive für alle Seiten, die weitergeleitet werden sollen, können Sie dies innerhalb der $ routeProvider.
Ein Beispiel für Seite 1:
.wann ('/ page1', templateUrl: 'page1.html', Controller: 'page1Controller')Am Ende sollte unsere Seite so aussehen und Sie sollten in der Lage sein, zwischen den Seiten ohne Übergangsanimationen zu navigieren.
Jetzt ist es Zeit, die Routenübergänge zu animieren.
Zu Animationszwecken bietet AngularJS dank der Abhängigkeit von ngAnimate integrierte CSS-Klassen.
Diese Klassen, die wir verwenden werden, sind:
ng-enter: Die beginnenden CSS-Stile für die Enter-Animation.ng-enter-aktiv: Die letzten CSS-Stile für die Enter-Animation.ng-lassen: Die beginnenden CSS-Stile für die Leave-Animation.ng-Leave-Aktiv: Die letzten CSS-Stile für die Urlaubsanimation.Der geroutete Inhalt, der auf die Hauptseite kommt, hat also einen Übergang von ng-enter zu ng-enter-aktiv. Ebenso hat der Inhalt, der die Hauptseite verlässt, einen Übergang von ng-lassen zu ng-Leave-Aktiv.
Wir müssen die oben genannten Klassen an unsere anhängen routedContent Klasse.
Ein beispielhafter Übergang ist unten angegeben. Sie können entweder Ihre eigenen Übergangsanimationen entwerfen oder diese in Ihren verwenden style.css Datei.
# routedContent.ng-enter transform: translateX (-500px); Deckkraft: 0; -webkit-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -Moz-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -ms-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -o-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); # routedContent.ng-enter-active transform: translateX (0px); Deckkraft: 1; # routedContent.ng-leave transform: translateX (0); Deckkraft: 1; -webkit-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -Moz-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -ms-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); -o-Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); Übergang: alle 0,35s Kubik-Bezier (1, 0,010, 0,99); # routedContent.ng-leave-active transform: translateX (500px); Deckkraft: 0;
Unten ist das Endergebnis des Projekts auf Plunker.
In diesem Lernprogramm wurde beschrieben, wie Sie SPA-Anwendungen mit dem erstellen ng-route Modul von AngularJS, und dann animierten wir die Übergänge durch die CSS-Klassen von ng-animieren.
Verwenden Sie nur vier CSS-Klassen, die von bereitgestellt werden ng-animieren, Sie können verschiedene Animationen erreichen. Sie können immer zusätzliche Klassen hinzufügen, um die Übergangsanimationen besser steuern zu können. Sie können beispielsweise Ihre Seitenübergänge richtungsabhängig machen.
Das habe ich auch erwähnt, indem ich die Regler Direktive zu jeder spezifischen Seite innerhalb der $ routeProvider, Sie können eine zusätzliche Kontrolle über jede Seite erreichen.
JavaScript ist mit seinen Bibliotheken wie Angular zu einer der De-facto-Sprachen der Web-Arbeit geworden. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, informieren Sie sich über das Angebot von Envato Market.
Ich hoffe, dass Ihnen dieses Tutorial eine allgemeine Vorstellung davon gibt, wie Sie das nutzen können ng-route und ng-animieren Module zusammen.
