Angular Crashkurs – Built Task App

1. Einführung: Hallo zusammen und willkommen zu diesem eckigen Crashkurs hier auf Skillshare. In diesem Kurs werden wir mit Angular und dem Basic Solid arbeiten . Darüber hinaus lernen Sie alle wichtigen Funktionen kennen , die Angular bietet und unterstützt. diese Weise werden Sie tatsächlich den Winkel installieren und etwas Schönes Abwechslungsreiches bauen. Die Funktionen, mit denen wir für diese Scores arbeiten werden , wären Angular, CLI, Komponenten, Dienste und Routing, auch HTTP-Modul und vieles mehr. Was werden wir nun durch diese Ergebnisse aufbauen? Nun, in diesem Kurs werden wir neben den Funktionen, die wir untersuchen werden, auch ein reales Projekt erstellen. Das Projekt, für das wir eine Aufgabenanwendung erstellen werden, diese Anwendung, die Sie hier auf dem Bildschirm sehen können , sieht einfach genug aus, unterstützt aber tatsächlich alle wichtigen Funktionen , die wir haben werden Erstellen Sie ein Layout beibehaltenes Los mit auch das Routing für mehrere Seiten. Wir werden auch das HTTP-Modul verwenden, um die Daten vom Server abzurufen und diese Daten tatsächlich auf einem Bildschirm anzuzeigen. Darüber hinaus arbeiten wir mit unseren Daten wie vollständig oder unvollständig mit einer unserer Aufgaben. Also, wer bin ich? Nun, mein Name ist Stefano Matter , und ich höre mehr als sieben Jahre Erfahrung in der Webentwicklung. Darüber hinaus bin ich auch ein Online-Lehrer. Neben diesem Skillshare-Kurs findest du mich auch auf YouTube. Auf YouTube findest du meinen America-Kanal, auf dem ich wöchentlich neue Tutorials zur Webentwicklung veröffentliche. Schauen Sie sich das an und abonnieren Sie dort auch meinen Kanal. Jetzt auf Skillshare finden Sie neben diesem Kurs auch viele andere Kurse, die ich habe. Kurse, die Sie finden können , werden sich mit verschiedenen Technologien befassen. Es gibt also einen anderen Kurs über Angular, aber wenn Sie sich die Kurse für verschiedene Technologien wie Bootstrap, JS, JavaScript ansehen möchten . Sie können diese auch finden. Jetzt möchte ich Sie erneut zu diesem Kurs begrüßen . Also lasst uns programmieren. 2. Angular: Nochmals Hallo und willkommen zur offiziellen ersten Lektion dieses Kurses. In dieser ersten Lektion werden wir einige Grundlagen von Angular durchgehen. Wir werden den Angular installieren. Wir werden sehen, was ein Winkelklemmenwerkzeug ist, und wir werden auch unsere Anwendung erstellen und diese Anwendung ausführen. In der nächsten Lektion werden wir darüber sprechen, was genau ist Angular? Und wir werden einige der coolen Funktionen von Angular durchgehen . Genau hier auf meinem Bildschirm sehen Sie sich derzeit offizielle Website von Angular und viele Daten-IO an. Auf dieser Website finden Sie alles, was Sie über Angular benötigen Sie können einige der coolen Funktionen sehen, die einzigartig sind, Ja. Und Sie können auch die eigene vollständige Dokumentation sehen. Angular Hazard-Technologien sind eine riesige Technologie, daher ist es nur natürlich, dass auch die Dokumentation umfangreich ist. Im linken Menü können wir hier auf Erste Schritte klicken und auf dieses Setup klicken, diese Seite öffnen und ein wenig nach unten scrollen. Hier ist das erste , was wir sehen und tun können , die Angular CLI zu installieren. Durch die Installation dieser Singular CLI werden wir auch die neueste Angular Stable-Version installieren. Diese CLI ist wirklich sehr wichtig. Wir werden es verwenden, um unsere Anwendung zu erstellen. Wir werden es auch verwenden , um eine Reihe verschiedener Funktionen zu erstellen , die Angular unterstützt. Und wir werden es auch verwenden , um unsere Anwendung auszuführen. Um nun die Angular und Angular CLI zu installieren, müssen wir diesen npm install dash g at angle slash CLI kopieren . Eine weitere Sache, bevor wir angular installieren, stellen Sie sicher, dass auch die neueste Version von node.js installiert ist. Nun, letzte empfohlene Version. Die Wichtigkeit dieses Knotens liegt nicht in Angular, sondern in seinem eigenen Tool namens npm. Npm ist der Paketmanager , mit dem wir eine Reihe verschiedener Module wie Angular installieren können . Und im Angular-Skript können Sie hier bereits NPM sehen, was bedeutet, dass wir bereits darauf und PM verwenden. Sobald Sie Node.js installiert haben, wird auch dieses NPM automatisch installiert. An diesem Punkt können Sie diesen Befehl einfach hier kopieren. Jetzt können Sie diesen Befehl in Ihr Terminal einfügen und die Eingabetaste drücken. Dieser Befehl installiert Angular und Angular CLI für uns automatisch Angular und Angular CLI für uns global auf unserem Computer, damit wir sie verwenden können. Sobald dies installiert ist, können wir EMG hier als Befehl verwenden. Und g stammt von dieser Angular CLI. Neben diesen send g werde ich dash, dash, help, ein Flag hier verwenden , um uns die gesamte Hilfe während der Hilfsfunktionen von Angular zu präsentieren . Hier sehen wir eine Reihe verschiedener Optionen und Befehle, die wir ausführen können. Zum Beispiel wird die Energierechnung unser Projekt tatsächlich aufbauen und eine Umschichtung kann unser Projekt tatsächlich einsetzen. Es gibt Befehle für den Generator, um bestimmte Dateien zu generieren und auch auszuführen, um unser Projekt tatsächlich auszuführen oder zu bedienen. Das hier ist das Angular-CLI-Tool , das ich bereits erwähnt habe. Das Tool selbst ist für uns Angular-Entwickler sehr wichtig , da wir es täglich verwenden. Also lass mich dir schon eine coole Sache zeigen , die wir mit diesem CLI-Tool machen können. Also der Befehl, den ich machen werde, ist N G nu, diese Engine, du musst einen Namen daneben haben. Und was es tun wird, um einen neuen eckigen Arbeitsbereich für uns zu schaffen . Nun, die neue Angular-Anwendung. Zunächst werde ich Clear verwenden, um meine Konsole zu löschen, damit Sie alles klar sehen können. Lassen Sie uns nun gemeinsam diesen Befehl verwenden. Ich verliere mein, dann Neu, und ich gebe den Namen meines Arbeitsbereichs weiter. Nun, der Name meiner Bewerbung. Wir werden diese Aufgabenanwendung erstellen. Dann nenne ich meine App, Task Dash App. Nun, das hier sollte unsere Anwendung generieren. Aber bevor es das tut, wird es uns auch ein paar Fragen stellen. Die erste wäre, möchten Sie eckiges Routing hinzufügen? Angular ist eine Bibliothek, unterstützt auch Routing. Also werde ich hier loslegen, ja, denn wir werden auch in diesem Kurs mit dem Routing arbeiten . Als nächstes wählen Sie ein Stylesheet-Format, das wir verwenden möchten. Angular ist ein Standard, der mit CSS, SCSS, Sass oder Less geliefert wird. Ich werde hier einfach ein CSS für mehr Standardanwendungen auswählen , die wir erstellen können. An diesem Punkt erstellt angular alle erforderlichen installierten Dateien, alle Pakete, die die App benötigt. Sobald die Anwendung installiert ist, können wir tatsächlich damit beginnen , damit zu arbeiten. Sie können auch eine Reihe von Warnungen auf meinem Bildschirm sehen, aber das ist nicht unbedingt ein Problem. Das sind nur Warnungen. Und vielleicht zeigt es für Sie nicht einmal, dass diese von unserem Arbeitsbereich abhängen und auch von einer Maschine. Also werde ich hier noch einmal mein Terminal räumen. Das nächste, was ich tun werde, jetzt wo ich meine Bewerbung habe, könnte ich cd und dann den Namen der Anwendungsaufgabe verwenden. Auf diese Weise bewege ich mich direkt in diesen Angular-Arbeitsbereich. Innerhalb dieses eckigen Arbeitsbereichs könnten wir unser Projekt tatsächlich durchführen. Um das Projekt zu starten. Ich habe dir bereits einen Befehl gezeigt, nämlich N G Serum. Wir können dieses Projekt also einfach auf einem lokalen Host durchführen. Neben dem Abstieg dienten Sie. Wir könnten auch dash, dash Open oder einfach dash O verwenden , um unsere Anwendung automatisch in unseren bevorzugten Browsern zu öffnen . Also werde ich genau das tun. Nun, Engler, wir schnappen uns unser Projekt, stellen alles zusammen zusammen und wählen das für uns zufällig aus. Also lass uns einfach ein bisschen warten. Sobald dies abgeschlossen ist, sollten wir diese Dummy-Standardanwendung sehen , die von Angular für uns erstellt wurde. Angular macht dies automatisch und es hat bereits einige Koordinaten. Der Beispielcode ist nur die nützlichen Links, die für uns hilfreich sein könnten. Sie können die Links sehen, unter denen Sie Angler lernen können, auch die CLI-Dokumentation und eine Reihe verschiedener Funktionen, die Angler hat. Sie können auch die Funktionen sehen , die Angular ebenfalls unterstützt. Es ist, als würde man eine neue Komponente erstellen , über die wir etwas später lernen werden. Aber dieser Startcode ist für uns überhaupt nicht wichtig. Aber wie ich es bereits erwähnt habe, lassen Sie mich Ihnen direkt neben meinem Terminal zeigen. Ich habe ein anderes geöffnet, weil es für mich sehr nützlich ist , zwei Terminals offen zu haben. Sie lernen diesen Kurs kennen. Warum? Weil wir auch neue Komponenten oder Dienste generieren und erstellen werden , die Angler hat und unterstützt. Dafür lassen wir unsere Anwendungen weiterhin auf dem linken Terminal laufen, während wir sie auf der rechten Seite verwenden können, um diese Funktionen zu generieren. Aber hier, was ich tun werde, ich werde Code verwenden, um meine Aufgaben-App in meinem Visual Studio-Code zu öffnen. Also hier ist es. Dies ist offizieller Angular Workspace. Und auf der linken Seite können wir alle Akten sehen, die Angler vorerst hat. Im nächsten Video erfahren wir mehr über Angular und was jede dieser Dateien für uns tut. Lassen Sie uns also sofort darauf eingehen. 3. Was ist Angular: Was ist eigentlich Angular? Nun, Angular, einfach ausgedrückt, ist ein JavaScript-Framework und wird verwendet, um einseitige Anwendungen zu erstellen. Was bedeutet mir diese einseitige Bewerbung? Nun, diese Anwendungen wären Anwendungen mit Routing und auch unterschiedlichen Seiten, ohne diese Seiten tatsächlich neu zu laden. zum Beispiel hier auf der offiziellen Angular-Website Wenn ich mich zum Beispiel hier auf der offiziellen Angular-Website auf die Features-Seite bewege, können Sie sehen, dass die Seite geändert wurde die Seite jedoch überhaupt nicht aktualisiert wurde. Und das ist diese einseitige Anwendung. Alles wird auf einer einzigen Seite dargestellt, aber es wird der für eine bestimmte Seite benötigte Inhalt neu gerendert . Nun, als nächstes, in Bangalore, gibt es viele verschiedene JavaScript-Frameworks, die Sie verwenden können. Einige der beliebtesten neben Angular , React und Vue. Was unterscheidet Singular also von solchen wie der Ansicht der Reaktanten? Nun, Angular ist ein riesiges Framework in seiner eigenen Codebasis. Es unterstützt auch Routing und sogar das HTTP-Modul selbst. Daneben gibt es viele verschiedene Seibel-Verbindlichkeiten von Angular, die bereits in angular integriert sind. Und es gibt sogar ein Drittanbieter-Bibliothekslichtausfall-JS , das standardmäßig mit Angular geliefert wird. Schulden kann man also sehen , dass der Finger wirklich riesig ist und es hier ziemlich viel zu lernen gibt. Und mit Angular können Sie von Anfang an erstaunliche Anwendungen erstellen . Da es sich um ein so umfangreiches Framework handelt, ist es offensichtlich viel schwieriger, ein Framework zu erlernen. Aber lassen Sie uns ein wenig über die Beliebtheit von Angular sprechen. Woher kommt Angular? Zunächst einmal wurde Angular von Google selbst entwickelt, und Google arbeitet immer noch täglich an Angular, um es kommenden ein oder zwei Jahren zu verbessern. Alle sechs bis neun Monate können Sie mit einem größeren Update von Angular rechnen, das die eigene Version verschiebt. Derzeit sind wir auf Version 14. Und wie gesagt, England ist ganz oben neben der Ansicht. Und doch als die beliebtesten JavaScript-Frameworks da draußen. Bevor wir uns mit dem Code befassen, möchte ich Ihnen nur einige der coolen Projekte zeigen , die mit Angular erstellt wurden. Zum Beispiel wurde lift als App mit Angular, Tinder und Snapchat erstellt . Es gibt viele verschiedene Projekte, die mit Angular erstellt wurden. Viele von ihnen waren dabei ziemlich erfolgreich. Daran können Sie also sehen, dass Sie mit Angular tatsächlich alles bauen können , was Sie möchten. Es ist also nur neu zu entscheiden, ob Sie eine kleine Anwendung erstellen möchten , die wir direkt in diesem Kurs ausführen werden , oder eine größere Anwendung wie eine dieser. Kehren wir jetzt zu unserem Code zurück. Lassen Sie uns zunächst ein wenig über den Winkel und den Code sprechen. Das erste, was ich Ihnen zeigen muss sind diese Node-Module. Diese Node-Module werden automatisch installiert, wenn wir unsere Angular-Anwendung erstellen. Für diese Node-Module ist es wirklich wichtig, diese Paketpunkt-JSON-Datei und die package.json-Datei in dieser Spezifikation und in dieser JSON-Datei zu haben Paketpunkt-JSON-Datei und die package.json-Datei in dieser Spezifikation und in dieser JSON-Datei Wir können einige einfache Informationen über unsere App sehen wie der Name und die Version. Wir können verschiedene Skripte oder Befehle sehen, die wir ausführen können, wie NG dient, um unsere Anwendung auszuführen. Und wir können verschiedene Abhängigkeiten sehen, die automatisch mit Angular installiert wurden. Sie können sehen, dass Angular einen Kern hat, ein Modul, das offensichtlich hier installiert ist, und das sind die Kernfunktionen von Angular, dem Hasen. Ganz andere Funktionen wie Animationen, Formulare, Router und so weiter. Und ich habe das auch erwähnt, aber Sprichwort JS als Bibliothek, obwohl es sich um eine Bibliothek eines Drittanbieters handelt, wird hier keine Angular-Bibliothek installiert, da Angular diese ausfallende JS-Bibliothek ziemlich verwendet hat. Wenn Sie jetzt das Setup Ihrer Angular-Anwendung ändern möchten , können Sie diese JSON-Datei Angular.js jederzeit öffnen. Hier sehen Sie, nun den gesamten Schaltplan Ihres Projekts. Tatsächlich können Sie den Namen des Projekts und den gesamten Schaltplan davon sehen. Zum Beispiel, wenn Sie einige externe Stile haben , die Sie verwenden möchten, wie das Importieren der Bootstrap-Bibliothek. Nun, das kannst du direkt hier machen, oder sogar Bootstrap-JavaScript. Sie können das hier in einem Skript tun, genau hier können Sie auch verschiedene Konfigurationen für das Angular-Projekt wie die Produktion selbst sehen verschiedene Konfigurationen für . Sie können hier Ihre eigenen Konfigurationen einrichten. Jetzt ist dies nur das Setup der Angular-Anwendung. Schließen wir diese Dateien und gehen in diesen SRC-Ordner, den Quellordner. In diesem Ordner ist das erste, was uns wirklich wichtig ist, diese Datei main.js. Das bedeutet, dass p eine Datei ist. Wir schnappen uns das Hauptmodul von Angular und Bootstrap dieses Moduls. Das Hauptmodul der Angular-Anwendung ist normalerweise dieses App-Modul, das Sie bald sehen werden. Im nächsten Video werden wir mehr mit Modulen arbeiten. Angular verwendet diese Module wirklich und Sie werden in diesem Kurs sehen, wie das geht. Aber in dieser Datei, Angular, greifen wir zu diesem Modul und führen die Anwendung basierend auf diesem Modul aus. Es ist also sehr wichtig, dass alles, was Sie in Ihrer Bewerbung haben, vorhanden ist. Muss in dieser App-Moduldatei wichtig sein, damit die Anwendung tatsächlich davon erfahren kann. Jetzt haben wir hier auch styles.css, was unser globales Styling ist. Wir werden etwas später darauf zurückkommen und auch Punkt-HTML indizieren. Dies ist die HTML-Datei, die immer neu gerendert wird. Dies ist diese einseitige, einseitige Anwendung. Hier sehen wir also diesen genehmigten und durch diese App Routenanflug, wenn die aktuelle Route gezogen wird, die wir uns gerade ansehen. Und wenn wir unsere Routen richtig konfigurieren, können wir schweißen einen anderen Inhalt für eine bestimmte Route präsentieren. So passiert die Magie. Aus diesem Grund müssen wir die Seite nicht wirklich aktualisieren. Wir können uns jedoch von Route zu Route bewegen, von unserer Seite zur anderen, und der Inhalt wird automatisch neu gerendert. Jetzt hier drin könnten wir verschiedene Umgebungen haben , die wir einrichten möchten, wie die Produktion oder einfach nur unsere eigene Entwicklungsumgebung. Außerdem könnten wir hier unsere eigenen Assets wie Bilder, Schriftarten usw. haben. Und wir könnten, naja, die eigentliche Bewerbung haben , diese sexuelle Bewerbung. Nun, es gibt eine ganze Reihe von Akten hier. Lassen Sie uns alle mit der Hauptdatei beginnen , wie dieser App, dem Modul, das P S bar. Also zuerst, warum? Nun, Peers ist eine Erweiterung für ein TypeScript. Und angular verwendet standardmäßig das TypeScript in der gesamten Anwendung. Daher ist es sehr wichtig , dass Sie zumindest die Grundlagen von TypeScript kennen , um tatsächlich mit Angular arbeiten zu können. Aber kommen wir zurück zu dieser App-Moduldatei. Hier sehen wir diesen Dekorator des N G Moduls. Durch die Verwendung dieses Energiemoduls sagen wir, dass diese Datei grundsätzlich als Modul verwendet wird. Und da dies unser Hauptmodul für unsere Anwendung ist, in unserem App-Modul sollten wir in unserem App-Modul alle erforderlichen Eingaben haben. Zum Beispiel unsere App-Komponente, das war die erste Komponente, die Sie bereits in einem früheren Video gesehen haben, die erste Seite, die standardmäßig von Angular erstellt wurde. Es gibt auch ein Browsermodul , das plus ziemlich nette Dienstprogramme enthält. Und ohne sie können wir nicht über die Angular-Anwendung programmieren. Und es gibt auch ein Outing-Modul, das Modul, das wir auf unserer Straße erstellt haben. Erinnern Sie sich, dass wir gefragt wurden, ob wir Angular-Routing verwenden möchten , und dass wir bei der Generierung unserer Anwendung mit diesem Befehl Ja ausgewählt haben. Nun, genau das hat dieses Routing-Modul erstellt und es automatisch für uns hier importiert . Hier können Sie nun sehen, dass Komponenten in Deklarationen wichtig sein müssen. Module müssen wichtig sein, um in Importe importiert zu werden, es gibt Anbieter wie Dienste und Bootstrap-Teil steht für was die App tatsächlich ausführen sollte. Und für uns ist es die AB-Komponente, unsere Ausgangskomponente. Also lasst uns die Startkomponenten öffnen. Öffnen wir die HTML-Datei. Und das hier ist eigentlich der ganze Code, den wir derzeit auf unserem Bildschirm sehen können. komme schnell zurück zu meinem Bildschirm. Das ist genau dieser Code. Nun, dieser Code ist nicht so wichtig , dass wir ihn tatsächlich nutzen können. Und lass uns hier das H1-Tag verwenden und lass uns Hallo Welt sagen. Auf diese Weise könnte ich meinen lokalen Host öffnen und wir können sehen, dass Inhalte jetzt eigentlich nur die Hello World sind. Damit dies funktioniert und unsere Anwendung tatsächlich automatisch neu geladen wird, müssen Sie diesen lokalen Host immer noch mit dem Befehl in serve laufen lassen. jetzt zu meinem Code zurückkomme, kann ich sehen, dass ich neben dieser HTML-Datei die CSS-Datei, diese Spezifikation , diese TS-Datei und die TS-Datei sehen kann . Dies sind alle Dateien , die zu einer Komponente gehören. Normalerweise haben wir beim Erstellen einer Komponente vier Dateien für diese Komponente. Anstatt HTML, CSS und TypeScript zusammen zu codieren , teilt angular diese tatsächlich in verschiedene Dateien auf. also diese App Dot Component Dot TS-Datei besuchen, erfolgt hier die Einrichtung dieser Komponente tatsächlich. Jede Komponente hat ihre eigene T- sowie TypeScript-Datei. Und es wird diesen Dekorator von Komponenten im Inneren haben. Wir werden einen Selektor haben. Wir sind trivial, nun, wir können es verwenden um die Schuldenkomponente auszuwählen und mit Sound zu zeigen. Zum Beispiel ist der Selektor hier App-Route. Und wenn Sie sich erinnern, verwenden wir diese Komponente in unserer Datei index.html verwenden wir diese Komponente hier als App-Route-Komponente. nun neben diesem Selektor oder Wochenende Geben Sie nun neben diesem Selektor oder Wochenende die Vorlage und den Stil für unsere Komponente an, und das wären unsere HTML- und CSS-Dateien. Kurz gesagt, hier geht es vorerst um die Komponenten, mit denen wir etwas später mehr arbeiten werden. Das nächste Ding hier ist diese Punktspezifikation, die seine Datei, Spezifikationsdateien in Angular enthält. Nun, die werden zum Testen verwendet. Wenn Sie also einen automatischen Test schreiben müssen, werden Sie diese hier gut machen, in eigenen Spezifikationsdateien. Und das Letzte, was wir nicht überprüft haben, ist dieses App-Routing-Modul. separate Routing-Modul, wir werden nur, naja, es wird diesen Dekorator des Energiemoduls verwenden , um das Modul einzurichten. Sie wissen bereits, dass es in unserem App-Modul wichtig ist. Unsere Anwendung weiß also tatsächlich über dieses Modul Bescheid. Und hier sehen Sie das Setup für die Route, das wir später mehr erfahren werden. Diese Routen müssen jedoch in einem Router-Modul von Angular übergeben werden . Die Angular-Anwendung könnte also tatsächlich über diese Routen Bescheid wissen. Neben diesen Funktionen wie den Modulkomponenten gibt es nun viele verschiedene Funktionen , die Angular hat und unterstützt, wie Dienste, Pipes, Direktiven usw. Aber bevor ich dieses Video beende, gehen wir zurück zu unserem Stil des CSS hier. Hier werde ich meine Bewerbung global gestalten. Zum Beispiel nehme ich alle meine Elemente in meiner Anwendung und setze das Padding auf diese, zum Beispiel 0 sind, und auch die Marge auf 0. Neben dem Tod oder dem Ergreifen meines Körpers. Und schließlich setzen Sie die Schriftfamilie, als Schriftfamilie verwendet werden soll, auf Courier New. Außerdem werde ich die Farbe meiner Schrift auf 333333 setzen. Das war's. jetzt meine Bewerbung sehen, können wir sehen, dass unsere Hello World eine gleichgültige Schrift ist. Wir können auch sehen, dass hier oben und links nicht viel Platz ist , und wir sind bereit, unsere Bewerbung zu starten. Im nächsten Video erfahren wir mehr über die Module. Eines der Hauptmerkmale von Angular. 4. Module: Jetzt haben wir schon über die Module gesprochen, aber ich möchte noch ein paar Dinge sagen. Wir sind auch in der Lage, unsere Module in unsere Root-Module oder Feature-Module zu unterteilen . Das geschriebene Modul wäre unsere Hauptmodule, die wir für die Anwendung haben könnten, wie dieses App-Modul. Zukünftige Module wären jedoch spezifische Module , die für eine bestimmte Zukunft unserer Anwendung verwendet werden . Angenommen, Ihre Anwendung unterstützt Authentifizierung und Datenauthentifizierung kann viele verschiedene Seiten wie Anmeldung oder Anmeldung haben . Vielleicht setzen Sie Ihr Passwort zurück. Und klein. Bei vielen dieser Seiten wird es auch eine Menge Funktionen geben. Es ist also nur natürlich, diese seltsame relative Angabe als Feature zu trennen diese seltsame relative Angabe als und das zukünftige Modul dafür zu erstellen. Das bedeutet, dass wir alle Komponenten, die wir haben werden, nicht hier in unser App-Modul importieren müssen, aber wir könnten sie in unser zukünftiges Modul importieren , das wir erstellen könnten. Dennoch sollte unser App-Modul darüber Bescheid wissen. Wir könnten dieses Feature-Modul also einfach in das SAP-Modul importieren und die gesamte Anwendung wird immer noch einwandfrei funktionieren. Ein cooler Anwendungsfall dieser Route oder zukünftiger Module ist, nun, wir können es sehen, wenn wir dieses App-Routing-Modul öffnen . In diesem separaten Routing-Modul können wir dieses Schlüsselwort für root sehen. Nun, eine Methode, die Straße erfordert. An diese Methode übergeben wir unsere Routen, was bedeutet, dass diese Routen Hauptrouten unserer Wurzel unserer Anwendung sind . Nun, die Hauptrouten für unsere Anwendung, die in diese Authentifizierungszukunft zurückkehren , da diese Authentifizierungsfunktion ihre eigenen Seiten und auch ein eigenes zukünftiges Modul haben wird , ist nur natürlich um eigene zukünftige Routen zu schaffen , die wir nutzen können. Ein wirklich cooler Anwendungsfall dieser zukünftigen Module. Nun, ist dieses gemeinsam genutzte Modul in Angular, wir als Entwickler erstellen normalerweise dieses gemeinsam genutzte Modul, in dem wir alle unsere Komponenten, Dienste und Pipes haben , die gut genutzt, gemeinsam genutzt und weit verbreitet sind während unserer gesamten Bewerbung. Also hier drin werde ich jetzt mein geteiltes Modul erstellen. Und das ist wieder so, dafür werden wir wieder das CLI-Tool verwenden. Um das zu tun, verlieren wir in G, G für generate, M für Modul. Und dann sollte ich den Namen eines meiner Module verwenden, das geteilt wird. Hier sehen wir, dass das Modul tatsächlich für uns erstellt wurde. Um auf meine Bewerbung auf unserer linken Seite zurückzukommen, werde ich hier einen freigegebenen Ordner haben. Jetzt, in diesem Ordner für freigegebene Ordner, kann ich sehen, dass ich dieses Modul, diese TS-Datei, freigegeben habe. Wir können sehen, dass dieses gemeinsam genutzte Modul weniger Code als unser App-Modul hat da es für dieses gemeinsam genutzte Modul nicht so wichtig ist , den gesamten Startcode zu haben. Dies ist das erste Feature-Modul, das wir haben. Und dieses Modul wird tatsächlich für gemeinsame Funktionen verwendet , die wir haben könnten. In der nächsten Vorlesung werden wir beispielsweise unsere obere Leiste für unsere Anwendung erstellen. Anstatt diese obere Leiste auf allen unseren Seiten zu erstellen, erstellen wir tatsächlich unsere gemeinsame Komponente einer oberen Leiste. Daher werden wir diese gemeinsam genutzte Komponente in dieses gemeinsam genutzte Modul importieren und auch exportieren. Unsere Bewerbung könnte also davon erfahren. Durch Schulden können wir diese Top-Bar-Komponente verwenden , wo immer wir wollen, und wir können sie immer auf unserem Bildschirm haben ohne sie immer wieder wiederzuverwenden. Also noch einmal, dieses gemeinsam genutzte Modul ist sehr nützlich für uns, da es immer alle unsere gemeinsamen Funktionen enthalten kann , die wir haben könnten, wie verschiedene Komponenten oder Dienste oder Pipes und so weiter. Nachdem ich das Top über eine Komponente erwähnt habe, gehen wir zum nächsten Video, in dem ich mehr über die Komponenten sprechen werde und wir gemeinsam diese obere Leiste erstellen werden. 5. Komponenten: In den nächsten beiden Modulen sind Komponenten auch ein sehr wichtiges Merkmal von Angular. Ohne Komponenten hätten wir keine Seiten und auch keinen Inhalt auf unserem Bildschirm In diesem Video zeige ich Ihnen, wie wir eine Komponente in Angular erstellen können . Die Komponente, die ich erstellen möchte, ist die obere Leistenkomponente , die wir verwenden können. Die Komponenten der oberen Leiste sollten auf allen unseren Seiten angezeigt werden, die wir in unserer Anwendung haben könnten. Es wäre also gut, wiederverwendbare Komponenten zu erstellen . Nun, alle Komponenten in Angular sind tatsächlich vollständig wiederverwendbar. Aber für uns hier werden wir noch einen Schritt weiter gehen und diese Top-Bar-Komponente in unserem gemeinsamen Modul erstellt . Auf diese Weise geben wir an , dass die obere Leistenkomponente eine gemeinsam genutzte Komponente ist und zu keiner bestimmten Seite gehört. Um diese obere Leistenkomponente in meinem Terminal mit dem CLI-Tool von Angular zu erstellen . Auch hier werden wir den Befehl N, G, dann G für generate verwenden, siehe für Komponente. Und ich werde diese Komponente im freigegebenen Ordner generieren, dem es sich um unsere Modul-Schrägstrichleiste handelt. Jetzt kann ich in meinem Code-Editor dieses gemeinsam genutzte Modul öffnen. Wir teilen den Ordner und dann die obere Leiste. Und hier sehe ich vier verschiedene Dateien. Es gibt HTML, CSS, TypeScript und auch Testdateien für diese Komponente. Ich habe dies bereits am Anfang erwähnt, dass jede Komponente normalerweise vier Dateien dafür enthält. Diese vier Dateien werden tatsächlich diese eine Komponente sein. Also haben wir unser HTML, CSS und TypeScript aufgeteilt , sodass wir nicht alles in einer Datei aufschreiben. Es könnte eine ziemlich lange Datei sein. In dieser Top-Bar-Komponente Angular fügt sie, sobald sie eine Schuldenkomponente generiert hat, sobald sie eine Schuldenkomponente generiert hat, auch diese Art von Dummy-Inhalt für diese Komponente hinzu. wir also sicher , dass wir diese Komponente tatsächlich auf unserem Bildschirm präsentieren . also in die TypeScript-Datei der oberen Leiste gehe, kann ich den Selektor der f dash top bar sehen, was bedeutet, dass ich in meiner App-Punkt-Komponente, wo ich diese Hello World habe, diese Hello World jetzt entfernen werde. und ich werde das HTML5-Element der Dash Top Bar f, f hinzufügen . Und das sollte eigentlich unsere Top-Bar-Komponente darstellen. Aber genau hier haben wir einen Fehler. Und wenn wir unseren lokalen Host öffnen würden , wird derselbe Fehler auch auf unserem lokalen Host sichtbar sein. Das ist gut, weil Angular diese Weise viel einfacher zu debuggen ist. Der Grund, warum wir dieses Center haben, ist unsere App-Komponente nichts über die obere Leiste der App weiß. Und der Grund, warum weiß nicht, nun, diese App-Topleiste gehört zu diesem Modul. Innerhalb dieses gemeinsam genutzten Moduls im Deklarations-Array kann ich diese Top-Bar-Komponente finden. Aber wenn ich zu meiner App Dot Module dot txt Datei gehen würde, gibt es keine solchen Komponenten, das ist nur eine AB-Komponente. Was sollen wir also hier tun? Nun, wir sollten diese Top-Bar-Komponente in unser App-Modul importieren , damit wir sie über unsere App-Modulkomponenten verwenden können , die wir haben könnten. Aber weil wir dieses gemeinsam genutzte Modul haben, aus diesem gemeinsam genutzten Modul werde ich es einfach aus diesem gemeinsam genutzten Modul exportieren. Also werde ich das US-Exportfeld treffen und ich kann darüber hinaus hören, was sie exportieren möchten. Für mich kann das eine Top-Bar-Komponente sein. Anstatt meine oberste Batteriekomponente in mein App-Modul zu importieren, kann ich jetzt meine oberste Batteriekomponente in mein App-Modul zu importieren, einfach meine Freigabe des Moduls hier importieren. Auf diese Weise importiere ich das gemeinsam genutzte Modul und alles, was aus diesem gemeinsam genutzten Modul exportiert wird. Und damit beheben wir einfach diesen Fehler, was bedeutet, dass wir jetzt unsere obere Leiste der App in unserer App-Punkt-Komponentenpunkt-HTML-Datei verwenden in unserer App-Punkt-Komponentenpunkt-HTML-Datei meinen lokalen Host überprüfen. Im Moment kann ich sehen, dass der Text hier der oberen Leiste funktioniert, was bedeutet, dass die Komponente tatsächlich auf meinem Bildschirm dargestellt wird , in dem Inhalt dieser Komponente in der oberen Leiste funktioniert. Ich spreche über diesen Inhalt. Lass uns hier welche erstellen. Also hier drin werde ich diesen Absatz entfernen und ein Div mit der Klasse der oberen Leiste hinzufügen. Diese Klasse wird später für das Styling verwendet. In dieser oberen Leiste können Sie nun zwei Abschnitte hören. Der erste Abschnitt kann ein Logoabschnitt sein. Der zweite Abschnitt kann ein Navigationsabschnitt sein. Jetzt, wo wir diese beiden Abschnitte in meinem Logo-Bereich haben , werde ich kein Bild für ein Logo verwenden, oder sie verwenden einfach H2, was Aufgaben anzeigt. Also gib eine Aufgabe auf. Also lasst uns hier Singular Heel verwenden. Jetzt für meine Navigation hier werde ich eine Navigation mit einer ungeordneten Liste erstellen. Dann hat das erste Listenelement ein Anker-Tag. Diese H-Referenz kann zu einem Hash führen. Im Moment werden Sie später sehen, wie Sie ein korrektes Routing in Angular durchführen . Hier, was ich tun werde, werde ich sagen, whoa, jetzt werde ich diesen Listenpunkt kopieren. Unten unten. Und für den zweiten Listenpunkt kann es darüber sagen. Wir können also zwei Seiten Home About-Seite für unsere Anwendungsprüfung haben. Nun, als unser lokaler Gastgeber, ist das, was wir hier haben, nur eine Art Logo, das Task-Cap-Texte und zwei Links hier sind. Lassen Sie uns diese Anwendung so gestalten, dass wir diesen Code in eine obere Teilkomponente schreiben. Wir sind in der Lage, die CSS-Datei davon zu öffnen und diese Komponente tatsächlich zu stylen. Um diese obere Leiste zu stylen, nehme ich meine obere Leiste geteilt durch n. Ich werde das als Flussmittel anzeigen. Dann werde ich den Inhalt im Inneren als Zwischenraum begründen. Und ich könnte einen Box-Schatten hinzufügen, zum Beispiel von 02 Pixel, fünf Pixel. Und nehmen wir an, es können Nullen, Nullen, Nullen, Nullen 0 sein, damit D eine gewisse Transparenz hat. Außerdem kann ich die Einbettung von 20 Pixeln einrichten. Jetzt wird dies unsere oberste Leiste sein. Gestalten wir jetzt unsere Navigation. Ich werde mich nicht um das Logo kümmern. Also obere Leiste, dann mein Navigationsbereich, den sie haben und dann ungeordnete Listen, die ich habe. Der Listenstil für diese wird keiner sein, da ich Links nebeneinander und keine tatsächliche Liste präsentieren möchte Links nebeneinander und keine tatsächliche Liste präsentieren . Jetzt unten könnte ich wieder meine obere Leiste anvisieren. Ungeordnete Navigationsliste und jedes spezifische Listenelement unten. Für jedes spezifische Listenelement zeige ich diese als Inline an, um nebeneinander zu stehen. Und ich werde den Rand auf der rechten Seite auf zehn Pixel hinzufügen , sodass sie einen kleinen Abstand zwischen diesen haben könnten. Zielen Sie jetzt wieder auf meine obere Leiste navigieren Sie dann zu dieser ungeordneten Liste, Listenelement und jedem spezifischen Anker-Tag in unserem Listenelement. Hier stelle ich die Schriftgröße auf 20 Pixel ein. Dann werde ich Textdekoration verwenden, um keine zu sein. Und lass uns hier die Farbe ändern. Die Farbe meiner Links kann 333333 sein. Und schließlich werde ich wieder auf meine Anker-Tags abzielen, aber dieses Mal Hover-Effekt auf diese. Dann auch aktiv und auch fokussieren. Für all diese werde ich einfach die Farbe auf 777777 ändern. Und damit haben wir tatsächlich unseren Inhalt, HTML, Styling, unseren CSS-Code für unsere obere Leiste. Woher weiß diese Komponente davon? Nun, in Top-Bar-Punkt-Komponenten, der TS-Datei, können wir sehen, wo wir unsere Komponente deklariert haben. Es gibt einen Selektor, aber es gibt auch eine bestimmte Vorlage und auch bestimmte Stile , die über diese Vorlage hinausgehen. Das ist also im Grunde das Setup für unsere Komponente. Auf meinem Bildschirm sehen wir gerade unsere obere Leiste. Es gibt ein Protokoll auf der linken Seite und Home und Links auf der rechten Seite. Ich kann sogar ein bisschen zoomen, damit du es besser sehen kannst. Das Gute an dieser oberen Leiste, nun, es ist eine gemeinsam genutzte Komponente, was bedeutet, dass ich, wenn ich auf meine Homepage gehe, immer noch sehen werde, ich meine obere Leistenkomponente immer noch sehen sollte. Und auch wenn ich auf die About-Seite gehe, werde ich wieder meine Top-Bar-Komponente sehen , sobald ich alles gut eingerichtet habe, mein Routing und die Seiten auch, wenn ich über Schulden spreche, oder? Im nächsten Video werden wir mit unserem Routing arbeiten. 6. Routen: Daher wird Routing im Allgemeinen, naja, einem Web heute selten verwendet. Es gibt fast keine Website oder keine Anwendung, die wirklich keine Routen hat. Also im Grunde immer dann, wenn Sie von Seite zu Seite wechseln oder auf einen bestimmten Artikel klicken möchten , um diesen Artikel zu lesen. Das wäre das Routing. Alle diese Routen müssen innerhalb der Anwendung eingerichtet werden . Und auch alle diese Routen müssen wissen, welche Inhalte dem Benutzer genau präsentiert werden sollen. Und in England ist das sehr praktisch, weil Angular eine eigene Winkelführung hat. Warum ist es wichtig, dass Angular ein eigenes Routing hat? Nun, viele Technologien, selbst die beliebten, unterstützen das Routing von Anfang an nicht. Sie müssen also die Routen und das Routing einrichten. Und es ist ziemlich hektisch damit zu arbeiten, aber in Angular ist das schon eingerichtet. Wenn Sie sich also erinnern , als wir unsere Anwendung neben dem Winkelmodul generiert haben, hatten wir auch dieses App-Routing-Modul. Und dies ist der Ort, an dem wir unsere Routen einrichten werden. Für diese Routen möchte ich meine Heim- und About-Seite hören. Also werde ich jetzt zwei Seiten erstellen, Home und About Page. Seiten sind nichts anderes als nur Komponenten. Was wir also tatsächlich tun könnten ist hier zwei Komponenten zu erzeugen. Lassen Sie uns also wieder dieses CLI-Tool verwenden. Ich werde N, G, G verwenden, um die C4-Komponente zu generieren, und das wird meine Homepage hier generieren. Sobald dies abgeschlossen ist, werde ich den gleichen Befehl wiederholen, diesmal jedoch für ungefähr Seite. Jetzt haben wir unsere Seiten ohne Komponenten für ein Zuhause. Und auch über Seite, nun, wir könnten unsere Routen hier in diesem Routen-Array einrichten. Um die Route hier einzurichten, verwende ich das Objekt. Und innerhalb dieses Objekts kann ich die Pfad-Eigenschaft verwenden, diesen Pfad. Nun, wir sollten auch ein Paar deklarieren , wohin wir unseren Benutzer führen möchten. Da ich diese Homepage habe, glaube ich, dass mein Benutzer eine Home-Route hat. Für diese Home-Route sollte ich auch die Komponente erstellen, die die spezifische Komponente verwendet , die auf dieser Home-Route dargestellt werden soll . Und für mich wird das eine Home-Komponente sein. einfach sicher, dass Sie oben diese Home-Komponente importieren. Visual Studio Code ist intelligent genug, um das automatisch für mich zu erledigen. Jetzt erstellen wir die nächste Route. Also Komma hier und dann das nächste Objekt für ein Haustier von ungefähr, dann wird die Komponente für diese Seite über Komponente sein. Ich habe hier auch groß geschrieben. Ich werde das ändern, naja, alle Buchstaben in Kleinbuchstaben. Nun, im Moment haben wir unsere Routen hier in der URL. Wenn ich meinen lokalen Host auf slash home ändern würde. Nun, home wird immer noch in der URL sein, was gut ist. Wenn ich es auf ungefähr ändern würde. Es ist immer noch da. Angular weiß also tatsächlich davon. Es wird kein Inhalt auf dem Bildschirm angezeigt, und wir können die Route auch nicht ändern, indem wir hier klicken Sie können hier nur Bargeld sehen, aber wir werden das beheben. Also auch wenn ich zum lokalen Host-Port 8200 komme, gibt es hier nichts, weil sie diese Homepage und auch die Home-Route haben . Es wäre gut, den Benutzer automatisch auf die Homepage umzuleiten , um diese Umleitung oben in meinem Array einzurichten . Ich werde die neue Route erstellen. Diese neue Route wird, naja, sie sollte einen Pfad haben der nur die leere Zeichenfolge sein wird, was bedeutet, wenn der Benutzer gerade unsere Domain besucht. Und sobald das passiert, werde ich die Eigenschaft von redirect to verwenden und den Benutzer auf meine Homepage umleiten. Und das Letzte, wir sollten auch Path Match verwenden, also wie unser Haustier zusammenpassen sollte. Und hier kann ich Full Match für meinen Weg verwenden. Wenn ich jetzt schnell meinen Browser überprüfe, ob ich diese Spalte von meiner Seite entfernen und einfach meine Domain hier eingeben würde , können wir sehen, dass wir immer noch zum Schrägstrich nach Hause weitergeleitet werden , weil diese rote Richtung war an Ort und Stelle. Da ich jetzt auf dieser Homepage bin, sollte ich hier einige Inhalte sehen, zumindest den Dummy-Text , der mit Angular geliefert wird. Heimarbeiten, richtig? Aber hier gibt es keinen Inhalt obwohl die Heimatroute existiert. Und wir wissen, dass wir diese Home-Komponente haben. Nun, obwohl wir dieses Routing eingerichtet haben, weiß Angular immer noch nicht wo es diese Komponenten zeigen soll. In meiner App-Punkt-Komponentenpunkt-HTML-Datei, wo ich diese obere Leiste direkt darunter habe, werde ich das Element Router Outlet verwenden. Diese Route und dieser Auslass werden unsere Komponenten grundsätzlich im Inneren auslassen. Je nachdem, auf welcher Route wir uns wie zu Hause oder auf der wir uns befinden, werden die Komponenten erfasst, die für diese Routen verwendet werden , und diese direkt hier in Displays dargestellt , wo immer wir diese Route und diesen Outlet verwenden wenn ich es woanders verwenden würde, wird es diese Komponenten dort präsentieren. Und jetzt können wir bereits eine Veränderung sehen. Wir sehen diese Hausaufgaben. Wenn ich die Seite manuell auf Slash about ändern würde, dann würde ich über Werke sprechen. Aber ich sagte das Handbuch und richtig, also können wir das immer noch nicht per Scheck ändern, indem wir die Links hier ändern, oder? Wir gehen gerade zu diesem Hash über , der für uns keine existierende Route ist. Dafür müssen wir tatsächlich in unsere obere Leistenkomponente gehen , wo wir diese Links haben. Also in Angular und anstatt einen Entwurf wie diesen zu verwenden, haben wir etwas anderes. Es wird Router-Link genannt. Dieser Router-Link kann uns irgendwohin führen. Für mich hier führt es mich zur Slash-Homepage, da dies hier eine Heimatroute ist, ebenfalls vier unten. Ich werde diese H-Referenz wieder entfernen und Hear Slash verwenden. Über. Jetzt haben wir hier einige Fehler. Dies liegt daran, dass diese Routerverbindung für dieses spezifische Element keine bekannte Eigenschaft ist. Und es ist nicht so, dass es unbekanntes Eigentum ist. Das liegt daran, dass in dieser oberen Leistenkomponente diese obere Teilkomponente zum gemeinsam genutzten Modul gehört. Dieses gemeinsam genutzte Modul weiß nicht, dass wir Routing tatsächlich in einigen seiner eigenen Komponenten verwenden. Es ist also wirklich einfach , dem im Eingabe-Array zu begegnen , wo wir normalerweise Module importieren. Nun, wir können einfach das Modul des Router-Moduls importieren, indem wir dieses Modul importieren, und sicherstellen, dass es oben von einem eckigen Schrägstrich-Router importiert wird. Wenn wir es importieren, verlieren wir diese Pfeile. Was heißt das jetzt? Wenn ich auf Über klicken würde, werde ich auf die About-Seite weitergeleitet. Wenn ich auf Home klicken würde , werde ich auf die Startseite verschoben, was bedeutet, dass wir unsere Seiten im Routing eingerichtet haben . Nun, neben diesem Routing, das Sie gesehen haben, die Umleitung und auch, wie Sie die Links einrichten , um mit dem Routing und den Seiten zu arbeiten. Das ist viel mehr Routing. Das Routing ist ein ganzes Modul, das auch für ein untergeordnetes Modul eingerichtet werden kann , wir könnten Kinderrouten haben, wir könnten auch dynamische Routen nach bestimmten Ideen oder nach bestimmten Slugs haben, wie Sie möchten. Wir könnten auch Daten von einer Route auf die andere Route weitergeben . Wir könnten auch unsere Routen nutzen und etwas Bestimmtes mit unseren Routen machen, vielleicht werden die Parameter aus den Routen gezogen und vieles mehr, viel mehr. Aber das Routing in Angular könnte eigener Kurs sein, um ehrlich zu sein, es kann wahrscheinlich ein oder zwei oder drei Stunden dauern , nur um es vollständig zu erklären. Anstatt das alles für diesen Crashkurs zu tun, werden wir einfach mit diesem Crashkurs fortfahren , um unsere Aufgabenanwendung fertigzustellen. Und wir werden mit den Dienstleistungen fortfahren. 7. Dienstleistungen: Ein weiteres wirklich wichtiges Merkmal von Angular, es heißt Service. Service oder Dienstleistungen sind tatsächlich injizierbare Funktionen, was bedeutet, dass wir jeden Service überall dort injizieren können , wo wir wollen, in unseren verschiedenen Komponenten, in unseren verschiedenen Richtlinien, Rohren, wo immer wir wollen wünschen. Und warum sollten wir das wollen? Nun, Dienstleistungen, weil das injizierbare Substanzen sind. Diese speichern meistens unsere Daten, wenn wir auf unseren Server tippen möchten, um bestimmte Daten zu erhalten, oder wir möchten nur einige der Daten in unserer Anwendung lokal speichern . Das werden wir meistens in unserem Service tun . Und da es sich bei dem Dienst um eine injizierbare Funktion handelt, kann er überall dort injiziert werden, wo wir ihn benötigen , und diese Daten von diesem spezifischen Dienst abrufen Um einen Dienst zu erstellen, verwenden wir erneut die CLI. Also hier werde ich N, G, G für Generate, S für Service verwenden . Und der Service ist überall dort injizierbar, wo wir ihn brauchen. Wir werden diesen Service erneut in unserem gemeinsamen Modul generieren. Dieses Mal werde ich diesen Dienst im freigegebenen Modul als im Ordner Dienste generieren . Und dann wird der Lehrplan Data Service genannt weil wir tatsächlich mit den Daten innerhalb dieses Dienstes arbeiten werden. Jetzt kann ich in meinem Visual Studio Code in meinen freigegebenen Ordner als in Dienste gehen und den Datendienst öffnen. Wenn wir den Service generieren, wird er mit zwei Dateien geliefert. Eine Datei ist die Klasse des Dienstes selbst, und die andere Datei ist eine Testdatei für diesen Dienst. Deshalb werden wir uns jetzt auf diese Daten konzentrieren , die Punkte anzeigen. Oben können wir sehen, dass der Lehrplan selbst injizierbar ist. Und hier können wir auch sehen, dass wir diesen injizierbaren Dekorator verwenden , um diesen Service zu beschreiben. Wo können wir diesen Service standardmäßig in Angular injizieren ? Der Dienst wird auf Root-Ebene gut injiziert, was bedeutet, dass wir ihn überall dort nutzen können, wo wir diesen Service nutzen möchten , wenn Sie diesen Service bereitstellen möchten. Nur ein bestimmtes Modul. Sie können dieses Modul hier angeben und tatsächlich Wichtiger Schuldendienst im Provider-Array dieses Moduls. Auf diese Weise können Sie bestimmte Dienste für ein bestimmtes Modul haben. Aber es gibt, das ist eine kleine Anwendung. Darüber müssen wir uns keine Sorgen machen. Wir können es einfach so belassen, wie es auf Root-Ebene bereitgestellt werden soll, damit wir unseren Service überall dort nutzen können , wo wir ihn benötigen, da der Dienst unsere Daten speichert. Lassen Sie uns hier mit einigen Dummy-Daten arbeiten und diese Daten auch für verschiedene Komponenten freigeben. Was ich also hier in der Klasse dieses Dienstes tun werde, werde ich ein öffentliches Eigentum schaffen. Wir müssen nicht wirklich ein öffentliches oder privates Eigentum deklarieren, aber es ist eine gute Übung, dies zu tun, da Angular eine TypeScript-Technologie ist, oder? Das TypeScript am Ende wird also in JavaScript kompiliert, indem bestimmte Schlüsselwörter wie public oder private oder bestimmte Typen verwendet werden. Das TypeScript wird das viel reibungsloser machen. Also hier werde ich das öffentliche Eigentum von username erstellen. Und das hier wird die Art der Zeichenkette sein. Standardmäßig kann dieser Benutzername beispielsweise John Doe sein. Jetzt haben wir diese Benutzernamendaten in unserem Service und können sie von hier aus teilen, wo immer wir wollen. Was wäre also gut für uns, es hier zu teilen? Nun, nach meinem Konstruktor hier könnte ich tatsächlich öffentliches Eigentum erstellen, das den Benutzernamen erhalten wird. Dies hier ist eine Methode und es wird eine Zeichenfolge zurückgegeben. Warum gibt es einen String zurück? Nun, wir können hier return und dann diesen Benutzernamen verwenden. Dies bedeutet, dass überall, wo wir diese Methode verwenden, sie sich über den Benutzernamen einig ist und nur den Wert dieses Benutzernamens zurückgibt. Also lasst uns versuchen, diesen Benutzernamen hier auf unserer Homepage zu verwenden . Öffnen Sie also die TypeScript-Datei dieses Ziels. Im Moment weiß das Heim nichts über diesen Datendienst. Im Konstruktor des Lochs können wir also das Privateigentum erstellen, das ein Datendienst sein kann. Und wir können den Typ auf Data Service festlegen. Stellen Sie nur sicher, dass Sie den Datendienst oben hier importieren. Jetzt weiß die Home-Komponente über diesen Datendienst Bescheid. Was ist der Unterschied zwischen privaten und öffentlichen Immobilien? Nun, öffentliche Eigenschaften können Sie außerhalb dieser Datei verwenden, aber private Eigenschaften können nicht außerhalb der Datei verwendet werden. Diese können nur in der spezifischen Klasse verwendet werden , in der sie deklariert sind. Also jetzt, in dieser Mg on Init-Methode, werden wir uns unseren Benutzernamen schnappen. Dafür schaffen wir hier zunächst öffentliches Eigentum. Wieder der Benutzername , der ein String sein wird. Und standardmäßig ist es eine leere Zeichenfolge. Jetzt in dieser Engine werde ich diesen Benutzernamen verwenden und ihn gleich diesem setzen, dass der Datendienst den Benutzernamen nicht erhält. Und auf diese Weise gibt dieser Get-Benutzername die Zeichenfolge des Benutzernamens an uns zurück. Und diese Zeichenfolge wird in unserer Eigenschaft username innerhalb dieser Komponenten gespeichert . Aber warum haben wir das in dieser NGO verwendet? Ngo Minute ist ein Lifecycle-Hook in Angular. Dieser Lifecycle-Hook wird immer dann ausgeführt, wenn diese bestimmte Komponente geladen und gut initialisiert ist. Das heißt, wenn wir unsere Homepage besuchen, wird dieser Code ausgeführt. Es gibt auch andere Lebenszyklus-Hooks , die wir N G für Änderungen im Juni, Zerstören usw. verwenden können . Aber wir werden uns nicht um die hier kümmern , nur weil sie viel komplexer zu erklären sind. Und das ist immer noch ein Crashkurs. Wie können wir also wissen, dass dieser Benutzername tatsächlich Daten enthält? Nun, lass uns hier in unseren HTML-Code gehen. Und anstelle dieses Absatzes werde ich hier das H1-Tag verwenden. Hier werde ich dazu die Eigenschaftsbindung in Angular verwenden, geschweifte Klammern, doppelt geschweifte Klammern und im Inneren könnten wir unser Eigentum weitergeben. Dafür können wir zum Beispiel unseren Benutzernamen übergeben . Also dieser Benutzername, sobald er die Daten hat, wird er hier in H1 dargestellt. Also können wir das präsentieren. Nun dynamischer Text. jetzt meine Bewerbung überprüfen, können wir John Doe hier sehen. Wenn ich auf die About-Seite über Werke gehen würde, komm zurück nach Hause. Wir können diesen John Doe immer noch sehen, der wirklich gut ist. Das bedeutet, dass wir unsere Daten in einem Dienst speichern. Dann verschieben wir diese Daten in eine bestimmte Komponente und haben sie auf einem Bildschirm angezeigt. Aber Sie können jetzt sagen, nun, das war nur der Benutzername, das sind keine tatsächlichen Daten. Das waren nur Dummy-Daten, die wir erstellt haben. Nun, im nächsten Video werden wir tatsächlich mit dem http arbeiten, wo wir weiterhin Anrufe von HTTP senden werden , um einige Daten von einem Server abzurufen und tatsächlich einige echte Daten auf dem Bildschirm. 8. HTTP: HTTP oder Hypertext Transfer Protocol ist also ein Protokoll auf Anwendungsebene. Es ist für die Kommunikation zwischen einer Webanwendung und Webservern konzipiert . Dies geschieht durch mehrere Methoden, die wir anwenden können. Wie get-Methode, um bestimmte Daten abzurufen , oder Post-Methode, um bestimmte Daten zu speichern. Darüber hinaus kann es verwendet werden, um Header an den Webserver selbst zu übergeben. So könnten wir zum Beispiel unseren Benutzer mit dem richtigen Token authentifizieren. Außerdem könnten wir bestimmte Parameter über diesen HTTP-Aufruf senden . Auf diese Weise könnte unser Server unsere Datenbank basierend auf diesen Parametern nutzen und spezifische Daten basierend auf diesen Parametern abrufen . So etwas wird hauptsächlich zum Filtern von Daten oder zum Sortieren von Daten verwendet . Und HTTP erledigt all das mit einer einfachen Anfrage und Antwortnachrichten. Nun, http ist nichts Spezifisches für Angular. Es kann in jeder Art von Technologie verwendet werden , die in der Lage ist, den Server zu kontaktieren. Also könnten wir es in anderen JavaScript-Frameworks wie React oder View verwenden , wir könnten es auch in Roh-JavaScript verwenden. Daneben könnten wir es auf einem Silber mit NodeJS, Python, C-Sharp usw. verwenden , aber Angular hat ein eigenes Modul für das HTTP. Viele andere Technologien unterstützen kein eigenes Modul für HTTP, aber die Angular schon. Mit diesem Modul. Wir sind in der Lage, HTTP und all seine Funktionen gut zu nutzen, viel einfachere Art und Weise , die Sie bald sehen werden. Aber das erste, was hier ist, ist, dass wir dieses HTTP-Modul in unsere Anwendung importieren müssen . Unsere Anwendung könnte es also tatsächlich nutzen. Um das zu tun. Ich öffne meine App-Datenmodul-Punkt-TXT-Datei. Im Eingabe-Array dieser Datei füge ich das HTTP-Client-Modul hinzu. Jetzt wird dies nicht automatisch importiert. Also oben hier werde ich dieses HTTP-Client-Modul aus Angular Slash, allgemeiner Schrägstrich HTTP, importieren . Und das war's. Damit weiß unsere Anwendung über dieses HTTP-Client-Modul Bescheid, das wir verwenden können, und wir werden es verwenden. Wir werden dieses HTTP-Modul verwenden, um einige spezifische Daten abzurufen , und wir werden die Daten aus unserer JSON-Platzhalter-API abrufen . Diese API kostet auch viele verschiedene Dummy-Daten. Wir könnten es also verwenden, um unsere Anwendung zu testen, was ein wirklich gutes Beispiel für diesen Kurs ist , mit dem wir hier arbeiten. Wenn ich auf dieser JSON-Platzhalter-Website nach unten scrolle, sehen wir hier verschiedene Ressourcen, die wir verwenden können, wie Beiträge, Kommentare, Alben Fotos für diese Benutzer. Wenn ich weiter nach unten scrollen würde, können wir verschiedene HTTP-Methoden sehen, mit denen wir git verwenden können , um den Datenpost zum Speichern von Daten zu erhalten, PUT oder Patch, um Daten zu aktualisieren, löschen und Daten zu löschen. Nun finden Sie in den Ressourcen dieses Kurses einen Link zu dieser Website , sodass Sie sie jederzeit besuchen und versuchen können, mit bestimmten Daten von dieser Website zu arbeiten. Die Daten, mit denen wir arbeiten werden, sind diese Aufgaben. Obwohl wir die Aufgabenanwendung erstellen, werden wir sicherstellen, dass diese beiden tatsächlich unsere eigenen Aufgaben sind. Gehen wir also zurück zum Code. Gehen wir in unsere Shared Services und öffnen diese Daten, die Service-Punkte in der Leiste enthalten. Jetzt, wo wir mit dieser Methode get username arbeiten, könnte ich diese GetUser-Hauptmethode entfernen und auch diesen Benutzernamen von hier entfernen, da wir ihn nicht mehr benötigen. Außerdem muss ich in mein Zuhause als Home-Komponente gehen. Entfernen Sie den Benutzernamen von hier und entfernen Sie den Aufruf dieser Methode get username, die sich auf die Eingabe dieses Datendienstes bezieht . Ich werde es immer noch hier behalten , weil wir es brauchen werden. Um hier zu meinem Service zurückzukehren, sollte ich in der Lage sein, die Daten aus dieser JSON-Platzhalter-API abzurufen . Um so etwas zu tun, müssen wir diesem Dienst mitteilen, dass wir dieses HTTP-Client-Modul verwenden werden . Und HTTP hat einen eigenen Provider, den wir verwenden können, auch injizierbar ist, was bedeutet, dass wir ihn hier in diesen Dienst injizieren könnten. Also werde ich private Eigenschaft von HTTP erstellen und den Typ davon als HTTP-Client festlegen. Dieser HTTP-Client muss wichtig sein von einem eckigen Schrägstrich, einem allgemeinen Schrägstrich HTTP. nur sicher, dass Sie zuvor dieses HTTP-Client-Modul tatsächlich in Ihrer eigenen App, dieser Moduldatei , wichtig haben. Auf diese Weise können Sie diesen HTTP-Client verwenden. Lassen Sie uns nun die Methode entwickeln, mit der wir diese Aufgaben für uns übernehmen werden. Also hier werde ich die öffentliche Methode erstellen , weil wir diese Methode außerhalb dieser Datei verwenden werden. Und ich werde es benennen, Aufgaben besorgen. Obwohl wir die beiden Türen von diesem angrenzenden Ort ziehen , der API genannt wird. Ich werde diese immer noch in Aufgaben umbenannt , da wir hier eine Aufgabenanwendung erstellen. Diese Methode „Aufgaben“ gibt uns etwas zurück. Es wird das Beobachtbare zurückgeben. Und das Observable sollte hier einen bestimmten Typ haben , auf den ich zurückkommen werde. Zuallererst, was ist beobachtbar? Sie können sehen, dass Observable etwas ist , das zu dieser zusätzlichen Ja, Bibliothek gehört , die ich zu Beginn dieser Klasse erwähnt habe. Nun, die Alex JS-Bibliothek ist riesig. Es gibt viele Methoden und viele Funktionen. Ich werde also nicht näher darauf eingehen, weil es den ganzen Kurs dauern kann, nur um es zu erklären. Kurz gesagt, beobachtbar ist etwas, das unsere Daten für uns umhüllen wird. Es wird unsere Aufgaben umschließen. Da es unsere Aufgaben abschließt, werden wir in der Lage sein, diese Aufgaben gut zu nutzen und verschiedene Methoden für diese Aufgaben anzuwenden. Wenn Sie also Ihre Daten transformieren müssen, ist das Observable eine gute Option für Sie da Sie diesen Aufgaben tatsächlich zuordnen, diese nach Ihren Wünschen transformieren und nur die Daten zurückgeben können , die Sie benötigen. für uns hier. Dies muss hier beobachtbar zurückgeben, da der HTTP-Client aus England immer das Observable zurückgibt. Auf diese Weise ist es viel einfacher, mit Daten zu arbeiten, indem Sie dieses Observable verwenden, was Sie sehen werden, aber jetzt mit diesem generischen Typ verwandt ist, der an dieses Observable übergeben werden muss. Nun, wir müssen den tatsächlichen Datentyp übergeben , den wir hier verwenden werden. Und im Moment wissen wir nicht, welche Art von Daten wir von diesem JSON-Platzhalter zurückerhalten werden. Also werde ich den Typ hier auf einen beliebigen Typ setzen. Und später, wenn wir tatsächliche Daten haben, werden wir diese Daten erhalten und überprüfen, welche, naja, welche tatsächlichen Daten wir haben. Und wir werden ein spezifisches Modell für diese Daten erstellen, aber dazu später mehr. Innerhalb dieser Methode könnten wir nun unseren Code schreiben, um die Aufgabe zu erhalten. Also hier habe ich die Rückgabe benutzt und ich werde dieses, dieses HTTP, zurückgeben. Also nenne ich dieses HTTP-Modell. Und nur die Zeit wird verschiedene Methoden haben, die ich anwenden kann. Eine dieser Methoden ist GetMethod. Innerhalb dieser get-Methode sollten wir die Zeichenfolge an die API übergeben. Nun, die Zeichenfolge des tatsächlichen Codes , der die Daten für uns erhält. zur JSON-Platzhalter-Website zurückging auf diese beiden Türen klickte, konnte ich hier sehen, dass es 200 To-Dos für mich bringen wird. Genau hier in der URL kann ich die tatsächliche URL sehen , die das für uns erledigt. Also lass es uns einfach zurück in den Code kopieren. Ich könnte diese beiden Türen einfach hier einkleben. Und da es zu viel zu tun bringen wird, sind es 200 davon. Ich möchte nicht wirklich mit einer solchen Datenmenge arbeiten. Also konnte ich hören, setze den Parameter , der Unterstrichgrenze ist, und ich werde ihn auf fünf setzen. Auf diese Weise werde ich nur die fünf Aufgaben aus dieser JSON-Platzhalter-API abrufen . Diese Unterstreichungsgrenze ist nicht immer dieselbe. Jede API hat ihren eigenen Parameter. Wenn Sie also Ihre eigene API erstellen, haben Sie Ihre eigenen Parameter. Es kommt einfach vor, dass die JSON-Platzhalter-API dieses Unterstrichlimit verwendet. Und damit sind wir mit unserem Datenservice so gut wie fertig. Gehen wir nun zu unseren Home-Komponenten in der, diese Daten in dieser Komponente, in meiner Home-Komponente hier, in meiner Energie an, darin zu bekommen in meiner Home-Komponente hier, . Ich werde diesen dunklen Datenservice wieder nutzen. In dieser Zeit werde ich eine Methode namens get tasks verwenden. Nun, diese Methode sollte unsere Aufgaben an uns zurückgeben , aber da sie beobachtbar ist, können wir spezifische Methoden darauf anwenden. Wie es beobachtbar ist, wird es diesen Datenwrapper zurückgeben. Hier könnten wir dieses Abonnement tatsächlich verwenden, um unser Observable zu abonnieren. unser Observable abonnieren, erhalten wir tatsächlich eine direkte Antwort von ihm. Also hier werde ich die Antwort verwenden , wobei ich den spezifischen Typ dieser Antwort festlegen sollte. Der Typ werden die tatsächlichen Daten sein, die wir zurückerhalten. Derzeit haben wir nicht den spezifischen Typ, spezifische Modell für diese Daten. Also werde ich hier jeden benutzen, aber ich werde später darauf zurückkommen. Sobald ich meine Antwort auf meine Daten zurückhöre, könnte ich tatsächlich die Pfeilmethode hier verwenden und einfach console.log meine Antwort. Also werde ich das Konsolenprotokoll der Daten und dann die Antwort verwenden. So konnten wir tatsächlich sehen , was wir zurückbekommen. Das Gute an diesen Abonnements ist, dass es nicht nur die Antwort behandelt, sondern auch den Fehler behandeln kann. Also hier könnte ich den Fehler tatsächlich weitergeben. Und Console Dot protokolliert diese Daten. Wenn also ein Fehler auftritt, wissen wir, was dieser Fehler ist. Und wir könnten tatsächlich damit umgehen, indem wir zum Beispiel eine Art Warnung auf einem Bildschirm anzeigen. Das Letzte, bevor wir unsere Daten überprüfen, werde ich die Home Dot Component Dot HTML Datei Views hier diesen Benutzernamen öffnen . Und da wir den Benutzernamen entfernen, wissen wir nicht viel darüber. Also werde ich diesen Text einfach wieder in Hello World verschieben . Wir könnten diese Komponenten also tatsächlich gut funktionsfähig machen. Nun, in meiner Bewerbung, wenn ich das tun würde. Überprüfen Sie die Konsole der Anwendung. Ich könnte tatsächlich, ich werde dieses Datenprotokoll sehen, das das Array von fünf Elementen darin darstellt. Und all diese Elemente sind tatsächlich die Aufgaben dieser JSON-Platzhalter-API, was bedeutet, dass die Tower-Anforderung für die Daten erfolgreich war und wir tatsächlich die Antwort von diesem HTTP erhalten. Nun, das Letzte, bevor ich dieses Video schließe, es ist schon lang genug. Ich gehe zurück in den freigegebenen Ordner und erstelle einen anderen Ordner namens Models. Im Inneren werde ich jetzt das Modell meiner Daten erstellen. Also hier werde ich eine Datei namens Task Data Model Ts erstellen. In dieser Datei könnte ich also die Schnittstelle einer Aufgabe exportieren. Und innerhalb dieser Aufgabe sollte ich deklarieren, welche Art von Eigenschaften Daten von Aufgaben haben sollten. Und in meiner Bewerbung habe ich diese Eigenschaften genau hier. Ich habe einen vollständigen Wert von Boolean. Ich habe auch die ID der Nummer, Titel der Zeichenfolge und die Benutzer-ID der Nummer. In meiner Aufgabe werde ich also den vollständigen Wert von Boolean erstellen. Dann habe ich eine Identifikationsnummer. Dann werde ich den Titel der Zeichenfolge haben. Und schließlich die Benutzer-ID, die Nummer sein wird. Jetzt, wo wir unser Aufgabenmodell haben, können wir dieses Modell tatsächlich anstelle von Schulden verwenden. Nun, jeder Typ, den wir benutzen. Also zuerst, zurück in meinen Dienst, verwende ich das Observable, das alle Daten zurückgibt. Also hier sollte es die Aufgabendaten zurückgeben. nur sicher, dass Sie die Aufgabe hier aus einer richtigen Aufgabendatenmodelldatei importieren . Hier drin. Es wird nicht nur eine Aufgabe zurückgeben, sondern das Array von Aufgaben. Also hier werde ich einstellen, dass es die Aufgabe Caret zurückgeben wird. Und da ich deklariere, dass der generische Typ hier, diese GetMethod, auch wissen sollte, welche Art von Daten es für uns zurückbekommen wird. Also werde ich hier wieder generischen Typ übergeben und dieses Aufgabenarray wieder mit Schulden verwenden. Wir sollten den Fehler auch hier beheben. Gehen wir nun von hier aus zu unserer Home-Dot-Komponente , dass P eine Datei ist. Hier drin. Wir haben unsere Antwort, die wir zurückgeben werden . Genau diese Art von Antwort. Also hier werde ich wieder eine Aufgabe aus einem bestimmten Aufgabenmodell setzen , das wir erstellt haben. Und es wird Task-Array sein. Damit sind wir mit dieser Vorlesung ziemlich fertig. Sie haben gesehen, wie Sie das HTTP-Modul verwenden können? Wie können Sie die Daten von Ihrer API erhalten? Übergeben Sie diese Daten von einem Service an Ihre Komponente, erstellen Sie das Modell für die Daten und bereiten Sie die Daten für die Verwendung in Ihrer Anwendung vor. darüber sprechen, in der nächsten Vorlesung werden wir in der nächsten Vorlesung genau das tun. 9. Templating: Zusammenhang mit dieser Vorlesung werden wir unsere Aufgaben lokal in unserer Home-Komponente speichern und diese Aufgaben gut verwenden , um sie auf einem Bildschirm zu präsentieren. Lassen Sie uns zunächst diese Aufgaben hier speichern , wo ich die Antwort der Daten erhalte. Ich könnte diese Antwort tatsächlich in einer Art Eigentum speichern . Also hier oben werde ich öffentliches Eigentum für Aufgaben schaffen. Und es wird die Art von Aufgabe Curry enthalten , weil es diese Daten erwartet. Und standardmäßig wird es ein leeres Array sein. Weil wir standardmäßig nicht wissen, ob wir Daten haben. Aber sobald wir die Daten haben, sobald wir diese Aufgaben hier drin haben, werde ich diese Eigenschaft für dunkle Aufgaben verwenden, die wir gerade erstellt haben. Und ich werde es gleich der Antwort setzen , die wir zurückerhalten. Dies sind die Aufgaben, die von der JSON-Platzhalter-API gut zu erledigen sind . Nachdem wir diese haben, gehen wir zu unserer Startseite, dieser Komponente , dieser HTML-Datei, und erstellen einige Inhalte und stylen diesen Inhalt. Also hier drin werde ich den Deal erstellen. In diesem Div kann eine Klasse von Aufgaben enthalten. Auf diese Weise wird es später einfacher zu stylen. Hier drin werde ich das h3-Tag für eine Überschrift setzen, die wir nur Aufgaben sehen werden. Und nach der Überschrift könnte ich tatsächlich die Aufgabenliste erstellen. Dazu erstelle ich die Fotoaufgabe, die die Aufgabenklasse enthält. Und was sollte diese Aufgabe eigentlich hier sein? Nun, wir könnten, naja, den Titel der Aufgabe umfassen und ich werde das in einer bestimmten Zeitspanne festlegen. Ich werde es auch mit dem fetten Text umschließen und wir könnten zum Beispiel Angular lernen. Dies ist zum Beispiel eine der Aufgaben. Nun, neben diesem Titel einer Aufgabe, könnte es gut sein, auch den abgeschlossenen Wert der Aufgabe zu verwenden. So konnten wir sehen, ob wir eine bestimmte Aufgabe erledigt haben. Also hier werde ich wieder diesen Stift benutzen und drinnen werde ich nur den fertigen Text verwenden. Hier können Sie eine Art Icon oder ein Bild verwenden, aber ich werde fertige Texte verwenden. diese Weise ist es einfacher. Nehmen wir nun diese ganze Aufgabe und kopieren sie. Sagen wir drei Typen, 12. Das sind also drei Aufgaben. Lassen Sie uns die Werte für diese Aufgaben ändern. Hier sage ich, wasche ein Auto. Und auch der letzte kann durch eine Mahlzeit sein. Das ist so ziemlich alles. In unserer Bewerbung sollten wir so etwas sehen. Lassen Sie mich ein bisschen heranzoomen. Wir haben also unseren Aufgabentitel. Jede Aufgabe hat ihren eigenen ähnlichen Titel und vervollständigt auch den Text dafür. Lass uns diese jetzt auch ein bisschen stylen. Um diese zu stylen, öffne ich die Dot Component Dot CSS-Datei. Im Inneren werde ich mich den Hauptaufgaben widmen, die wir haben. Ich werde die Breite des Divs auf 500 Pixel setzen. Ich werde den Rand auf 100 Pixel setzen, oben und unten von links und rechts. Also könnten wir es in Daniel auf die Mitte ausrichten und auch die Textausrichtung in die Mitte setzen. Jetzt jede Aufgabe, die helfen soll, werde ich mir diese Aufgabe stellen. Ich werde das als Fluss anzeigen und begründen, dass Inhalte im Inneren einen Abstand voneinander haben. Und als letztes werde ich alles per Text auf der linken Seite ausrichten. Auf diese Weise sollte mit diesem Leerzeichen zwischen unserem Titel einer Aufgabe auf der linken Seite sein, in diesem abgeschlossenen Wert sollte auf unserer rechten Seite liegen. Und schließlich werde ich mich dieser Aufgabe wieder stellen. Und die Span-Elemente darin, die ich habe, werde ich nur ein bisschen auf den Rand setzen, wie zehn Pixel, oben und unten, 0 Pixel links und rechts. Und das werden wir jetzt tun, das sind die Aufgaben. Dies ist die Liste dieser Aufgaben. Aber offensichtlich sind diese Aufgaben fest codiert. Wir verwenden nicht wirklich die Aufgaben, die wir von der API erhalten haben. Lassen Sie mich Ihnen zeigen, wie Sie mit dem Template in Angular umgehen können. Um so etwas zu machen, gehe ich zurück in den HTML-Code. Wir werden die Direktive MD4 verwenden. Md4 ist eine Schleife, die einige spezifische Daten durchläuft. In unserem Beispiel durchläuft es Aufgabendaten. Und für jede spezifische Aufgabe werden wir ein Code-Bundle wie diesen Task-Wrapper generieren , dieses Aufgaben-Div, das wir mit dem Inhalt darin haben. Da wir nur eine davon benötigen, werde ich diese beiden Aufgaben tatsächlich entfernen. Das war, das war nur die Dummy-Aufgabe, damit ich es zeigen konnte. Wie können wir aussehen? Aber jetzt nutzen wir diese Energie für die Richtlinie über ein Abkommen. Ich werde Stern und dann mg verwenden, um diese Schleife zu benutzen. Also hier werde ich meine Aufgaben durchgehen. Also werde ich für jede Aufgabe zum Beispiel die Variable der Lebensaufgabe erhalten , hier können Sie sie nach Ihren Wünschen benennen. Ich werde die Aufgabe für eine Namenskonvention einschränken. Also lasst uns Aufgaben oder Aufgaben erledigen. Jetzt gehen wir diese durch, durch alle Aufgaben. Und alles hier drin wird, wird es fünfmal erzeugen, weil wir fünf Aufgaben haben. Anstatt für all diese fünf, nur diesen Text zu zeigen, werde ich das lernen Angular entfernen. Und hier werde ich die Aufgabe selbst nutzen. Und bei einer Aufgabe habe ich Eigentum des Titels. Also sollte jede Aufgabe hier einen richtigen Titel haben. Und jetzt ist es da. Wir haben unsere entsprechenden Aufgaben aus dieser JSON-Platzhalter-API. Sie können sehen, dass alle Aufgaben ihren eigenen Titel und den abgeschlossenen Wert neben diesen haben ihren eigenen Titel , der noch nicht ordnungsgemäß verwendet wurde. Wir werden es im nächsten Video richtig verwenden , wenn wir mit einem bestimmten Styling dafür arbeiten . Aber bevor ich dieses Video fertig habe, habe ich vergessen, dass wir auch eine About-Seite haben. Also lasst uns etwas Inhalt zu dieser About-Seite hinzufügen. Für diese About-Seite werde ich ein Div erstellen, das die Klasse des Hauptinhalts enthält. Im Inneren erstelle ich den Absatz wirklich mit etwas Lorem Ipsum-Text. In diesem Absatz habe ich mir diesen Text schnappen lassen und tatsächlich ein paar Mal so kopiert. Jetzt werde ich von hier aus die CSS-Datei öffnen mir die Hauptinhaltsklasse schnappen, die wir haben. Ich werde die Breite auf 900 Pixel und den Rand auf 50 Pixel oben und unten von links und rechts einstellen Rand auf . Damit hier, mit unserer Homepage fast fertig. Wir werden auch die About-Seite fertig haben, naja, About-Seite. Für die About-Seite möchte ich nicht viel zeigen , da der gesamte Inhalt der Aufgabenanwendung auf einer Homepage angezeigt wird. Aber da wir diese About-Seite bereits haben, fügen wir einfach ein paar Dummy-Inhalte hinzu. Du kannst damit herumspielen. Sie können einige Bilder verwenden. Sie könnten zum Beispiel den Titel festlegen und sogar die Aufgaben von hier aus verwenden, auch eine About-Seite. Es liegt an dir. Aber für das nächste Video werden wir tatsächlich mit dem Styling arbeiten. Sie können also sehen, welche unterschiedlichen Stile wir in Angular verwenden können. Und wie können wir dynamisches Styling auch für jedes spezifische Element verwenden . 10. Styling: Was sind diese verschiedenen Stylings , die wir in Angular verwenden können? Zunächst einmal, als wir unsere Anwendung generiert haben, haben Sie bereits gesehen, dass Sie ein anderes Stylesheet-Format wie CSS, Sass, Less usw. auswählen ein anderes Stylesheet-Format wie CSS, können. Aber auch beim Stylen Ihrer App haben Sie unterschiedliche Methoden. Wenn ich zum Beispiel diesen Winkel, diese JSON-Datei, in dieser Datei öffnen würde , gibt es hier ein Styles-Array. Wir könnten hier tatsächlich externe Stile importieren wie aus Bibliotheken von Drittanbietern wie Bootstrap oder Rückenwind. Neben dem. In unserer Anwendung sollten wir auch diese Stile haben, diese CSS-Datei, dies ist eine globale Stildatei und Sie können hier bereits den Kommentar sehen , dass Sie die globalen Stile zu dieser Datei hinzufügen können und importieren Sie auch andere Styles-Dateien. Dies ist zum Beispiel sehr hilfreich, wenn Sie mit SAS arbeiten. So können Sie alle Ihre eigenen Dateien, die Sie haben, in eine Datei neben Schulden importieren . Wenn ich nach Hause gehen würde. Innerhalb der Home-Komponente finden wir eine CSS-Datei, sodass wir jede Komponente mit ihrem eigenen spezifischen Stil gestalten können . Und wenn ich in dieser Komponente etwas Spezifisches stylen würde , nun , dieser CSS-Code ist nur spezifisch für die Schuldenkomponente, sodass er nicht an andere Komponenten weitergegeben wird. Und offensichtlich gibt es Inline-Stile, die wir bereits in HTML verwenden können. Wir können diesen Inline-Stil aber auch für ein bestimmtes Styling für unsere spezifischen Elemente, die wir wünschen, weiter verwenden bestimmtes Styling für unsere spezifischen . Ich habe zum Beispiel diese Aufgaben auf meinem Bildschirm, und einige dieser Aufgaben sind tatsächlich abgeschlossen, aber das gebe ich hier überhaupt nicht an. Es ist gerade der Text hier fertiggestellt. Jetzt werde ich diese Inline-Stile verwenden, um nur die spezifischen Aufgaben zu stylen , die mit der Linie durch diese Texte erledigt werden . Um so etwas mit meinem fertigen Text hier zu tun, kann ich diese spitzen Klammern verwenden und hier Stil verwenden. Dadurch binde ich das style-Attribut von diesem span-Element. Hier verwende ich Punkt und dann Textdekoration, was bedeutet, dass ich auf das spezifische Attribut der Textdekoration abziele . Ich habe mich hier geirrt. Text-Dekoration. Ja. Und ich werde dafür sorgen , dass das hier gleich ist. Was ich tun werde, ich werde prüfen, ob meine Aufgabe erledigt ist. So könnte ich überprüfen, ob es wahr ist oder nur Aufgaben , die abgeschlossen wurden. Wir prüfen auch, ob der Wert wahr ist. Wenn das der Fall ist, verwende ich die Linie, um das Styling hier zu regeln. Du hast dich wieder falsch eingegeben. Und wenn das nicht der Fall ist, verwende ich hier einfach eine leere Zeichenkette, also hier überhaupt kein Styling. Jetzt kann ich auf meinem Bildschirm sehen, dass diese Aufgabe abgeschlossen ist. Er hat diesen vollendeten Wert. Die Aufgabe ist bereits abgeschlossen, was großartig ist. Wie könnten wir weiter machen, wir werden mit dieser Aufgabenanwendung arbeiten. Nun, es wäre gut, wenn wir eine unserer Aufgaben tatsächlich erledigen oder vervollständigen könnten . Dafür werde ich mich zu dieser Komponenten-Punkt-TXT-Datei nach Hause bewegen . Und hier werde ich eine Methode erstellen. Nach dieser Engine werde ich eine öffentliche Methode erstellen, da diese Methode außerhalb dieser Datei verwendet wird. Und die Methode sagt „Erledigte Aufgabe“. Die Methode gibt nichts zurück, daher wird es hier eine void-Methode sein. Bei dieser abgeschlossenen Aufgabe wird erwartet, dass die Aufgabe an sie übergeben wird. Und die Aufgabe sollte ihren eigenen Typ haben, nämlich das Aufgabenmodell, das wir bereits erstellt haben. Und was ich tun werde, ich werde mir diese Aufgabe und einen abgeschlossenen Wert darauf schnappen . Und ich setze es gleich , naja, nur umgekehrt. Task Dot wurde also erneut mit diesem Ausrufezeichen am Anfang abgeschlossen . Das heißt, wenn der abgeschlossene Wert falsch ist, ist er wahr. Wenn es wahr ist, wird es falsch sein. Auf diese Weise konnten wir eine unerledigte Aufgabe auf einmal erledigen. Wie könnten wir diese komplette Aufgabe jetzt nutzen? Nun, auf meinem Zuhause, dieser Komponente, dieser HTML-Datei, werde ich sie genau hier verwenden , wenn ich auf diesen fertigen Text klicke. Lassen Sie mich das zunächst ein wenig reduzieren, damit Sie alles klar sehen können. Wir haben also hier und hier unser Styling, ich werde jetzt Clickevent verwenden. Um Click-Event zu verwenden, verwenden wir hier nur Klammern und wir haben Optionen für verschiedene Ereignisse. Ich werde das Klickereignis verwenden, und sobald auf diesen Text geklickt wurde, werde ich die vollständige Aufgabenmethode verwenden , bei der derzeit ein Fehler vorliegt da diese abgeschlossene Aufgabe tatsächlich eine bestimmte Aufgabe erwartet. Also hier werde ich einfach die spezifische Aufgabe aus unserer Regel übergeben, aus unserer Aufgabe, unserem NG für Schleife. Nun zurück zu meiner Bewerbung hier. Wenn ich zum Beispiel auf diesen fertigen Text klicken würde, können wir sehen, dass er irgendwie vollständig , dass wir seinen Wert von falsch nach wahr verschieben. Und wenn der Wert wahr ist, müssen wir diese Textdekoration ausrichten. Also erledigen wir hier unsere Aufgaben. Außerdem könnte ich erneut klicken , um diese Aufgaben ebenfalls abzuschließen. Damit haben Sie gesehen, wie einfach es mit nur einer Funktion im Inline-Styling ist , für jede unserer Aufgaben in unserem Array einen bestimmten Stil zu haben . Und damit sind wir fertig. Das ist es, das ist unsere Bewerbung, aber wir sind immer noch da. Eine Sache, die zu tun ist , ist die Bereitstellung. 11. Bereitstellung: Bei der Bereitstellung der Angular-Anwendung hören wir also mehrere Optionen, um dies zu tun. Außerdem sollten wir uns vor dem Einsatz um einige Schritte kümmern. Zum Beispiel sollten wir unsere Anwendung erstellen. Wie Sie wissen, handelt es sich bei unserer aktuellen Anwendung, von der wir hören, dass alle Komponenten tatsächlich TypeScript-Dateien sind. Typescript ist etwas, das einem Browser nicht lesbar ist. Der Browser liest JavaScript. Durch das Erstellen der Angular-Anwendung kompilieren wir also auch den TypeScript-Code in unseren JavaScript-Code. Und deshalb ist Angular ein JavaScript-Framework, obwohl es Typen verwendet. Wo können wir diese einzigartige Anwendung bereitstellen? Nun, es gibt mehrere Möglichkeiten. Wir könnten es einfach bereitstellen, zum Beispiel auf Netlify, oder wir könnten benutzerdefiniertes Silber erstellen und alles zusammen in Heroku bereitstellen. Aber ich werde hier wahrscheinlich den einfacheren Ansatz wählen, nämlich die Bereitstellung in Firebase. Dieser Ansatz ist auch professioneller, da die Firebase sehr häufig mit Angular verwendet wird. Warum Firebase? Firebase und Angular werden, beide sind tatsächlich Google-Produkte. Von tot. Diese sind sehr gut miteinander verbunden. Es ist also wirklich einfach, die englische Anwendung tatsächlich in Firebase bereitzustellen. Firebase ist ein Google-Produkt, das uns viele verschiedene Funktionen bietet. Es kann uns wie eine Echtzeit-Datenbank oder ein Fire Store, eine eigene Datenbank anbieten . Es kann uns ein Hosting anbieten , das wir in diesem Video verwenden werden. Nun, um unsere Anwendung auf Firebase Hosting zu veröffentlichen. Es gibt eine Reihe verschiedener Funktionen und Produkte, die Firebase-Benutzer verwenden. Und Sie werden diese Wellstone sehen , wenn ich tatsächlich die Firebase betrete. Bevor wir hier etwas tun, stellen Sie sicher, dass Sie ein Firebase-Konto haben. Schnappen Sie sich also Ihre E-Mail-Adresse und melden Sie sich bei Firebase an. Es ist kostenlos, also kannst du es tun. Sobald Sie Ihr Konto eingerichtet haben, können Sie diesem Video folgen und Ihre Aufgabenanwendung tatsächlich bereitstellen. Wenn Sie also ein eigenes Firebase-Konto haben, sollten Sie zu diesem Konsolenarbeitsbereich von Firebase weitergeleitet werden . Also hier drin können wir tatsächlich ein Projekt erstellen. Nun, ein Firebase-Projekt. Sie können bereits sehen, dass ich einige Dummy-Projekte aus früheren Tutorials habe, aber konzentrieren wir uns auf dieses. Um das Projekt zu erstellen, klicken Sie auf Projekt hinzufügen. Natürlich sollten wir hier den Namen des Produkts schreiben , damit es die Aufgabe verliert. Der Name lautet Aufgabe hoch, aber diesem Projekt wird tatsächlich eine bestimmte ID zugewiesen. Es wird also einzigartig für Sie sein, Ihr Profil. Von hier aus kann ich auf Weiter klicken, und dann werden wir nach Google Analytics gefragt . So wird Google Analytics verwendet , damit Firebase das automatisch für uns einrichten kann. Ich werde dieses Jahr deaktivieren , da wir Google Analytics eigentlich nicht verwenden und unsere Task-Obergrenze eine sehr einfache Anwendung ist. Wir können also einfach loslegen und das Projekt hier erstellen. Sie können ein bisschen warten und das Projekt wird bald erstellt. Danach sollten Sie in das Dashboard Ihres Projekts weitergeleitet werden . Nun, whoops, mein Fehler. Du warst nicht bereit, Regie zu führen. Sie sollten also auf diese Schaltfläche Weiter klicken , um wiederbelebt zu werden. Und hier ist es. Das ist eigentlich ein Projekt. Das ist dein Projekt. Lassen Sie uns die Wand stellen und sehen, was wir in diesem Firebase-Projekt haben. Dies ist für dieses Tutorial nicht wichtig, aber es ist wirklich gut zu wissen, da Firebase ein wirklich hochwertiges Produkt ist und sehr oft verwendet wird. Hier können wir zunächst mit Firebase beginnen, indem wir eine unserer Anwendungen wie iOS, Android, VAB bereitstellen . Selbst Unity- und flachere Anwendungen werden von Firebase unterstützt. Auf der linken Seite haben wir auch verschiedene Optionen. Wenn ich diesen Build umschalte, gibt es alles , was unsere Anwendung benötigt. Im Grunde haben wir eine spezifische Authentifizierung, wir haben eine Datenbank, wir haben eine Echtzeitdatenbank. Es gibt Erweiterungen, Speicher, Hosting und viele andere Dinge, sogar maschinelles Lernen. Nun, hier geht es nur um das Projekt, aber wenn ich zur Veröffentlichung und Überwachung gehen würde, ist dies der Teil mit der Analyse, es wird die Leistung der Anwendung überprüft, damit Sie sehen können, ob jeder stürzt neben Schulden ab. Die Analytik selbst, das Google Analytics, wird hier vollständig konvertiert. Sie haben also Ihr eigenes Dashboard und können zusammen mit der Echtzeit, Ihren spezifischen Ereignissen und Ihren Conversions verfolgen. Sie können im Grunde alles im Firebase-Dashboard verfolgen. Und schließlich gibt es einen engagierten Bereich , der hauptsächlich für Marketingzwecke genutzt wird. Button Annex Level, ich würde sagen, es gibt AB-Tests, die Sie einrichten können, um Ihre Anwendung zu erreichen. Das heißt, fügen Sie mehr davon hinzu, die Sie verbinden können , und lassen Sie Ihre Anzeigen direkt in Ihrer Anwendung präsentieren. Und damit hat noch viel mehr zu tun. Hier sehen Sie alle Produkte, die Firebase tatsächlich unterstützt, und das sind ziemlich viele Produkte. Sie müssen wissen, dass jedes dieser im Grunde ein separates Produkt ist, das diesem globalen Firebase-Produkt unterstützt wird, was erstaunlich ist. Also gehe ich zurück zu meiner Projektübersicht. Und wir können von hier aus beginnen. Und das hat mir noch einmal gefallen, bevor wir etwas mit der Firebase machen und wir unser Projekt mit der Firebase verbinden. Wir sollten unsere Anwendung erstellen. Wir sollten das TypeScript in JavaScript kompilieren. Um das zu tun, können Sie einfach NG build verwenden. In früheren Versionen von Angular müssen Sie auch dash, dash prod verwenden. Dies ist eine Flagge, die anzeigt, dass Sie für die Produktion bauen müssen. In dieser Version wird dies jedoch standardmäßig der Fall sein. Verwenden Sie also einfach den Befehl n g build, um Ihr Projekt tatsächlich zu erstellen. Wenn der Build innerhalb Ihres Projekts erfolgreich funktioniert hat, sollten Sie einen neuen Ordner namens beast für die Verteilung haben . Und drinnen sollte unsere Aufgabenanwendung sein , aber dieses Mal im JavaScript-Code ist der Code ziemlich gebündelt, minimiert, also ist er schwer zu lesen, aber das ist so ziemlich alles. Jetzt haben wir unsere Vertriebsanwendung, nun ja, unsere Anwendung bereit für die Produktion. Nun zurück zu unserer Projektübersicht. Hier werde ich in diesen Build-Bereich gehen und Hosting auswählen. Jetzt sollten wir es innerhalb des Hostings aktivieren oder damit beginnen. Also werde ich darauf klicken und es gibt im Grunde die Schritte , die Sie ausführen müssen. Zunächst müssen wir sicherstellen, dass Firebase-Tools gleiche Weise wie für Angular CLI global installiert sind, da Firebase tatsächlich über ein eigenes CLI-Tool verfügt , das helfen Sie uns bei Firebase-Anwendungen. Nun, Firebase-Produkte, ich habe diese Firebase-Tools bereits installiert, aber ich werde weiterhin damit fortfahren. So können Sie den Prozess selbst sehen. Jetzt im Terminal werde ich das tatsächlich entfernen, diesen Teil des Terminals löschen, und dann werde ich diesen npm install dash g für global und Firebase einfügen , um Enter zu drücken und zu warten damit es installiert wird. Jetzt, sobald es installiert wurde, werde ich mein Terminal wieder leeren. , können wir als Nächstes Da wir Firebase-Tools installiert haben die Firebase-Anmeldemethode verwenden, um Ihr eigenes CLI-Tool V tatsächlich bei der Firebase im Internet anzumelden . Führen Sie diese Methode also unbedingt aus. Ich habe mich auch bei Firebase Login vertippt. Und stellen Sie sicher, dass Sie diese Methode ausführen, Sie werden zur Webversion des Logins weitergeleitet. Sie melden sich mit Ihrem richtigen Konto an und können hierher zurückkehren und mit diesem CLI-Tool weiterarbeiten . Für mich bin ich bereits mit meinem Benutzer angemeldet, also muss ich das nicht wirklich tun. Aber was wir tun müssen, ist, dass Sie das Firebase-Projekt in unserer Anwendung initialisieren. Um das zu tun, muss ich eine Firebase darin ausführen, um es zu initialisieren. Firebase wird also nur um Bestätigung bitten oder wir sind bereit fortzufahren und ich werde ja sagen, hier. Jetzt hier rein, vielleicht ist das ziemlich weit herangezoomt. Lass mich etwas herauszoomen, damit du es sehen kannst. Aber hier haben wir verschiedene Firebase-Produkte, die wir wie eine Echtzeitdatenbank über das Hosting von Wiederherstellungsfunktionen verwenden können . Dieser Teil ist was wir brauchen. Außerdem gibt es zwei Arten von Hosting. Eine besteht darin, direkt von GitHub aus zu hosten. Die erste besteht darin, die Dateien zu konfigurieren , für die wir das Hosting veröffentlichen möchten. Und optional könnten wir den GitHub einrichten. Und ich werde mit dem Tod gehen. Also hier drücke ich die Leertaste, um es auszuwählen , und dann Enter, um es zu bestätigen. Jetzt haben wir wieder hier die Möglichkeit, unser eigenes spezifisches Projekt zu verwenden. So können wir das vorhandene Projekt verwenden ein neues Projekt mit Firebase-Tools erstellen, The Fighter basierend auf dem vorhandenen Google Cloud Platform-Projekt. Aber ich werde mich nicht darum kümmern. Wir werden auf jeden Fall das bestehende Projekt verwenden , da wir bereits eine Aufgabenanwendung erstellt haben. Und jetzt sollten wir hier die Liste unserer Projekte sehen. Und ich werde mit dieser Aufgabe weitermachen. Jetzt werden wir gefragt, was möchten Sie als Ihr öffentliches Verzeichnis verwenden? Was sie im Grunde sagen, ist, welchen Teil Ihres Rollenverzeichnisses wir für das Hosting bereitstellen sollten. Und für Schulden wird das unser tiefster Teil sein. Nun, dist Ordner und Task-App drin, da dies die tatsächlich praktikable Anwendung im Web ist. Um das zu tun, werde ich hier diese Aufgabe verlieren und dann die Aufgabe reduzieren. In Idaho. Wenn du das richtig siehst, zoome ich noch ein bisschen weiter heraus. Also diese Slash-Aufgabe. Jetzt können wir diese Anwendung als einseitige Anwendung konfigurieren . Nun, Angular ist ein Framework für Single-Page-Anwendungen. Also werde ich ja sagen, auch hier. Nun, wollen wir den automatischen Build und die Bereitstellung mit gut einrichten , Bereitstellungen mit Geschenk up. Und das ist der optionale Teil. Also werde ich hier weitermachen , weil wir überhaupt kein GitHub-Repository für dieses Projekt haben. Das ist eine Art Warnung oder eine solche Fehlermeldung. Die Datei index.HTML existiert bereits in unserer Aufgabenapplikation. Und das ist so ziemlich die Wahrheit in unserer Festplatte. Dann Slash Task Cap, wir haben unsere Datei index.HTML, die im Grunde unser HTML-Inhalt ist. Aber hier werden wir darum gebeten. wollen wir überschreiben. Nun, nein, wir möchten unseren HTML-Inhalt immer noch von unserer Anwendung fernhalten . Damit haben wir das Firebase-Projekt erfolgreich initialisiert. Nun, im Grunde haben wir unsere Angular-Anwendung mit dem Firebase-Projekt verbunden . Es gibt also nur noch eine Sache zu tun, um es tatsächlich für das Hosting bereitzustellen. Ich werde das hier klären. Jetzt zoome ich ein bisschen. Um es bereitzustellen. Wir können einfach Firebase Deploy verwenden. Woher weiß Firebase eigentlich , was es bereitstellen muss? Während wir hier drin sind, als wir das Projekt mit Firebase initialisieren, haben wir tatsächlich zwei neue Dateien bekommen. Die erste Datei ist eigentlich das Projekt, das mit dieser Anwendung verbunden ist ist unsere Aufgabenobergrenze. Und der Firebase Dot JSON ist die Konfiguration des Projekts. Was zum Beispiel bereitgestellt werden sollte , ist diese Slash-Task-App. Das haben wir eingerichtet. Es gibt Überarbeitungen , die wir vornehmen können. Es gibt Header, die wir hier setzen können und so weiter und so weiter. Aber das ist ein grundlegendes Setup, das es Firebase mitteilt, okay, das ist es, was ich für das Ganze bereitstellen möchte. Also können wir hier einfach weitermachen, Firebase bereitstellen, Enter drücken und einfach warten, bis es bereitgestellt wird. Sobald alles bereitgestellt ist, könnten wir wir diese Dummy-URL direkt an unsere Anwendungen senden, damit wir sie öffnen können. Aber das mache ich nicht. Ich gehe hier zurück zu meiner Firebase. Da wir jetzt ein Setup-Hosting haben, müssen wir diese Schritte nicht wirklich weiterverfolgen da wir diese Schritte bereits ausgeführt haben. Also gehen wir einfach X her. Die ganze Sache selbst. Ich könnte die Seite aktualisieren. Und auf einer Hosting-Site haben wir jetzt unsere Firebase. Nun, unsere eckige Anwendung können wir sehen, nun, wir haben diese Schaltfläche Erste Schritte nicht mehr, aber tatsächlich werden wir in unserer Anwendung unten auch den Release-Verlauf sehen und auch verschiedene Kanäle, die wir nutzen können. Aber hier, wenn ich auf diese URL klicken würde, wird unsere Anwendung live geöffnet. Diese Anwendung ist also vollständig in Firebase bereitgestellt und kann verwendet werden. Sie sind bereit für eine Welt, um es zu sehen. Und wir können sehen, dass unsere HTTP-Aufrufe auch funktionieren, weil wir die Daten von den HTTP-Aufrufen erhalten. Und wir können auch feststellen, dass unser Routing funktioniert oder nicht abgeschlossen haben. Wenn ich die Route ändere, gibt es einen Inhalt auf einer anderen Seite, aber das ist so ziemlich alles. Mit diesen Jungs konnten wir unsere Aufgabenanwendung fertigstellen und tatsächlich in Firebase bereitstellen. Lassen Sie uns nun alle zum nächsten Video übergehen damit ich mich ganz herzlich bei Ihnen bedanken kann. 12. Vielen Dank und auf Wiedersehen: Nun, das ist so ziemlich alles. Nochmals vielen Dank, dass diesen Kurs überhaupt besucht haben. Wenn Sie sich an das Ende dieser Ergebnisse gehalten haben, haben Sie tatsächlich Ihre eigene Angular Tasks-Anwendung erstellt und bereitgestellt. Jetzt können Sie diese Aufgabenanwendung für Ihr eigenes Portfolio verwenden , während wir die Anwendung bereitstellen. Es kann Ihnen also während Ihrer gesamten Karriere helfen , wenn wir diese Aufgabenanwendung erstellen Ich hoffe ehrlich, dass Sie etwas Neues lernen oder zumindest Ihr Wissen darüber verbessern Anwendung. Und wir haben mit vielen verschiedenen Hauptfunktionen von Angular-Komponenten, Services, HTTP-Modul, Routing usw. gearbeitet von Angular-Komponenten, . Was Sie aber auch wissen sollten, ist, dass viel mehr los ist als nur auf meinem YouTube-Kanal. Sie können tatsächlich feststellen, dass die eckige Zentralserie ist, in der wir auf alle Funktionen eingehen , die Angular uns zu bieten hat. Und wenn Sie sich für Material interessieren, ist das auch die Angular Material-Serie für Sie. Nun noch einmal, bevor wir diesen Kurs beenden, nun, mein Name ist Stefano Marriage, und ich habe mehr als sieben Jahre Erfahrung in der Webentwicklung. Daneben war ich Ihr Lehrer in diesem Kurs. Und wie ich bereits erwähnt habe, neben diesen Skillshare-Kursen höre ich neben diesen Skillshare-Kursen auch meinen YouTube-Kanal numerisch genannt. Schauen Sie sich das also auch an. Wenn Sie weitere Kurse von mir hier auf Skillshare sehen möchten , können Sie mein Profil besuchen und einen meiner Kurse auswählen , die ich dort habe. Zum Beispiel gibt es dort auch Angular Course. Es gibt andere Kurse für JavaScript, Bootstrap Node JS, JS und so weiter. Aber damit sind wir so ziemlich fertig. Nochmals vielen Dank, dass Sie an diesem Kurs teilgenommen haben. den Kurs abschließen, stellen Sie auch sicher, dass Sie Ihre eigenen Projekte einreichen und dass Sie diese Ergebnisse im Projektbereich dieses Kurses aufbauen . Also können wir alle zusammen zu diesen gehen, darüber sprechen, vielleicht haben Sie auch einige spezifische Fragen, die ich beantworten könnte, aber ich danke Ihnen allen noch einmal, und ich werde Sie in meinen anderen Kursen sehen. Tschüss.