Jetzt, da wir ein Verständnis für einseitige Anwendungen haben,
werden wir an
unserer Winkelapplikation, die wir
bisher in den Übungen gearbeitet haben, weiter arbeiten und sie
mit der Unterstützung des Winkelrouter-Moduls in die einseitige Anwendung entwickeln.
Wir haben bereits mehrere Komponenten als Teil
unserer Winkelapplikation in die vorangegangene Übung aufgenommen und wir haben bereits
für unsere Winkelanwendung konfiguriert, um
zwischen zwei verschiedenen Komponenten verlegen zu können.
Nun werden wir mehr in unsere Winkelapplikation integrieren und
in die vollwertige Winkelapplikation entwickeln, zusammen mit
der Navigation zwischen den verschiedenen Ansichten, die
von den verschiedenen Komponenten unserer Anwendung gerendert werden.
Weiter mit unserer Anwendung, wie sie jetzt steht,
haben wir das Haus gerendert, wenn Sie zu unserer Anwendung navigieren
jetzt und dann
wurde die Home-Vorlage zwischen der Kopfzeile und der Fußzeile angezeigt und dann, wenn Sie zum Menü gehen,
wird das Menü zwischen der Kopfzeile und die Fußzeile in der Ansicht hier.
Nun müssen wir natürlich die anderen Komponenten, die wir
in unsere Winkelanwendung aufgenommen haben, integrieren,
um diese als vollwertige Winkelapplikation zu entwickeln.
In dieser Übung werden wir die ContactComponent integrieren,
wir werden die Vorlage für die ContactComponent
aktualisieren, wir werden auch die Vorlage für die HomeComponent aktualisieren und dies
einen Schritt vorwärts in Richtung unserer einseitigen Winkelanwendung machen.
Beginnen wir mit der ContactComponent.
Um zu beginnen, kopieren Sie zuerst die Vorlage für
die ContactComponent, die ich Ihnen in den Übungsanweisungen gegeben habe, und
fügen Sie sie dann in die Datei contactcomponent.html ein, damit wir
die tatsächliche Ansicht unserer ContactComponent hier etwas detaillierter ausblenden.
Jetzt können Sie sehen, dass ich den Code für die
Vorlagendatei aus den Anweisungen in meine ContactComponent ausgeschnitten und eingefügt habe.
Wir werden die Integration
der ContactComponent in unsere Anwendung abschließen und dann schauen wir uns an, wie
die ContactComponent aussieht
und kommen dann wieder und schauen sich diesen Code ein wenig später an.
Um nun die ContactComponent in unsere Winkelapplikation
zu integrieren, müssen wir einen Pfad zur ContactComponent in unsere Routen einbinden.
Also, wenn ich direkt nach dem Menü zur routes.ts-Datei
gehe, werde ich einen anderen Pfad für die ContactComponent einschließen. Ich werde
die URL verwenden, um uns zu kontaktieren und
die entsprechende Komponente ist ContactComponent hier.
Damit haben wir nun unsere ContactComponent
in unsere Anwendung integriert und lassen Sie uns die Änderungen
daran speichern und dann müssen wir auch die Header-Komponente aktualisieren und den
Link in der Header-Komponente aktualisieren, um uns zu helfen, zur ContactComponent zu navigieren.
Also, ich werde dies einfach aus dem Menü einen Link in der
Symbolleiste meiner Header-Komponente kopieren und dann in
die ContactComponent kopieren und es dann aktualisieren, als kontaktieren Sie uns.
Lassen Sie uns die Änderungen an allen Dateien speichern und
dann einen Blick auf die resultierende Anwendung werfen.
Wenn wir nun zur Anwendung in unserem Browser navigieren,
können wir sehen, dass die Details der ContactComponent
hier zwischen dem Header und der Fußzeile angezeigt werden, wie wir erwarten.
Also, innerhalb der ContactComponent,
haben wir den Titel „Kontaktieren Sie uns“
und dann einige Standortinformationen, wo ich die Adresse angezeigt habe.
Also, das ist ähnlich der Adresse, die wir
in der Fußzeile haben, also werde ich nicht erklären, dass im
Detail dann haben wir einen anderen Teil hier, wo wir die Karte unseres Standorts einschließen.
Wir werden das im Moment nicht tun,
wir werden es einfach als leer lassen und dann auch Sie sehen, dass ich
drei Schaltflächen habe, die ich hier für Call, Skype und E-Mail enthalten habe.
Diese drei Tasten sind in unserer Anwendung aktiviert
und ich verwende die Matte erhobene Taste, um diese drei Tasten zu rendern.
Sie können also sehen, dass diese Schaltflächen sich von
den anderen Schaltflächen unterscheiden, die Sie in Ihrer Anwendung dort enthalten haben.
Dies ist also eine erhöhte Knopfkomponente aus unserem eckigen Material dort.
Also, nachdem wir die ContactComponent gesehen haben und
die Tatsache, dass wir in der Lage sind, zu der ContactComponent zu navigieren.
Nun, von den anderen Komponenten,
werfen wir einen kurzen Blick auf
den HTML-Code, den wir für die Vorlage für unsere ContactComponent enthalten. Wenn Sie
zu contactcomponent.html gehen, werden Sie sehen, dass wir
den Titel für diese Seite haben, indem Sie dieses div
hier verwenden und das zweite div innen hier mit FxFlex
die Standortinformationen enthält und dann dies innerhalb dieser Standortinformationen,
ich definiere wieder ein anderes div, das mir erlauben wird , um
hier mehrere Ansichten in dieses andere div aufzunehmen.
Also, in diesem definiere ich
ein anderes div mit Effektlayoutspalte und Effekte-Layer-Zeile.
Dies ist also eine verschachtelte Möglichkeit, meine CSS-Flex-Ansichten hier zu definieren.
Also, in diesem wieder
verwende ich eine div Flex-Ansicht mit FxFlex 50, so dass es
eine Hälfte und dann FxFlex-Offset 20 Pixel einnimmt.
Also, diese CSS-Ansicht wird um 20 Pixel nach rechts verschoben werden, so dass ich
etwas Marge dort habe und dann haben wir
die Adresse hier und dann unten hier unten,
Sie können sehen, dass in einem anderen div,
Ich habe ein Tag mit Matte angehobenem Knopf damit verbunden.
Dies ist, was bewirkt, dass die erhöhten Schaltflächen,
die wir unten auf der Kontaktseite dort haben.
Also, drei von ihnen hier.
Eins für die Telefonnummer.
Eine für das Skype und eine für die E-Mail hier und beachten Sie auch, dass ich
die Font Awesome Symbole für jeden von ihnen und dann die
Karte Ihres Standorts in einem anderen div hier verwende.
Also, beide schließen diese in diesem äußeren div ein, das wieder in das div eingeschlossen ist.
Also, verschachtelte Möglichkeit, die Flex-Layouts für unsere verschiedenen Teile hier zu definieren.
Also, das ist es für die ContactComponent.
Das haben wir nun in unsere einseitige Anwendung integriert.
Gehen Sie jetzt zum DishService.
Jetzt, im DishService zusammen mit der GetDish-Methode,
werde ich zwei weitere Methoden vorstellen.
Eine Methode namens GetDish,
ein bestimmtes Gericht und dann werde ich das Gericht mit einer ID identifizieren, die hier angegeben ist.
Also, die ID
wäre und das würde mir das Gericht mit der ID geben, die dieser Nummer entspricht.
Das wird also eine weitere Methode sein, die ich hinzufügen
und auch eine andere Methode namens GetFeaturedDish hinzufügen werde.
Also, dieses vorgestellte Gericht wird
die vorgestellte Eigenschaft, die wir hinzugefügt haben, verwenden
und dann das Gericht zurückgeben, für das das Feature auf true gesetzt ist.
So können Sie ein bestimmtes Gericht auswählen und es dann zur Verfügung stellen.
Nun, der Grund, warum ich dieses Feature-Flag habe, ist, dass, wenn die Funktion auf true gesetzt ist,
dieses bestimmte Gericht auf der HomeComponent gerendert wird.
Nun, wie wählen wir diese Gerichte aus?
Also, lassen Sie uns den Code dafür hinzufügen.
Also, für den GetDish,
muss ich etwas von den Gerichten zurückgeben, die ich bereits dort habe.
Also, von der Konstante Gerichte,
werde ich die JavaScript-Methode verwenden, um ein Array zu filtern.
Also, die Filterung eines Arrays hilft mir,
nur die Elemente aus dem Array auszuwählen, die
einem bestimmten Kriterien entsprechen,
die im Filter hier angegeben werden, und dann werde ich nur das erste zurückgeben.
Jetzt passiert es so, dass, wenn ich eine ID angebe,
es nur ein Element auswählt, aber dann wird das zu einem Array.
Also, aus diesem Array muss ich dieses ein Element in diesem Array extrahieren.
Also, deshalb verwende ich dort innerhalb von Klammern Null.
Also, das wird mir helfen, zu identifizieren.
Also, wie filtere ich mein Geschirr?
Also, für jedes Gericht in meiner Liste der Gerichte,
also hier werde ich
eine andere Funktion von Typoskript als Pfeilfunktionen genannt verwenden.
Die Pfeilfunktion ist eine Kurzform, um eine Funktion zu schreiben.
Also, wenn Sie es gewohnt sind, Funktionen zu schreiben,
anstatt die Funktion aufwändig zu sagen
Funktion und dann innerhalb von Klammern Dish und so weiter zu schreiben,
kann ich es einfach in Fällen schreiben, in denen die Funktion sehr einfach ist,
es ist sehr einfach, dies als Pfeilfunktion hier zu schreiben.
Also, hier, werde ich angeben, dass Gericht ID gleich der ID ist.
Also, was ich hier angebe, ist das Geschirr Array filtern und extrahieren
nur die Elemente aus dem Array, für die die Schale ID.
Also, jedes Element hier wird von diesem Parameter Gericht hier identifiziert.
Also, für die die Dish-ID mit der
ID übereinstimmt, die als Parameter an das Gericht geliefert wurde.
Auf diese Weise werden Sie dieses spezifische Gericht aus diesem
Array extrahieren und dann dieses Gericht von dieser GetDish-Methode zurückgeben.
Die Pfeilfunktionen halfen mir, Code auf einfachere Weise zu schreiben.
Wenn Sie Pfeilfunktionen nicht mögen,
können Sie es auf die konventionellere Weise schreiben, indem Sie
„function dish“ sagen, und dann geben Sie dish.id triple gleich id zurück,
so dass dies einen booleschen Wert zurückgibt.
Wenn der Filter hier auf eine wahre Innenseite trifft,
werden diese Elemente aus dem Geschirr in das Array ausgewählt.
Also, hier kommt Ihr JavaScript-Wissen zu Ihrem Vorteil.
Sie müssen also wissen, wie ein JavaScript-Filter
funktioniert, um Ihnen zu helfen, zu verstehen, wie dies geschieht.
Okay, jetzt ähnlich für das vorgestellte Gericht
werde ich eine ähnliche Methode verwenden, um aus meinem Geschirr
Array mit einem Filter hier
zu extrahieren, aber der Filter, den ich hier definieren werde, wäre hier wieder eine Pfeilfunktion.
Sie werden sich an Pfeilfunktionen gewöhnen und dann, wenn Sie sich daran gewöhnen,
dann werden Sie feststellen, wie einfach sie zu richtig sind.
Also, hier
ist die Art, mich auszuwählen, dish.featured Eigenschaft, weil diese dish.feature bereits ein boolescher Wert ist.
Also, das wird mir helfen, das vorgestellte Gericht zurückzugeben.
Also, für welches Gericht auch immer,
das Gericht ist wahr.
Dieses spezielle Gericht wird aus
dem Geschirr Array herausgefiltert und dann wird es nur einen Tag geben.
Wie auch immer, Sie sollten sicherstellen,
dass Sie nur für eines von denen auf true gesetzt werden,
und dann verwende ich das, weil dieser Filter ein Sub-Array aus dem Geschirr Array zurückgibt,
also muss ich dieses Element auswählen.
Es wird ein einzelnes Element bei Index Null geben.
Also verwende ich den Index Null, um dieses Element auszuwählen und
das von der Get-Feature-Dish-Methode hier zurückzugeben.
Das schließt also das Update zum Geschirrservice ab.
Um unsere Home-Vorlage zu erstellen,
werden wir auf der Home-Ansicht ein ausgewähltes Gericht,
eine ausgewählte aktuelle Promotion durch das Restaurant
und einen ausgewählten Unternehmensleiter aus der Liste der Leser.
Der Unternehmensleiter, der auf der Titelseite angezeigt wird,
wird Teil Ihres Auftrags sein, der dieser Lektion folgt.
Aber wir werden jetzt einschließen,
wir haben ein vorgestelltes Gericht und die vorgestellte Promotion auf der Titelseite.
Also, was bedeutet, dass ich einen Promotion-Service brauche,
der die Reihe von Aktionen zurückgibt, die von diesem speziellen Restaurant durchgeführt werden.
Lassen Sie mich also einen Promotion-Service für meine Anwendung hinzufügen.
Um dies zu tun,
werde ich im freigegebenen Ordner eine neue Datei namens promotion.ts erstellen.
In der promotion.ts werde ich eine Klasse,
Klassenförderung erstellen und diese Promotion hier zurückgeben.
Also, was enthält diese Promotion-Klasse?
Es enthält eine ID-Eigenschaft,
dann enthält es den Namen für die Förderung des Restaurants.
So zum Beispiel, die Förderung könnte wie Wochenende Buffet sein.
Oder 10% von jedem einzelnen Tag zur
Mittagszeit und Dinge wie diese können auf der Titelseite Ihrer Restaurants vorgestellt werden.
Also, Name, dann werde ich auch ein Bild einschließen,
das vom Typ String die Bild-URL sein soll,
dann Label, das eine Zeichenfolge sein wird.
Preis auch eine Zeichenfolge.
Nun, die Arbeit impliziert,
du siehst, dass ich sie im Moment nicht benutze,
wir werden sie in einer der späteren Übungen mit Boolean in Gebrauch bringen.
Sie sehen also wieder das markierte Flag in der Werbeaktion
und dann die Beschreibungszeichenfolge.
So, Sie sehen, dass die Förderung strukturiert ist ziemlich
ähnlich wie die Schale Struktur, die wir früher gesehen haben.
Also, das ist die Beförderungsklasse hier.
Jetzt, zusammen mit der Promotion-Klasse,
muss ich eine andere Klasse erstellen, die die
Menge der Förderung sagt Konstante mit Promotions hier exportiert.
Also, hier werde ich die
Promotion-Klasse
aus der promotion.ts-Datei importieren,
und dann würde ich eine Konstante namens promotion exportieren.
Sie sehen also, dass ich eine Struktur verwende, die dem Geschirr hier sehr ähnlich ist.
Also, Sie beginnen zu sehen,
dass, Diese Struktur, die wir früher für
die Aktionen für die Gerichte verwendet, ist auch nützlich für die Deklaration von Werbeaktionen.
Wenn Sie eine andere Struktur haben,
werden Sie sehen, dass die Struktur bei Führungskräften
für das JavaScript-Objekt hier etwas anders ist. Die Werbeaktionen.
Nun, die Details einer bestimmten Promotion habe ich es in den Anweisungen gegeben,
also würde ich vorschlagen, dass Sie es von
dort kopieren und einfügen, anstatt dass ich das Ganze hier eintippe.
Also, lassen Sie mich voran gehen und kopieren und fügen Sie
dieses JavaScript-Objekt hier in dieses JavaScript-Objekt-Array ein,
also gehen Sie.
Die Promotion hat momentan nur ein einziges Objekt.
In Zukunft können wir mehr hinzufügen.
An dieser Stelle habe ich nur eine, so dass ich es gerade hinzugefügt,
und ich werde das verwenden und das ist die vorgestellte Förderung für mein Restaurant dort.
Das ist nur Werbung,
also lassen Sie mich diese Aktionen aktualisieren,
das ist, was ich brauche.
Also, ich werde nur die Änderungen an der Datei promotion.ts speichern.
Als nächstes werde ich einen anderen Dienst namens Promotion-Dienst erstellen.
Um dies zu tun, lassen Sie uns in die Befehlszeile an der Eingabeaufforderung gehen, geben Sie
ng generieren Umfragen Dienstleistungen/Förderung.
Also, der Promotion-Dienst wird dort erstellt.
Also, jetzt ist der PromotionService an Ort und Stelle.
Lassen Sie uns also die Funktionen für den PromotionService hinzufügen.
Wenn Sie zum PromotionService gehen,
sehen Sie, dass der PromotionService jetzt in Ihrem Dienste-Ordner hier enthalten ist,
daher müssen wir einen PromotionService vorbereiten.
Also, im PromotionService,
werde ich
Förderung von Shared/Promotion,
der Promotionklasse, importieren und
dort auch Promotions aus der Shared/Promotion-Klasse importieren.
Die ständigen Aktionen von dort.
Nun, genau wie wir für den Geschirrservice hatten,
müssen wir drei Methoden innerhalb des PromotionsService erstellen.
Also, was ich tun werde, ist, mir die Mühe zu ersparen,
ich werde in den dish.service gehen
und dann einfach diese drei kopieren
und dann in meinen Promotion-Dienst einfügen,
dann einfach den Code bearbeiten.
Okay, also vom Promotion-Dienst,
muss ich GetPromotions zurückgeben und
dies ist vom Typ Promotion und dann wird dies
PROMOTIONS zurückgeben, und dann die zweite wäre Förderung,
die wieder die ID der Promotion erhält,
also werde ich
Promotions.Filter zurückgeben promo.id ist id.
Dann GetFeatured Promotion.
So können Sie sehen, dass die Struktur des Promotionservice
dem Geschirrservice sehr ähnlich ist und dies nicht Promotion-Typ wäre,
und dies wird
promotions.filter promo zurückgeben und dies wird promo.featured und das war's.
Mein PromotionService ist bereit.
Jetzt gehe ich in die Home-Komponente und bereite das vor,
so dass
ich in meiner Home-Komponente ein vorgestelltes Gericht und eine vorgestellte Promotion anzeigen werde.
Die Featured/Dish und Featured/Promotion werden in
der Home-Komponente mit der eckigen Materialkartenkomponente angezeigt.
Also müssen wir zuerst die Daten in unsere Home-Komponente bekommen,
also werden wir das in der Home-Komponentententyp-Skriptdatei dort tun.
Also, gehen Sie zur Home-Komponentententyp-Skriptdatei, home component.ts.
Hier muss ich das Gericht
aus geteiltem Gericht und auch den
entsprechenden dish.service von Dienstleistungen/dish.service importieren.
Okay, jetzt werde ich auch dasselbe für Promotions tun,
also werde ich das einfach kopieren und es hier einfügen,
und dann diesen bearbeiten,
also wäre dies eine Förderung, das
wäre PromotionService,
und dann Förderung, und dann wäre dies PromotionService.
Damit haben wir sowohl die Gerichte als auch die
Gerichte und den Promotion Service für uns,
innerhalb unserer Home-Komponente.
Kommt jetzt zum Konstruktor.
Lassen Sie jetzt die beiden Dienste hier injizieren
und sie für unsere Anwendungen oder Gerichte zur Verfügung stellen,
und den hier injizierten Werbedienst.
Damit haben wir Zugriff auf beide Dienste.
Also, jetzt innerhalb der NgonInit-Methode,
werde ich die beiden vorgestellten Gerichte holen.
Also, ich würde sagen this.dishService.GetFeatureddish
und auch Förderung,
PromotionService und GetFeaturedPromotion.
Nur um vollständig zu sein,
lassen Sie mich das Gericht hier als
vom Typ Dish und die Promotion vom Typ Promotion hier erklären.
Also, das sollte alle Werte klären, die wir hier im Inneren verwenden.
Damit schließen wir das Update unserer Home-Components Typoskriptdatei ab.
Wechseln wir nun zur Vorlagendatei
und fügen Sie dann die beiden Karten hinzu, um das vorgestellte Gericht und die vorgestellte Werbeaktion anzuzeigen.
Nun, dafür habe ich Ihnen den Code in den Anweisungen gegeben.
Also, ich werde nur diesen Code kopieren und ihn hier einfügen.
Sie wissen bereits, wie man Karten erstellt,
so dass Sie leicht dem Code folgen können, den ich hier einfüge.
Also, die Home-Komponenten-Vorlage wird ebenfalls aktualisiert,
so dass Sie sehen können, dass es hier zwei Karten hat.
Zum einen zeigt das Gericht und das andere, das die Promotion hier anzeigt
und in einem FxLayout div hier eingeschlossen ist.
Also, lassen Sie uns die Änderungen speichern und dann einen kurzen Blick auf unsere Anwendung werfen.
Nach der Erstellung des Promotion-Dienstes
müssen wir auch den Promotion-Dienst in das AppModule aufnehmen
und für unsere Anwendung zur Verfügung stellen.
Also, ich gehe hier rein
und importiere dann
den Promotionsdienst hier rein.
Dann deklarierte der Promotion-Dienst
hier als einer der Anbieter in meiner AppModule.ts-Datei.
In der AppModule-Datei
benötige ich also beide
und speichere dann Änderungen. Wenn
Sie in den Browser gehen,
können Sie jetzt sehen, dass im Browser,
die Home-Komponente zeigt nun die beiden Karten,
eine für das vorgestellte Gericht und eine für die vorgestellte Aktion hier.
So können Sie sehen, dass die beiden Autos hier angezeigt werden.
Ich kann nun zur Menüseite
und dann auch zur Kontaktseite navigieren.
Die Seite Info ist immer noch nicht vorhanden.
Sie füllen die Seite Info als Teil Ihrer zweiten Zuweisung aus.
Werfen Sie einen Blick auf die gleiche Anwendung auf einer kleineren Bildschirmgröße,
also ist dies ein iPhone 6 Plus-Bildschirm.
Schauen wir uns die Home-Komponente und einen iPhone 6 Plus-Bildschirm an.
Sie können das vorgestellte Gericht und vorgestellte Promotion auf der Homepage dort sehen.
Dann wird das Menü, das wir zuvor gesehen haben,
und auch die Kontaktseite wird hier angezeigt.
So können Sie sehen, dass jetzt unsere einseitige Anwendung viel konfigurierter ist.
Abgesehen von der Über,
die wir in der zweiten Aufgabe tun werden.
Eine weitere kleine Änderung, die Sie in Ihrer Header-Komponenten-HTML-Datei tun können,
ist, dass zusammen mit der Router-Link-Direktive
die Angular Route auch eine weitere Direktive namens RouteLinkActive unterstützt.
Dies ermöglicht es uns, einige Klassen auf das bestimmte Element hier anzuwenden.
Also, in diesem Fall,
wenn dieser Link aktiv wird als was ich hier spezifiziere,
wird dort als Klasse auf dieses bestimmte Element angewendet.
Also werde ich eine Klasse namens aktiv angeben.
Also hier gebe ich RouterLinkActive mit active an.
Wenn ich also eine CSS-Klasse namens active definiere,
wird die Klasse auf diesen Link angewendet,
wenn diese bestimmte Ansicht auf der Anwendungsseite hier angezeigt wird.
Ich werde dasselbe kopieren und es auf alle verbleibenden Schaltflächen anwenden,
wo ich den Routerlink bereits definiert habe.
Also werde ich die RouterLinkActive Klasse anwenden,
auf die Startseite, das Menü und die Kontaktieren Sie uns.
Nun bedeutet das auch, dass ich eine aktive CSS-Klasse definieren sollte.
Also, um das zu tun, werde ich in die Header-Komponenten-SESS-Datei gehen
und dann eine aktive Klasse hier
definieren, also werde ich die aktive Klasse direkt dort definieren.
Um die aktive Klasse zu definieren,
werde ich hier eine weitere Farbvariable namens background-moredark hinzufügen.
Dann ist die entsprechende Farbe 4527A0,
dies ist eine dunklere Version dieser dunklen Hintergrundfarbe, 4527A0.
Dann, für meine aktive,
was ich tun werde, ist, von der aktiven Klasse lasse
ich die Klasse einen Hintergrund definieren,
den Hintergrund
dieses Elements auf die Hintergrund-moredark Farbe setzen.
Also, wenn diese bestimmte Ansicht ausgewählt und auf der Seite angezeigt wird,
dann wird diese aktive Klasse auf dieses
bestimmte A-Tag
dort durch die Router-Link-aktive Direktive angewendet werden, die wir hier angewendet haben.
Nun, welche Änderung bewirkt das auf unserer Webseite. Wenn wir
nun auf unserer Webseite gehen,
werden wir sehen, was dies auf unserer Webseite einführt.
Gehen Sie zu unserer Anwendung,
sehen Sie jetzt, dass, wenn wir in
der Home-Ansicht in der Home-Komponente sind, die hier angezeigt wird, seine entsprechende Ansicht.
Dann hat die Home-Schaltfläche hier eine andere Hintergrundfarbe, die
angewendet wird, da die aktive Klasse in hinzugefügt wurde, weil wir
die RouterLinkActive definieren, die hier aktiv ist.
Also, diese Klasse wird angewendet.
In ähnlicher Weise
sehen Sie, wenn Sie das Menü auswählen, dass das Menü in der Kopfzeile hervorgehoben
ist, und die Menüansicht wird hier
und ähnlich für den Inhalt angezeigt.
Dies ermöglicht es uns, auf einen Blick zu sehen, auf welche bestimmte Sicht VR,
in unserer einseitigen Anwendung.
Also, dies ist eine zusätzliche kleine Bit Angebot Verbesserung der Benutzeroberfläche,
die es uns ermöglicht, einige interessante Funktionen zu sehen.
Obwohl es nicht viel zur Funktionalität der Anwendung hinzugefügt,
sondern fügen Sie einfach ein kleines Feature hinzu, das eine nützliche Ergänzung zu Ihrer Anwendung sein wird.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir daran gearbeitet,
die Kontaktkomponente in unsere einseitige Anwendung zu integrieren.
Wir haben auch ein paar Karten entworfen, die wir in die Home-Komponente
aufgenommen haben und einige neue Funktionen zu unserer Anwendung hinzugefügt.
Dies ist ein guter Zeitpunkt für Sie, die Änderungen in Ihrem Git-Repository mit der Meldung
Single Page Application Part 1 zu speichern.