Lass uns kodieren: Todo-App mit Angular und Firebase

1. Einführung: Hallo und herzlich willkommen zu meinem ersten Kurs in meiner Let's Code Serie. Mein Name ist Stefan Omerovic, und ich bin Autodidakt Web-Entwickler und ich bin auch ein Online-Lehrer. Dieser Kurs ist für Sie, die gerade mit Angular beginnen, oder für Sie, die bereit sind , Ihre Fähigkeiten auf ein neues Niveau zu verbessern. Wie Sie durch diesen Kurs sehen können, werden wir To-Do-App mit Angular und Firebase erstellen. Der Kurs ist ziemlich einfach, so dass Sie mit mir codieren können und auf diese Weise Ihre erste To-Do-App erstellen können. Im Projektabschnitt dieses Kurses finden Sie, diese ganze App live auf Firebase Hosting. So könnten Sie einen Blick werfen, was Sie durch diesen Kurs erstellen, live. App wird integrierte Pakete wie Bootstrap und Font Awesome haben. Aber auch wir werden mit Angular-Komponenten arbeiten, Dienstleistungen Routing durch diesen Kurs. Dann werden wir auch mit unserer Firebase, unserer Datenbank, arbeiten. Dort erstellen wir unsere Cloud Firestore, unsere To-Dos-Sammlung und das Rendern unserer To-Dos auf unserem Bildschirm. Wir werden auch in der Lage sein, diese Aufgaben zu ändern, diese hinzuzufügen, gelöscht, wie wir wollen. Und am Ende dieses Kurses erfahren Sie, wie Sie Ihre To-Do-App auf Firebase Hosting bereitstellen können und Ihre App live sehen können, während wir diesen Kurs mit Angular, Firebase und sogar ein bisschen Bootstrap durcharbeiten werden , es wäre gut, wenn Sie zumindest die Grundlagen dieser kennen. Es ist nicht sehr erforderlich, Sie werden immer noch in der Lage sein, durch diesen Kurs zu arbeiten, aber es wird einfacher für Sie sein, den Kurs zu verfolgen. Lassen Sie uns jetzt sehen, was Angular ist und wie können wir es verwenden? 2. Was ist winkelig und wie man sie verwendet?: Also, wenn wir gerade jetzt beginnen, lasst uns zuerst sehen, was Angular ist. So Angular ist ein JavaScript-Framework für eine einseitige Anwendungen. Wir können Angular verwenden, um Anwendungen über Web, Mobilgeräte und sogar Desktops zu entwickeln . Schnelligkeit, Leistung und Projektmanagement von Angular ist in der Gemeinschaft bekannt. Es gibt auch Gründe, warum Angular an der Spitze neben Vue und React.js ist , als JavaScript-Framework natürlich. Angular hat auch einige einzigartige Werkzeuge und kommt auch mit bereits integrierten Funktionen wie RxJs, die fortgeschrittenes Thema ist, aber wir werden mit Observables von denen durch diesen kleinen Kurs arbeiten. So werden Sie es zumindest verstehen. Angular hat auch sein eigenes Werkzeug für die Verwaltung der Module namens Ivy. Es hat und unterstützt auch Routing, wie Sie hier sehen können, Routing und Navigation, HTTP und Injektionen. Wir können Dienste in Angular verwenden, um unsere Daten über unsere Seiten und Komponenten zu injizieren und einfacher zu teilen, die Sie in mehreren Videos sehen. Angular hat auch seine eigene Dokumentation, die hier offen ist. Diese Dokumentation ist gut geschrieben und ehrlich gesagt viel zu lesen, vor allem für einen Anfänger. Gut, da mit der Dokumentation. Es gibt ein ganzes Projekt, Tutorial Project mit ihm. Also bin ich derzeit auf der Einführungsseite der Angular Docs. Und hier gibt es eine Hello World. Und wenn ich hier klicken, können Sie Tour der Helden Tutorial sehen. Wenn ich darauf klicken würde, würde ich anfangen, die Angular Anwendung namens Tour of Heroes zu erstellen und damit können Sie die gesamte Anwendung, das ganze Projekt mit Angular erstellen. Angular hat auch ein tolles Team dahinter. Es wird von Google entwickelt und wird oft aktualisiert und aktualisiert. Um genau zu sein, etwa alle sechs Monate, kommt Angular mit einer neuen Version heraus. Deshalb erstellen wir diese App in Angular 10. Wenn ich hier nach unten scrolle, lassen Sie mich das schließen. Sie werden sehen, dass die Ablenkung stabil ist. Wenn ich gehen würde, ist es 10.1 und die nächste Version wird 11. Version sein. Und Sie können sehen, dass wir bereits 10 Version von Angular haben. Durch diese Versionen wird es Änderungen geben, aber die keiner von ihnen ist entscheidend. Sie sind meist auf Geschwindigkeit Codierung, kleinere gebündelte Packs und vielleicht neue Funktion. Die einzige große Änderung, die passiert ist, war von Angular JS zu Angular 2-Version, die zu diesem Zeitpunkt völlig anderes Framework ist . Ich könnte stundenlang über Angular reden und trotzdem werde ich etwas zu sagen haben. Also denke ich, dass das Beste, das Beste für uns ist, nur in Code zu springen und einfach unsere App zu erstellen. Du kannst mir Schritt für Schritt folgen. Und am Ende dieses Kurses werden Sie To-Dos App mit Angular und Firebase erstellen. Lassen Sie uns Code. 3. Eine App erstellen: Also durch dieses Video, werden wir unsere App erstellen. Um das zu tun. Sie müssen zuerst Angular CLI auf Ihrem Computer haben. Also gehen Sie zu cli.angular.io. Hier haben Sie ein Skript, um CLI für Angular zu installieren. Sie können einfach dieses npm install g Flag für global @angular /cli. Wenn dies abgeschlossen ist, haben Sie CLI erfolgreich installiert und können es verwenden. Nun, hier auch, Sie sehen diese ng neue my-dream-app, Dies ist, erste Verwendung von Angular CLI. Damit können wir unsere App generieren. Also bin ich jetzt in meiner Konsole. Sie können Ihr Terminal oder einen Konsolenemulator öffnen, wie ich hier habe. So könnte ich zum Beispiel eine neue To-Do-App wie diese ausführen . Wenn ich Enter drücken würde, würde meine App anfangen, sich selbst zu erstellen. Es wird mich zuerst fragen, ich gerne eckige Routing hinzufügen möchte? Ich könnte passieren. Ja hier, damit Winkelführung automatisch für mich generiert wird. Da wir in diesem Kurs ein bisschen Routing verwenden, würden wir das brauchen. Es wird mich auch fragen, welches Stylesheet-Format ich verwenden möchte? Also habe ich CSS, SCSS, SASS, Less oder Styles. Ich würde CSS verwenden, nur ein einfaches für diesen Kurs. Die App hat jetzt begonnen, sich selbst zu installieren, und sobald alles fertig ist, werden wir unsere Arbeit fortsetzen. Warten Sie einfach ein bisschen. So habe ich jetzt erfolgreich meine To-Do-App erstellt. Und jetzt wäre das nächste, was wäre diese CD meine-Traum-App, im Grunde CD, dann To-do-App, dann unser App-Name. Also werde ich cd to-do App laufen. Und so bin ich momentan in meiner To-Do-App in meinem Terminal. Also lassen Sie mich klar laufen, um das ein bisschen zu klären. Und an diesem Punkt, dass wir in unserer App sind, könnten wir einfach ng dienen laufen. Und ng serve wird unsere App auf localhost 4200 servieren. Wenn ich diesen ng so ausführe, kann ich meinen localhost 4200 öffnen und meine App sehen , die von Angular CLI generiert wurde. Also ist alles fertig. Ich werde diesen localhost kopieren und zu meinem gehen, google, fügen Sie ihn in meine URL wie folgt ein. Und hier sind wir. Offensichtlich hat meine App hier ein bisschen Inhalt, also zeige ich dir einfach, wo dieser Inhalt jetzt steht und gehe ein bisschen durch die App. Wir haben einige Inhalte in unserer App, offensichtlich habe ich meine App mit Visual Studio-Code geöffnet. Wenn ich zur Quelldatei und zu meiner index.html gehen würde, wird dieser Index HTML meine App vollständig bereitstellen. Sie sehen diese App-Root-Art von HTML-Element hier. Dies wird im Grunde meine gesamte App dynamisch basierend auf meinen Komponenten, Modulen, Diensten usw.rendern Modulen, Diensten usw. Wenn wir hier zu diesem App-Ordner gehen würden, würden wir diese app.component.html haben. Mach es auf. Und hier können Sie sehen, dass wir bereits einige Inhalte im Inneren haben, oder? Also, wenn ich ein, alland löschen würde. Und an diesem Punkt könnte ich zum Beispiel H1 eingeben und Hello World so eingeben. Control S zum Speichern, meine App wird automatisch neu geladen, da unsere App noch auf dem localhost 4200 läuft. Und jetzt auf meinem Bildschirm konnte ich nur Hallo World Text sehen, der von meinem H1-Tag kommt. Also im Grunde der gesamte Inhalt, den wir hatten, war in dieser App-Komponentendatei. Und jetzt fangen wir an, klar zu werden. Wir haben den eckigen Standardinhalt entfernt und wir sind hier nur mit unseren Inhalten. Jetzt, da wir die App erfolgreich erstellt haben, ist es an der Zeit, alle Abhängigkeiten zu installieren, die wir über diese App benötigen. Lassen Sie uns die installieren. 4. Installieren der Dependencies: Also planen Sie für dieses Video ist es, alle Abhängigkeiten zu installieren, die wir brauchen und durch unseren Kurs und unsere App verwenden werden, offensichtlich. Wir installieren keine RxJs oder HTTP oder eine andere Abhängigkeit. Diese Abhängigkeiten sind hauptsächlich bereits mit dem Winkel ausgeführt. Wir werden Bootstrap und das Bootstrap verwenden wir jQuery. Wir werden auch Symbole von Font Awesome verwenden. Also müssen wir diese installieren, um es zu verwenden. Und wenn Sie sich fragen, könnten wir diese einfach in unsere Hauptdatei, unsere Index HTML-Datei, importieren ? Ja, wir können, aber ich werde Ihnen einen freundlicheren Weg für Angular zeigen, dies zu tun und unsere index.html Datei nicht zu füllen. Wir werden auch Firebase-Abhängigkeiten benötigen, aber wir werden diese ein wenig später installieren, wenn wir unsere Arbeit mit Firebase beginnen. Also in meiner Konsole, wenn ich zuerst C steuern würde, um meinen lokalen Server davon abzuhalten. Jetzt könnte ich zum Beispiel npm install —saveausführen, npm install —save diese Abhängigkeit zu speichern, Bootstrap, dann jQuery und Font Awesome. Wenn ich Enter drücken würde, oh, tut mir leid. Ich habe Font Awesome falsch eingegeben. So wie das hier. Wenn ich an dieser Stelle auf Enter drücken würde, würden meine Abhängigkeiten mit der Installation beginnen. Und am Ende hätte ich Bootstrap vierte Version installiert. Wie Sie sehen können, wird 4.5.2 hinzugefügt, dann wird jQuery auch hinzugefügt, und Font Awesome wird auch zu meinem Projekt hinzugefügt. Also haben wir diese Abhängigkeiten erfolgreich in unser Projekt hinzugefügt, aber immer noch verwenden wir diese nicht. Nur durch die Installation Angular nicht wissen, dass es diese verwenden muss. Also, wo sollten wir diese Abhängigkeiten verwenden, wenn wir nicht die in der Datei index.html verwenden. Unten unten haben Sie diese eckige Daten-JSON-Datei. Wenn ich das aufmachen würde. Hier ist eine ganze Schematik in Bezug auf diese Angular App, die wir unten haben, sehen Sie die Stile Array, diese Stile Array ist im Grunde Array, das unsere CSS, Symbole oder Sachen wie das hält. Und diese Skript-Array ist das, was unsere Skripte, unsere JavaScript-Dateien hält. Also könnten wir diese einfach hier importieren und diese nicht in unsere index.html Datei importieren. Und sobald wir Bootstrap, jQuery, font-awesome, hier in einem Knoten Module installiert haben , wenn ich das öffnen würde, wenn ich hier ein bisschen nach unten scrollen würde, ist es Bootstrap. Wenn ich das hier öffnen würde, wie ich es installiert habe, habe ich es hier in meinem Projekt. Ich habe dist Ordner. Ich habe zum Beispiel CSS, und ich habe bootstrap.min.css-Datei, die ich einfach in meine App importieren könnte. Und das werden wir jetzt tun. Also lassen Sie mich das jetzt schließen. Dieser Knoten Module, ja. Und in meinen Stilen neben meiner Quelle, styles.css, ist diese Datei im Grunde diese Datei auf der gleichen Ebene Ordnerebene wie meine index.html. Dies ist eine Basis- und globale styles.CSS Datei, die über die App verwendet wird. Also direkt darunter könnte ich hier Komma verwenden und einen weiteren Import hinzufügen. Zum Beispiel, Knotenmodule Schrägstrich Bootstrap, Schrägstrich dist Slash CSS und Schrägstrich Bootstrap. .min , es ist eine verkleinerte Datei, .css. Und dadurch haben wir Bootstrap importiert. Und wir müssen auch Font Awesome importieren. Also für das ein weiteres Komma und unten, Knoten Module, Schrägstrich Font Awesome, Schrägstrich CSS Schrägstrich Font Awesome, .min.css. Und ja, wir haben jetzt ein Css für unsere Icons und auch unser Bootstrap-Framework. Also lassen Sie uns jetzt Skripte für Bootstrap und jQuery hinzufügen. Also hier in meinem Skript-Array werde ich nur Knoten, Knotenmodule Schrägstrich jQuery-Schrägstrich dist für die Verteilung und jQuery, .min.js-Datei hinzufügen Knoten, Knotenmodule Schrägstrich jQuery-Schrägstrich . Und das ist wichtig, bevor wir unseren Bootstrap importieren. Wir sollten auch zuerst unsere jQuery importieren. Es wird dann jQuery zuerst geladen und Bootstrap wird wissen, wie man es an diesem Punkt benutzt. Und jetzt, um den Bootstrap zu importieren. So Knoten Module Schrägstrich Bootstrap Schrägstrich JavaScript Schrägstrich nicht JavaScript, sorry, Schrägstrich dist, dann Schrägstrich JavaScript und Schrägstrich bootstrap.minified, dass js. Und das ist es. Also, jetzt könnte ich einfach meinen localhost oder 4200 erneut ausführen. Also werde ich ng servieren —open laufen. Diese offene Flag hier, wird automatisch öffnen meine Anwendung in, 00:05:12 .185 —> 00:05:13 .025 Wie diese. Sie können sehen, dass mein H1-Tagat dieser Punkt nicht so einfach aussieht , da es Standard-Stylings von Bootstrap hat. Wenn ich an dieser Stelle zu meiner App-Komponente gehen würde, und ich würde das Ich mit der Klasse von font-awesome hinzufügen, fa. Überprüfen Sie zum Beispiel, speichern, auf meinem lokalen Host. Sie werden dieses Check-Zeichen hier sehen. Lassen Sie mich es ein wenig vergrößern. Ja, das hier, im Grunde kommt es von Font Awesome. Also haben wir einen Bootstrap und kämpften genial, erfolgreich in unsere App importiert. Und an diesem Punkt könnten wir unsere erste Komponente erstellen. 5. Erste Komponente – Header: Also jetzt in diesem Video, Plan ist es, unsere erste Komponente zu erstellen. Wir werden Header-Komponente erstellen, dass Navigationsleiste, die immer an der Spitze unserer Anwendung sein wird. Wir werden auch die gesamte Benutzeroberfläche für diese Komponente erstellen. Also fangen wir an. Wir könnten eine Komponente selbst erstellen, aber es gibt einen besseren und schnelleren Weg, dies zu tun. Ich könnte zu meinem Terminal gehen, wie ich hier und hier auf meiner Seite bin. Auf der rechten Seite muss ich dies nicht in meinem Hauptterminal tun , wo ich localhost ausführe. Ich könnte immer noch localhost ausführen und dieses Skript ausführen, das ich brauche. Angular CLI wird uns ein bisschen mehr Funktionalität geben und wir könnten damit auch unsere Komponente generieren. Also könnte ich so etwas eingeben, ng g c Header. Dieses G steht also für generieren. Also könnte ich Art von Generierung statt g, und dieses C steht für Komponente. Also könnte ich vollständig Komponente eingeben, aber das ist eine Kurzschrift und der Header wird der Name der Komponente sein. Wenn ich also hier Enter drücke, werden Sie nach einiger Zeit sehen, dass eckig eine neue Komponente für mich erstellt hat. Header-Komponente HTML-Datei, spec.ts Datei, die eine Testdatei ist, die ich ein wenig später sprechen werde, Typoskriptdatei und CSS-Datei für uns in meinem Visual Studio-Code, der so aussieht. Neben meiner App-Komponente hätte ich diesen Header-Ordner. Also, wenn ich das öffne, würde ich meine HTML-Datei für meinen Header hier haben. Also offensichtlich, wie angular diese Header-Komponente generiert hat, fügte sie auch diesen Absatz Header für uns hinzu. So könnten wir einfach überprüfen, ob das wirklich funktioniert. Also hier in meiner Header-Typescript-Datei habe ich hier Selektor, App-Header. Grundsätzlich ist dies ein Selektor. Wie könnte ich diese Komponente in meinem HTML verwenden Es gibt auch andere Importe wie Template-URL, die Header HTML-Komponente verwendet, die im Grunde HTML-Teil für diese Komponente ist und Stil für diese Komponente ist header.css Stil. Also, wenn ich das hier kopieren würde, und ich gehe zu meiner App-Komponente, Hauptkomponente meiner Anwendung, Löschen aktueller Inhalte. Und ich werde einfach meinen App-Header so verwenden, meine Datei speichern, in meinem Browser sollten wir etwas anders sehen. Also, jetzt in meinem Browser, habe nicht diese H1-Tag und das Check-Icon, ich könnte das ein bisschen vergrößern. Ich habe diesen Absatz mit Header funktioniert. Also im Grunde ist meine Komponente erfolgreich in unsere App implementiert und sie wird an dieser Stelle verwendet. Also, jetzt möchte ich den Inhalt für diese Komponente codieren. Also bacisly werde ich diese Navigationsleiste mit dem Bootstrap codieren . Also hoffe ich, dass Sie zumindest die Grundlagen von Bootstrap kennen, aber es wird auch für Sie leicht sein, nachzuverfolgen. mit ihm. Auf meiner linken Seite werde ich meinen Code haben und auf der rechten Seite werden wir eine Live-Vorschau dieses Codes haben. Also hier werde ich alle meine Editoren schließen , die ich geöffnet habe, und wir werden nur meine Header-Komponente so öffnen. Ich werde diesen Absatz löschen, speichern. Und auf der rechten Seite sehen wir diesen Absatz nicht, also könnten wir einfach anfangen, unsere Navbar zu programmieren. Also werde ich die erstellen, lassen Sie mich zuerst den Kommentar der Navigationsleiste setzen. Und ich werde unten nav erstellen, nav HTML5-Element, ich werde die Klasse darauf hinzufügen. Für Navbar. Dann navbar erweitern lg, dann eine navbar dunkel. Und ich könnte bg dark auch gebrauchen. So sparen Sie. Und Sie können diese Art von grauen Linien sehen. Also für Sie, die den Bootstrap nicht kennen, ist Bootstrap im Grunde HTML und CSS, und auch ein JavaScript-Framework, das auch erstellt hat, bereits Klassen für uns zu verwenden. Diese Navbar wird also im Grunde die Navigationsleiste für uns erstellt. Diese navbar erweitern lg. Wir werden unsere Navigationsleiste erweitern, um Vollbild auf größeren Geräten zu nehmen, aber auf einem kleineren Gerät ist Inhalt für unsere Navigationsleiste wird nicht sichtbar sein, aber es wird Art von müssen umgeschaltet werden, wird auf die Schaltfläche, die Sie bald sehen werden Genug. Eine navbar dunkel, färbt unsere Hintergrundfarbe der Navigationsleiste, um dunkle Farbe wie diese, grau, dunkelgrau und bgdark. Wir sind irgendwie erkennen, dass die Navigationsleiste dunkel ist und im Grunde den Text an das Licht gestellt wird, um das Licht im Grunde weißen Text zu sein. So guter Kontrast. Lassen Sie mich zunächst das Logo erstellen, das wir normalerweise in der Navigationsleiste haben. Also werde ich dieses Anker-Tag erstellen und für meine href werde ich diesen Hashtag einfach übergeben. Ich muss einen Kurs haben. Und diese Klasse wird navbar Marke sein, die Glas ist, um das Logo innerhalb der Navigationsleiste mit Bootstrap zu erstellen. Und ich werde den Text dafür hinzufügen, um eine To-Do-App zu speichern. Und hier können Sie dieses Logo rechts sehen, sieht schon gut aus. Also lassen Sie uns jetzt die diese Schaltfläche unten erstellen. Diese Schaltfläche wird im Grunde die Schaltfläche für diese Umschaltleiste auf kleineren Geräten sein. Also Knopf, ja. Und die Art eines Knopfes? Typ sollte eine Schaltfläche sein. Und Klasse, es gibt eine Klasse, die bereits für uns erstellt wurde, namens navbar toggler wie diese. Und ich könnte den Datenumschalter verwenden, um zusammenzubrechen. Lassen Sie mich ALT Z das. So konnten Sie hier den ganzen Inhalt sehen. Diese Daten-Toggle kollabieren ist im Grunde Bootstrap-Arbeit, um JavaScript mit dem HTML zu kombinieren und auf diese Weise wird es diese Collapse-Animation für uns erstellen. Auch würden wir Daten Ziel benötigen. Also im Grunde, welche Art von Inhalt wird mit dieser Schaltfläche umschalten? Und ich würde die ID hier verwenden, res_nav. zum Beispiel, wie eine ansprechende Navigation responsive nav. Wir werden in Kürze Abschnitt mit dieser ID erstellen, aber wir brauchen auch den Inhalt für unseren Button. Also werde ich ein span Element wie dieses erstellen, und ich werde eine Klasse von navbar verwenden. Toggler, ja, ich brauche zwei g und Icon hier. Also schon auf der rechten Seite, können Sie sehen, dass dieses Symbol nicht richtig aussieht, oder? Seine weiße Ikone. Also, wenn ich zu diesem navbar Toggler kommen würde und ich würde eine weitere Klasse namens bg dark übergeben. Ich hätte jetzt ein dunkles Symbol hier. Also, um diese responsive Navigation für uns zu erstellen, nach unserer Schaltfläche würde ichnach unserer Schaltflächeein div mit der Klasse von collapse und navbar kollabieren, diese Klasse, diese Klassen sind die Klassen, die dieses ganze definieren , um mit unserer Schaltfläche zusammenklappbar zu sein. Und ich sollte die ID hier von res_nav erstellen. So wie das. Also könnte unser Knopf das anvisieren. Also im Inneren werde ich nur meine Links haben, Links, die, Art von Navigationslinks offensichtlich. Und dafür würde ich ungeordnete Liste verwenden. Ich würde die Klasse hier von navbar nav passieren, und auch ml alto. So wird es im Grunde den Rand auf der linken Seite, automatisch, setzen. So wird es meinen Inhalt damit auf die rechte Seite verschieben, dann muss ich ein Listenelement erstellen. Wie Sie wissen, haben die Listen in der Regel Listenelemente. So Listenelement wird eine Klasse von nav Element haben. Und im Inneren könnte ich einen Link wie diesen erstellen. Href könnte nur der Hashtag sein. Dieser Link würde mich zu einer Homepage führen. Ich sollte hier auch eine Klasse von nav link save erstellen, und wir sehen es nicht auf der rechten Seite. Aber wenn ich meinen, meinen Inhalt ein bisschen schrumpfen würde , immer noch nichts. Hier ist es. Also, selbst auf einem großen Bildschirm Geräte, haben wir diese Art von Taste hier. Wir haben etwas falsch gemacht. Offensichtlich, was wir falsch gemacht haben, ist diese Klasse navbar-Toggler sollte zwei gs wie diese haben. Und jetzt wird meine Navigationsleiste diese Schaltfläche nicht auf größeren Bildschirmen haben. Aber wenn ich mein Element erwarten würde, und, lassen Sie es auf das iPhone X verschieben. Wir werden diesen Knopf hier haben. Und wenn ich darauf klicke, wird es nur das div mit dem Collapse-Symbol darauf zusammenbrechen. Kollapiere die Klasse drauf, tut mir leid. Also lass mich das rückwärts bewegen und zu meinem Code zurückkehren. Und jetzt in meinem Code könnte ich andere Elemente in meiner Liste erstellen. Also würde ich das zwei Mal kopieren, 1, 2 und ich könnte, Für diese eine Verwendung über und todos, die die ganze Seite für unsere To-Dos sein wird. Und jetzt haben wir dieses Haus über und zu denen, die überhaupt nicht nutzbar sind, offensichtlich. Und wir haben nicht immer noch den Inhalt dafür. Aber jetzt haben wir unsere Header-Komponente vollständig erstellt. Wir können sehen, wie dies auch auf einem kleineren Bildschirm Geräte aussehen wird. Wenn ich mein Element erwarten würde, öffne die iPhone-Ansicht. Ja, es sieht schon gut aus. Und jetzt, da Sie wissen, wie Sie eine Komponente erstellen und verwenden, lassen Sie uns jetzt unsere anderen Komponenten erstellen, die wir in diesem Kurs verwenden werden. 6. Home, About und Todos Komponenten: Nun, da Sie die Header-Komponente erstellt haben, sollten Sie wissen, wie Sie die anderen erstellen können. Also, das ist gut für Sie, sich selbst zu testen. Wir werden zu Hause, über und To-Dos Seite brauchen. Es wird also gut sein, wenn Sie auch Komponenten für diese Seiten generieren würden. Also bin ich wieder in meinem Terminal und hier auf der rechten Seite des Terminals, ich betreibe immer noch meinen localhost. Ich werde ng generieren Komponente und zu Hause wie folgt laufen. Aber jetzt würde ich bestehen, — und SkipTests wie folgt. Dies überspringt Tests, es wird im Grunde nicht die Testdatei für mich generieren, da wir die Testdateien für diese einfache kleine App nicht benötigen, ich würde dasselbe erstellen, aber jetzt wird es die über Komponente sein. Und Sie sehen, dass es unsere Komponenten sofort erzeugt und erzeugt. Und schließlich, wie diese To-Dos. Ja, also jetzt in unserem Code neben unserer Header-Komponente haben wir über Home- und To-Dos-Komponente. Und all diese Komponenten, wenn Sie zu ihren HTML-Dateien gehen würden, ist es nur ihr Name und funktioniert Wort. Also an dieser Stelle würde ich zu meiner App-Komponente HTML hier gehen. Und unter meinem App-Header würde ich App verwenden. Und Sie können sehen, dass ich hier schon nach Hause wie dieses und Control S dafür benutzen könnte , um es zu speichern. Und gehen wir, um es auf unserem lokalen Gastgeber zu sehen. Sie können unter meinem Header sehen, es gibt eine Home-Komponente, oder? Für diese Art von ist unsere Header-Komponente durch andere Komponenten freibar, oder? Sobald wir also auf der Seite sind, werden wir diese Komponente hier noch sehen, aber hier wird sich der Inhalt ändern. In diesen Hausarbeiten geht es um Arbeiten, werden To-Dos-Arbeiten sein, oder? Und dafür verwenden wir Routing in Angular, um diese zu ändern, im Grunde, um diese Routen zu ändern, um diese Seiten zu ändern, verwenden wir ein Routing, das bereits in Angular implementiert ist. Also lasst uns das in unserem nächsten Video verwenden. 7. Angular: In diesem Video werden wir Routen für unsere App einrichten. Wir werden auch Links erstellen, die, sobald wir auf diese klicken, führen sie uns auf die Seite, die wir benötigen, basierend auf dieser Route. Diese Seiten zeigen auch nur den Inhalt, den sie für diese Seite von dieser Komponente im Grunde zeigen sollten, fangen wir an. Also in meinem Projekt könnte ich hier in meine Quelle und App gehen. Und ich könnte hier zum App-Routing-Modul gehen. Wenn Sie sich erinnern, als wir die Angular-App generiert , fragen Sie auch, ob wir das Routing in die App integrieren wollen? Deshalb hat es auch dieses App-Routing-Modul für uns erstellt. Also in diesem Modul haben wir diese Konst von Routen, und hier richten wir im Grunde unsere Routen für unsere App ein. Also hier drin werde ich nur meine geschweiften Klammern verwenden und um die Route einzurichten, muss ich zuerst den Pfad passieren. Der Pfad wird der Pfad für diese Route sein und ich werde hier nach Hause tippen. Und danach muss ich auch Komponente einrichten, Komponente, die ich verwenden möchte, oder? So Komponente wird Home-Komponente sein, eine zweite Komponente, die wir bereits in unserem Projekt installiert haben. Das ist also im Grunde, wie eine Route in Angular aussieht. Wir müssen über und zu tun, dass mehr haben. Also hier unten, würde ich etwa so verwenden. Und die Komponente wird über die Komponente sein. Und auch werde ich verwenden, um Dos Route, Dos. Und die Komponente wird zu Dos-Komponente sein, richtig, so. Auch wenn der Benutzer die leere Route besucht, sollten wir ihn auf die Home-Komponente umleiten , glaube ich, also hier oben, werde ich eine weitere Route hinzufügen, diese Route. Und lassen Sie es hier ein Komma setzen. Diese Route wird einen Pfad von leer haben. Und anstelle der Komponente werde ich RedirectTo verwenden und ich werde hier zu Hause verwenden. Ich möchte zur Home-Komponente umleiten. Außerdem muss ich Pfadübereinstimmung übergeben. Ich möchte meinen Weg voll und ganz anpassen. So voll hier, und das ist es. Jetzt, da ich in meiner App selbst bin, könnte ich meinen localhost hier aktualisieren, und Sie werden sehen, dass es mich auf die Homepage führen wird. Auch, wenn ich hier nach Hause klicke, funktioniert nichts richtig? Über auch, alles geht auf die Homepage. Also müssen wir diese Klicks einrichten, um uns auf die richtigen Seiten wie zu Hause über und To-Dos zu führen . Um dies zu tun, werde ich hier meine Header-HTML-Komponente öffnen. Um also unsere Home-Komponente einzurichten, um uns auf die Homepage zu führen, müssen wir diese Klammern und den Router-Link verwenden. Router Link könnte mich auch führen. Homepage wie diese. Ich kopiere das und füge es noch zwei Mal für über und To-Dos ein. Also hier sollte über Seite und Dos-Seite wie diese sein. Also in meiner App selbst, wenn ich darauf klicke, wird es mich auf die Über Seite führen, wenn ich auf Home klicke, wird es mich auf die Homepage führen. Wenn du auf Dos klickst, wird es mich zu Dos Route führen, richtig? Außerdem sollte ich die aktive Klasse einrichten, für die die Route derzeit auf meinen Links aktiv ist. Um dies zu tun, können wir etwas namens Router-Link verwenden, aktiv. Router Link aktiv kommt von Angular und wir könnten einfach zu dieser Klasse übergeben. Und Sie wissen, dass Bootstrap bereits seine aktive Klasse hat und wir können das verwenden. Sie können aber auch Ihre eigene benutzerdefinierte aktive Klasse erstellen und diese hier einrichten. So Router Link aktiv für jedes der Link-Elemente hier, werde ich verwenden, um zu handeln. So können Sie jetzt die Zeit sehen, die derzeit auf meiner to do Route ist und mein To-Dos-Link aktiv ist. Wenn ich zu etwa wechseln, wird es aktiv sein, wechseln Sie zu Hause, es wird aktiv sein. Aber es gibt auch ein Problem. Wir ändern natürlich die Route, aber der Inhalt selbst bleibt für die Arbeit zu Hause. Wir müssen auch den Inhalt ändern. Also einfach durch die Einrichtung unserer Navigationsleiste und unser Routing, der Inhalt selbst wird sich nicht ändern, weil wir die Home-Komponente hier in unserer App component.html implementiert wir könnten es jetzt entfernen und etwas verwenden, das als Router-Steckdose bezeichnet wird. Router-Steckdose rendert den Inhalt basierend auf der Route, basierend auf der Komponente von dieser Route. Und jetzt können Sie sehen, dass ich in meiner über Route bin und es über Werke sagt. Lassen Sie mich das auch ein bisschen zoomen. So könnten Sie sehen, wenn ich dies zu einem Haus ändere, Sie werden Heimarbeiten zu Dos, Dos Werke sehen. So ist unser Routing vollständig eingerichtet, und wir sollten jetzt zumindest einen Teil der Inhalte für unsere Seiten hier haben. Also fangen wir an, mit denen zu arbeiten. 8. Inhalt für Heim- und Seite: Also jetzt möchten wir einige Inhalte für unsere Seiten erstellen. Wir beginnen mit der Startseite und über Seiten für meine Homepage. Ich werde zuerst alle meine geöffneten Dateien hier schließen, und ich werde hier nur zum Home-HTML gehen. Ich werde hier zuerst den Kommentar von zu Hause setzen, sorry, falsch eingetippte Homepage-Inhalte. Und wir könnten anfangen, unsere Inhalte hier zu erstellen. Ich werde nichts Großes tun, nur als kleine Inhalte für Zuhause und über Seite. Also div, da wir uns irgendwie nicht auf diejenigen in diesem Kurs konzentrieren. Also das Ende des Homepage-Inhalts und die Klassen für mein div wären Jumbotron und auch Textcenter. Diese Klassen kommen offensichtlich von einem Bootstrap. Jumbotron ist ein großer Abschnitt aus einem Bootstrap. Dann werde ich H1 verwenden und ich werde eine Klasse darauf Display-4 verwenden. So wie das hier. Es wird wie ein sein, es wird das H1-Tag verwenden, aber es wird es wie eine vier für Größe anzeigen und, Hallo Welt wird ein Text dafür sein. Dann könnte ich hier einen Absatz mit einer Klasse von Lead verwenden, was bedeutet, dass dieser Absatz sichtbarer, größerer Absatz sein wird, da es sich um einen führenden Absatz in die Seite handelt. Und es wird einfach sagen, willkommen zu unserer To-Dos App mit Angular und Firebase. Das war's. Wir könnten hier auch eine Schaltfläche hinzufügen. Also Schaltfläche wie diese werde ich einen Typ für die Schaltfläche hinzufügen wird nur der Button-Typ sein. Und auch die Klassen werden btn, btn-rimary und btn-lg für große Taste sein und primär färbt es, färbt es auf die primäre Farbe von Bootstrap, die eine blaue Farbe ist. Und hier werde ich ein To-Dos wie dieses verwenden. Diese Schaltfläche führt mich zur To-Dos-Seite. So könnte ich hier auch Router Link verwenden. Und es wird eingerichtet, um mich zu solchen To-Dos zu führen. Dies sollte auch in Anführungszeichen, einfache Anführungszeichen sein. Das war's auf meiner Homepage. Jetzt können Sie diese Hello World sehen. Willkommen in unserer to dos App mit Angular und Firebase Text und zu dos Text Ich möchte To-Dos Text hier verwenden, ich werde einrichten, gehen Sie zu To-Dos Wie dies. Und jetzt, wenn ich auf diese Schaltfläche klicken würde, können Sie sehen, dass es mich zur To-Dos-Seite führen wird, richtig? Also lassen Sie uns jetzt einige Inhalte auch für die About Seite erstellen. Für über Seite werde ich meine über HTML öffnen. Also werde ich zuerst einen Kommentar zu Seiteninhalt setzen. Und hier werde ich ein div erstellen. Lassen Sie mich auch Ende Kommentar, Ende der über Seiteninhalt. Und jetzt könnte ich hier Container, Klasse, Container und Textcenter gut verwenden . Im Inneren werde ich mein H1 mit der Klasse der Marge oben zu 5 verwenden. Es wird mein H1 um fünf Leerzeichen von Bootstrap bewegen. Im Inneren werde ich über Seite wie folgt übergeben. Und lassen Sie uns auch einen Absatz hinzufügen. Absatz könnte auch ein führender Absatz sein. Also werde ich die Lead-Klasse hinzufügen. Text im Inneren wird sein, lassen Sie uns unsere To-Dos-App programmieren. Und lassen Sie mich noch einen Absatz hinzufügen. Dieser wird normaler Absatz sein und ich werde die App verwenden wird vollständig mit Angular und Firebase als Datenbank wie diese entwickelt werden. Also, jetzt in meiner Über Seite, Ich habe Inhalte wie diesen, die ähnlich wie die Homepage aussehen, aber ohne dieses Jumbotron. Also ist es gut genug für diese beiden Seiten. Wir sollten uns jetzt auf die To-Dos-Seite konzentrieren. Und lassen Sie uns das nächste Video codieren. 9. Todos Seiteninhalt: Mein Hauptziel hier auf der To-Dos-Seite ist es, einen Abschnitt hier im oberen Headerbereich zu haben , in dem ich unsere To-Dos hinzufügen kann. Und unten sollten wir zwei Listen haben, eine Liste für To-Dos und eine Liste für fertige To-Dos, die To-Dos, die wir irgendwie schon gemacht haben. Also werde ich meine Dateien schließen, die ich in meinem Visual Studio Code geöffnet habe, und ich werde die To-Dos HTML-Komponente öffnen. Also hier könnte ich zuerst Kommentar eingeben, To-Dos-Header, ein div hinzufügen und auch das Ende Kommentarende des To-Dos-Headers hinzufügen. Und dieser Header wird ein paar Klassen haben. Ich werde zuerst eine Klasse von Jumbotron und Textcenter verwenden . Zentrieren Sie so. Und im Inneren könnte ich meine Container-Klasse heilen, dann innerhalb dieses Containers könnten wir ein weiteres div mit der Klasse der Zeile haben. Und für den Todestrakt könnten wir ein Gitter im Inneren haben. Also werde ich ein div mit der Klasse der Spalte kleine Geräte 2 und Spalte Medium Geräte 3 wie folgt hinzufügen . Dies wird nur als Abstand dienen, als Abstand dienen, ich werde einfach meinen Hauptbereich einer Kopfzeile in die Mitte meines Bildschirms verschieben. Also werde ich zwei oder drei Spalten auf einer linken Seite leer haben. Und selbst, dieser Kopfzeileninhalt selbst wird eine Klasse von Spalte sm von acht und Spalte md von sechs haben . Was bedeutet, dass auf kleineren Geräten auf der linken Seite zwei Spalten leer sind, dann wird es acht Spalten der Breite nehmen, und am Ende werden zwei Spalten wieder leer sein, da Bootstrap 12 Spalten hat. Also 2 plus 8 ist 10 und 2 Spalten leer, das ist 12. Also hier könnte ich auch Kommentare für das Ende des Containers, das Ende der Zeile und Ende des Inhalts wie dieses und das Innere meines Inhalts hier hinzufügen, ich könnte zuerst H1 eine Klasse von Display 4 hinzufügen und Überschrift wird einfach Todos wie das hier. Und hier könnte ich den Eingang haben. Eingabegruppe mit der Eingabe und der Schaltfläche zum Hinzufügen meiner Aufgaben. Also werde ich ein div mit der Klasse der Eingabegruppe hinzufügen, die die Klasse ist, um die Eingabegruppe zu definieren. Und im Inneren werde ich mein Eingabefeld hinzufügen, das eine Art Text ist. Und die Klassen werden Formularsteuerung sein, was die Klasse ist, um etwas mehr unsere Eingabe zu stylen, nicht nur Sie haben diese grundlegende. Und der Platzhalter wird todo Titel sein. Das war's. Und ich sollte auch eine Schaltfläche hier haben, aber ich werde diese Schaltfläche an mein Eingabefeld anhängen. Die sind also irgendwie beide zusammengestapelt. Und ich könnte eine Eingabegruppe verwenden und dafür eine Klasse in Bootstrap anhängen. So div Klasse ist Eingabegruppe anhängen. Und drinnen werde ich einen Knopf haben. Diese Schaltfläche wird eine Art von Schaltfläche sein. Und wir werden eine Klassen von btn haben, btn skizzieren Erfolg, was gut genug ist. Es wird auch nur sagen, fügen Sie todo, das ist es. Also auf meiner Seite können Sie sehen, wie das aussieht. Ich habe eine todos-Überschrift To-Do-Titel, Eingabefeld und fügen Sie To-Do-Schaltfläche hinzu, die hier irgendwie an das Eingabefeld gebunden ist. Lassen Sie uns jetzt unsere erste Liste unserer To-Dos erstellen. Dafür. Direkt unter meiner Überschrift, Kopfzeile. Ich werde eine Liste von Aufgaben hinzufügen, die das div hinzufügen. Ich werde hier Ende der To-Dos hinzufügen. Und dieses erste div sollte der Container sein. Also Klasse wird Container sein. Dann hätte ich div id, Klasse der Zeile. Dann werde ich ein div mit der Klasse der Spalte sm zwei und Spalte md Baum haben , der gerade wieder Abstand ist, wie wir in unserem Header von To-Dos haben. Und noch ein div mit einer Klasse von Spalte sm acht und Spalte md sechs, was dasselbe ist, wie wir hier in unserem Header verwendet haben, oder? Wenn Sie also To-Dos-Listen hinzufügen möchten, fügen wir einfach eine Listengruppe von hier aus hinzu. So wird ungeordnete Liste eine Klasse von Listengruppe wie diese haben. Und drinnen sollte ich haben, in meinen Gegenständen drin sollte ich diese Art Box haben, die angekreuzt werden könnte , um unsere To-Dos und auch die Titel für unsere To-Dos zu beenden. Also werde ich ein Listenelement hinzufügen, sollte eine Klasse von Listengruppenelement wie folgt haben . Und drinnen, wie ich bereits erwähnt habe, werde ich meine Ikone haben. Also Klasse wird Font, Awesome, Font Awesome Square o. Ich werde das verwenden. Und unter meinem Symbol werde ich einen Titel haben. Was könnte gehen, um so zu gehen. Lassen Sie mich noch zwei weitere hinzufügen, damit wir etwas zeigen können. Also geh zu Walk, lerne Programmierung. Ich weiß es nicht. Trinken Sie drei Gallonen Wasser. - Ja. Okay, also jetzt können wir zu unserem Browser gehen und hier drinnen werden Sie die Liste sehen, richtig? Später. Wir werden in der Lage sein, diese anzukreuzen und diese in die fertigen To-Dos zu verschieben. Und das sollte hier auch dynamisch gerendert werden, nicht nur statisch wie das hier. Aber für jetzt lassen Sie uns eine weitere Liste unten hinzufügen für fertig zu denen. Also hier, wo ich das Ende der Liste von To-Dos habe, könnte ich das komplett kopieren. Fügen Sie es hier unten, und ich werde fertige To-Dos-Kommentar hinzufügen. Ende von, fertig To-Dos wie diese. Und ich werde einen Container haben, ich werde zu diesem Rand oben auf fünf hinzufügen, um es ein wenig von einer Spitze zu bewegen, Reihe, es ist ok. Dieser Abstand div hier ist in Ordnung. Dann habe ich mein Content-Div, was in Ordnung ist. Direkt über meiner ungeordneten Liste werde ich H4 mit der Klasse des Textcenters hinzufügen, um es in einer Mitte zu verschieben. Und es wird nur sagen, fertige To-Dos wie diese. Listengruppe könnte, ich weiß nicht, Gegenstände wie ein T-Shirt kaufen. Und das könnte in Ordnung sein. Ich könnte diese beiden Listenelemente entfernen, aber die Symbole selbst, ich werde kein leeres quadratisches Symbol hier haben. Ich werde Font-awesome haben, überprüfen Sie Quadrat o Symbol. Und nach meinem Titel hier, Ich werde ein Symbol auch genannt lassen Sie mich es hinzufügen. Ich kann Font Awesome Font Awesome Papierkorb sein, Symbol, Papierkorb, das ich verwenden könnte, die im Grunde verwendet werden, um unsere To-Dos zu löschen. Und ich werde das auf der rechten Seite schweben. Also werde ich die Float-rechte Klasse und den Rand oben zu 1 hinzufügen. Das ist es. Also jetzt auf meiner Seite können Sie diese fertige To-Dos Liste sehen, die ein T-Shirt kaufen ist, offensichtlich angekreuzt Quadrat hier und dieses Symbol hier, das später angeklickt werden könnte , die später angeklickt werden, um To-Dos zu löschen. So werden wir in der Lage sein, unsere Aufgaben zu bestätigen, um diese zu beenden, und sie werden sofort auf die untere Liste verschieben. Und auch wir werden in der Lage sein, un todo unsere To-Dos und sie werden auf die Liste über verschoben werden. So ist unsere To-Dos-Seite jetzt auch vollständig fertig, aber es ist nur UI-Teil. Wir müssten noch Funktionalität hinzufügen. Gute Sache ist, dass unsere ganze App immer noch gut auf Desktop und kleineren Geräten aussieht. Damit wir das überprüfen können. Ich könnte hier kleinere Geräte öffnen , und Sie können sehen, dass die To-Dos-App To-Dos-Seite gut aussieht. Über Seite auch, Homepage auch, richtig? Also geh zu denen. Großartig. Also lassen Sie uns jetzt unsere Firebase einrichten. 10. Firebase: Okay, jetzt ist es an der Zeit, ein wenig über Firebase zu sprechen und auch unsere Firebase für unsere Anwendung einzurichten. Firebase ist diese Entwicklungsplattform mit mehreren Funktionen, die wir für die Mobil- und Webentwicklung nutzen könnten. Es wird von Google entwickelt und hilft uns, unsere Anwendungen zu entwickeln und zu erweitern. Durch diesen Kurs werden wir die Firebase-Cloud-Datenbank verwenden. Mit Firebase brauchen Sie nicht nur eine Cloud-Datenbank zu verwenden, sondern es gibt auch eine Echtzeit-Datenbank. Firebase unterstützt auch andere Funktionen wie Authentifizierung, Speicher, Hosting, Funktionen, Analysen und vieles mehr. Am Ende dieses Kurses werden wir auch mit Firebase Hosting arbeiten und unsere App auf Firebase bereitstellen. Wenn Sie bereits über das Konto verfügen. Sie schauen auf den gleichen Bildschirm wie ich. Dies ist im Grunde die Konsole unserer Firebase und der Hauptteil für mich hier, wenn Sie nicht über das Konto gehen Sie auf den Prozess der Anmeldung, wie es ist nur die grundlegende und einfache. Also hier werden wir das neue Projekt hinzufügen. Also werde ich hier auf diesen großen Bildschirm klicken. Und wir müssen zuerst den Namen für unser Projekt erstellen. Also, das wäre, App zu tun. Firebase generiert am Ende auch ein paar Zeichen. So könnten wir eine eindeutige Kennung für unser Projekt haben. Also jetzt könnte ich weiter gehen und es wird uns zuerst über Google Analytics fragen. Wollen wir das in unser Projekt integrieren? Dafür gibt es keinen Grund. Da dieses Projekt keine Art von Analysen verwenden wird. Erstellen Sie also das Projekt. Firebase erstellt jetzt unser Projekt und richtet alles für uns ein. Sobald es fertig ist, werden wir in die Plattform umgeleitet, in das Dashboard unseres Projekts. Also ist unser neues Projekt bereit, damit wir auf Weiter klicken können, und es leitet uns in das Projekt selbst um. Das ist also unser Dashboard. Hier auf der Seite können Sie Funktionen sehen, die Firebase unterstützt, wie Authentifizierung, Cloud Firestore, Echtzeit-Datenbank, Speicher, Hosting, Funktionen, Machine Learning. Außerdem gibt es einen Test für die Gleichheit der Anwendung, vollständige Analyse und wie man die Anwendung mit verschiedenen Arten von Tests, Links usw. erweitert . Hier oben können Sie sehen, dass, um zu beginnen, indem Sie Firebase zu Ihrer App hinzufügen, wir dies zuerst tun Wenn Sie es hier nicht oben sehen, können Sie hier auf ein Zahnradsymbol klicken und zu den Projekteinstellungen gehen. Und Sie werden es hier in Ihrer App Abschnitt unten sehen. Also hoffe ich, dass Sie sich erinnern, dass ich zuerst erwähnt habe, dass wir Abhängigkeiten für Firebase installieren werden. Also müssen wir 2 Abhängigkeiten installieren. Also werde ich npm install, —save, firestore und angularfire2 ausführen . Fire Store ist die Abhängigkeiten, die uns mit der verbinden, zu unserer Firebase und Winkelfeuer 2 wird, helfen uns, damit zu arbeiten, so dass ich einfach drücken Enter und warten konnte, bis es installiert wird. Sobald das fertig ist, gehe ich zurück zu meiner Firebase-Ansicht hier. Und Sie können sehen, dass ich mein Projekt von Firebase zu iOS, Android, Unity und auch Web-Apps integrieren könnte . Also werde ich auf Web-Apps klicken und zuerst, was ich tun muss, ist die App zu registrieren. Also irgendwie den Namen für die App zu erstellen. Also werde ich einen To-Do-App-Namen erstellen , den wir später in unserem Angular-Projekt verwenden werden, um beide miteinander zu verbinden. Es fragt uns auch nach Firebase Hosting. Wir werden hier nicht integriert. Wir werden später integrieren, wenn wir... irgendwie manuell sind. So können Sie das gesamte Setup sehen. Also registrieren Sie App hier. Und es wird uns das SDK zurückgeben, das wir mit unserer App verbinden könnten. Ich könnte hier einfach weiter trösten. Und ich werde das SDK auch hier sehen. Diese Firebase-Konfiguration ist das Objekt, das wir irgendwie brauchen. Daher müssen wir das in unsere Anwendung integrieren, in unsere Umgebung unserer Anwendung. Und damit könnten wir mit anderen Dingen von Firebase arbeiten. Also, jetzt in meinem Terminal, werde ich zur Quelle gehen. Und hier umgebungen Ordner. Es gibt Umgebung Ts. Dies ist der Ordner zum Staging, zum Testen oder Codieren dieser Umgebungsdatei. Ich konnte hören, einfach Komma verwenden und dieses Firebase-Konfigurationsobjekt einfügen. Es wird nicht gleich sein, sondern zwei Punkte, und ich werde diese Endlinie hier entfernen. Und auch werde ich das schnell in Anführungszeichen fixieren, keine doppelten Anführungszeichen. Ich repariere nur für 1, 1 Sekunde, ich werde für alle reparieren, ja. Also durch diese, unsere Anwendung, wenn wir diesen API-Schlüssel oder die Domain, Datenbank-URL drücken, wird es wissen, wie man mit diesen arbeitet. Es gibt auch einen Speicher-Bucket, den wir verwenden könnten, eine Messaging- und App-ID, die wir von unserer Firebase verwenden könnten. Außerdem werde ich jetzt dieses Objekt kopieren und ich werde zur Environment Production Datei gehen und ich werde dasselbe dort einfügen. Meistens haben Sie etwas anderes als für Ihre Produktion und Ihre Staging, Ihre Datenbank wird anders sein, Ihre Testumgebung wird anders sein. Wahrscheinlich ein Repository, werden Sie andere haben, die auch. Also hier verwende ich nur dasselbe für den Zweck dieses Kurses, aber meistens wirst du es nicht so verwenden, oder? Also auch jetzt, da wir diese Konfiguration in unserer Anwendung haben , müssen wir immer noch die Abhängigkeiten einrichten, die wir installiert haben. Also für diese werde ich hier in das App- und App-Modul gehen. Also muss ich meine Abhängigkeiten hier importieren. Also werde ich Angular Feuermodul wie folgt importieren. Dieser wird automatisch aus Angular fire 2 importiert. Und dieses Modul, wird uns mit unserer Firebase verbinden. Also hier werde ich initialize app Methode verwenden, die dieses Modell hat. Und darin werde ich meine Konfiguration aus der Umgebungsdatei übergeben, die ich habe. Also muss ich auch diese Umgebungsdatei importieren. Also hier oben, werde ich die Umgebung aus dem Ordner dieser Umgebung und der Umgebungsdatei importieren . Also hier könnte ich jetzt meine Umgebung passieren. und in der Umgebung habe ich Firebase-Konfiguration hier, richtig? Dieses Objekt. Ja. Und damit übergeben wir irgendwie unsere Firebase-Konfiguration an dieses Winkelfeuer-Modul. Aber immer noch müssen wir irgendwie explizit sagen, sagen Sie es wie, welche App es ist. Also hier werde ich nur den Namen der App übergeben, was zu tun ist. So wie das. Und damit haben wir erfolgreich importiert, irgendwie verbunden unsere Firebase mit unserer Anwendung. Ich werde jetzt auch hier ein weiteres Modul wie Angular Fire Store-Modul wie dieses importieren . Dieses wird nicht automatisch importiert, also importiere ich es hier oben. Importieren Sie also Angular Firestore Modul, von, angularfire2/firestore, wie folgt. Damit haben wir unsere Anwendung vollständig mit unserer Firebase verbunden und können jetzt damit arbeiten. Zuerst gehen wir zurück in unsere Firebase und erstellen dort unsere Cloud-Datenbank. Wir sollten auch To-Dos-Sammlung in dieser Datenbank erstellen und irgendwie ein paar To-Dos dort erstellen. 11. Cloud – Todos: Jetzt bin ich wieder in meiner Firebase. Hier können Sie sehen, dass es sagt, dass ich eine Anwendung habe, die To-do-App, die korrekt ist. Ich möchte Cloud firestore jetzt für meine Anwendung erstellen, also werde ich hier auf Cloud firestore gehen. Und es wird mir im Grunde anbieten, diese Cloud Fire Store-Datenbank zu erstellen. So können Sie das Video über den Cloud Fire Store sehen, aber ich werde sofort gehen und meine Datenbank hier erstellen. Ich könnte einen für den Produktionsmodus und einen für den Testmodus erstellen. Der Testmodus ermöglicht es mir im Grunde, die Daten zu lesen, Daten zu schreiben und Daten daraus zu löschen. Nicht nur ich, sondern jeder, der eine Verbindung zu meiner App und meinem Produktionsmodus herstellt, wird den Benutzern, die diese Berechtigung haben, nur die Erlaubnis erteilen. Also werde ich das einfach öffnen, um vorerst nicht mit dem Produktionsmodus zu arbeiten. So ist der Testmodus in Ordnung. Dieser Testmodus, wir werden nur für 30 Tage dauern. Nach 30 Tagen wird es wieder in den gesperrten Modus gehen, um eine Art Produktion zu machen, also als nächstes. Und ich muss auch den Standort passieren. So Pass wie Europa West, das ist kein Problem für mich, wie ich bin in Europa und irgendwie auf Europa Ost, aber Europa West ist mehr, ist die einzige, die ich hier wählen könnte. Jetzt, da alles erstellt wurde, werde ich zu meinem Cloud Fire Store weitergeleitet. Zu meiner Datenbank.. Hier jetzt können Sie diese To-Do-App und diese Art von Charakteren sehen , die generiert wurden. Also, das ist richtig. Also, jetzt könnte ich meine Sammlung erstellen. Wenn ich hier auf Sammlung starten klicke, könnte ich die Sammlungs-ID übergeben. Diese ID wird nur der Name der Sammlung sein. Sie können das Beispiel hier sehen, Sammlungsbenutzer. Also, wenn wir die Anwendung erstellen, die Benutzer hält, würden wir Sammlung von Benutzern haben, aber wir schaffen Sammlung von To-Dos. Also werde ich hier To-Dos-Sammlung ID übergeben. Also, wenn ich jetzt als nächstes gehe, wird es mir auch angeboten, mein erstes Dokument hier hinzuzufügen. Also irgendwie zuerst Todo. Also für die Dokument-ID, werde ich diese ID automatisch generieren. Also diese ID wird von Firebase und Feld generiert werden, so dass die Felder, die wir, dass unsere Aufgaben haben, ist der Titel für todos, oder? Und der Wert könnte gehen, um so zu speichern. Ich werde ein weiteres Feld hinzufügen, das Feld ausgefüllt wird. Und dieses Feld ist nicht Typ von String, Typ Boolean, und es wird zunächst falsch sein. So sparen Sie. Jetzt können Sie sehen, dass ich meine To-Dos-Sammlung hier habe. Ich habe hier ein Dokument mit der ID und den Dokumentwerten hier auf der rechten Seite. Lassen Sie mich zwei weitere Dokumente erstellen. So wie Dokument automatisch generiert, wird der ID Feldtitel kaufen ein T-Shirt, zum Beispiel. Lassen Sie mich das s auch Großbuchstaben und das Add-Feld setzen. Jetzt werde ich das fertige Feld mit dem Typ des Boolean verwenden und es wird wahr sein. Sparen. Und jetzt noch ein Dokument, Autogenerieren ID. Feld, Titel. Typ ist string, was wahr ist und Wert für diesen Titel wird ein Auto waschen. Fügen Sie dann ein Feld hinzu. Abgeschlossen. Der Typ ist boolesch, der Wert ist false. Sparen. So haben wir jetzt wenigstens unsere Daten in unserer Datenbank. Also könnten wir jetzt im nächsten Video, ziehen Sie diese Daten in unsere Anwendung. 12. Angular und Injektionen: Also, um Daten aus Firebase zu ziehen und mit den Daten zu arbeiten, werden wir Angular-Dienst verwenden. Service in Angular ist die Art von Dateien, die wir verwenden könnten, um unsere Daten über Komponenten zu teilen. Wir werden jetzt eine erstellen und wir werden es verwenden, um mit unserer Firebase zu kommunizieren und diese Daten von firestore in unsere Komponenten zu unserer To-Dos-Komponente hier einfügen. Services sind injizierbare Funktionen, so dass sie in Komponenten injiziert werden könnten, Andere Dienste, Routenwächter, Direktiven, und deshalb verwenden wir sie für diese. Also, jetzt könnte ich hier laufen ng Dienst generieren. Ich werde Dienst im Dienstordner generieren und der Name wird To-Dos-Service sein. Ich werde auch das SkipTests-Flag hier verwenden, so dass es die Testdatei für diesen Dienst nicht generiert, da ich keine brauche. Jetzt, da ich damit fertig bin, könnte ich wieder in meinen Dienst gehen. Also in meinem Dienst hier, so werde ich zur Quell-App gehen und ich werde Dienste Ordner und To-Dos-Service zu dos Service generiert wird. Und das erste, was Sie sehen können, ist dieses injizierbare. Dieses injizierbare ist grundsätzlich in einer Wurzel zur Verfügung gestellt. Also was bedeutet, dass diese Dienste in der Wurzel unserer Anwendung zur Verfügung gestellt, so dass es durch alle Module und Komponenten geteilt werden kann , die wir haben. Um mit der Firebase und firestore zu arbeiten. Wir müssen auch die Module von Angular fire 2 hier importieren. Also an der Spitze werde ich import eingeben. Und jetzt Winkelfirestore, die direkt funktionieren und uns mit unserer Feuerstelle verbinden wird, und dann Angular Feuerladen Sammlung, die im Grunde mit unserer Sammlung von To-Dos und Winkelfeuerladen Dokument funktionieren wird , , die mit jedem Dokument dieser Sammlung funktionieren wird. Und ich werde das von Winkelfeuer zu/Feuerladen so importieren. Also jetzt werde ich zuerst meinen Winkelfeuerladen benutzen. Hier im Konstruktor muss ich diesen eckigen Feuerladen passieren. Also werde ich private fs für Feuerladen verwenden. Und ich werde es verwenden, um auf den Typ von Angular Firestore gesetzt zu werden. Damit können wir mit dem Feuerladen mit diesem fs wahr durch unseren Service arbeiten. Und damit konnten wir unsere Sammlung auswählen und ein paar andere Dinge erledigen. Und jetzt im nächsten Video, werden wir diese verwenden und mit unserem Firestore arbeiten, um unsere Daten zurück zu bekommen. 13. Todos von Firebase bekommen: Also planen Sie hier, unsere firestore angular firestore in meinem Dienst zu verwenden und meine Daten aus meiner Cloud firestore, die ich habe, zurückzuholen. Also werde ich zuerst ein paar Variablen erstellen. So To-Dos-Sammlung, wie wir die Sammlung von zu dos ziehen, zu diesen Sammlungen wird die Art von Angular firestore Sammlung wie folgt sein. Und diese firestore Sammlung wird die Art von To-Do haben. Wir haben diesen Typ immer noch nicht erstellt. Diese Aufgabe wird also das Modell unserer Daten sein. Also werde ich dieses Modell jetzt erstellen. Ich werde hier in meiner App gehen und einen Ordner darauf erstellen, genannt Modelle. Und in Modellen werde ich to-Do erstellen. modal. ts. Also, jetzt in dieser Datei, könnte ich meine Schnittstelle von To-Do exportieren, die ein Modell für meine Daten sein wird. Und dieses Modell für meine Daten wird eine ID haben. Aber diese ID wird irgendwie nicht erforderlich sein. Wir werden es zurückbekommen, aber wir müssen die ID nicht wirklich senden, um die Daten selbst zu erstellen. Also ID wird Typ der Zeichenfolge sein. Dann wird Titel, wie Sie wissen, Typ der Zeichenfolge sein. Und auch werden wir abgeschlossen haben, was Art von boolean ist. So könnte ich jetzt mein To-Do-Modell in meinen Dienst hier importieren. Also zu tun, ich werde es an der Spitze importieren, hier. Und jetzt könnte ich dieses Modell verwenden, um meine Daten über den Service zu modellieren. Da muss ich Dos Sammlung. Ich werde jetzt auch erstellen, um doc zu tun. Um doc zu tun, wird im Grunde eine Art von Angular Fire Store Dokument sein, und es wird auch die Art von zu tun sein. Dies wäre jedes einzelne Dokument, an dem wir arbeiten werden, um es zu bearbeiten, gelöscht oder in irgendeiner Weise aktualisiert, richtig? Und auch werde ich tun müssen, mein ganzes Array von To-Dos meine Hauptdaten. Also To-Dos, was die Art von Observable sein wird , die von RxJs hier oben importiert werden muss. Das Beobachtbare, ich werde in einer Sekunde darüber sprechen. Das Observable wird auch die Art von zu tun haben, aber es wird sein, Array als im Grunde zu tun, es, dies zu dos wird das Array unserer To-Dos halten. Also mein Beobachtbares hier, das Beobachtbare ist im Grunde der Wrapper für meine Daten. Also irgendwie wickle ich meine To-do-Daten in Dos-Daten ein. Und auf diese, könnte ich verschiedene Methoden verwenden, die Sie in einer Sekunde sehen werden. Aber auch ich könnte diese Daten abonnieren, die Daten korrekt erhalten und als Angular mit der Firebase wird mir die Art von beobachtbaren Daten zurückgeben. Ich werde, es wird viel einfacher für mich sein, mit denen zu arbeiten und den Griff diejenigen auf meiner Seite. Also, jetzt im Konstruktor hier, könnte ich meine Daten setzen , Daten hier im Grunde setzen. Also werde ich diese. to-Dos-Sammlung verwenden, um dieser Art dies gleich zu sein . fs, die ich erwähnt habe, fs so. Und auf FS habe ich eine Methode namens Sammlung. Diese Sammlungsmethode wird im Grunde die Sammlung ziehen, die ich auf meiner Firebase habe. Also die Sammlung ist der Name von To-Dos, wie ich hoffe, dass Sie sich daran erinnern. Jetzt, da ich meine Sammlung in meinem Dienst habe, kann ich die Daten, jedes Dokument aus der Sammlung selbst abrufen . Ich muss die Daten in meinem To-Do speichern. Also werde ich das setzen. To-Dos gleich sein. Zu diesem. To-Dos-Sammlung. Diese Kollektion, die ich hier vom Feuerladen gesetzt habe. Und ich werde. Snapshot-Änderungen verwenden. Snapshot-Änderungen hierbei. Grundsätzlich könnte ich nicht nur Snapshot-Änderungen, sondern auch Wertänderungen verwenden . Wertänderungen werden nur die Daten an mich zurückgeben und es wird nur diese Dokumente Daten an mich zurückgeben, richtig? Ich musste keine zusätzliche Funktionalität übergeben, um Daten an mich zurückzugeben, aber ich bekomme die ID nicht mit Wertänderungen. Um die ID zu erhalten, muss ich einen Snapshot-Änderungen verwenden und einige zusätzliche Funktionen hinzufügen. Wertänderungen geben irgendwie nur die Daten von dieser rechten Seite zurück. Und Sie können sehen, dass die ID des Dokuments nicht in der, der rechten Seite Ihres Bildschirms, oder? Es ist also irgendwie in dieser Hauptdokumentebene. Und um diese ID zurückzugeben, muss ich auch die Snapshot-Änderungen verwenden um tief in das Dokument selbst zu schauen und diese ID auch an das Dokument selbst zu binden und dann das ganze Dokument zurückzugeben und es in meinem Array zu speichern . Es klingt vielleicht kompliziert, aber es ist nicht offensichtlich. Also, hier könnte ich jetzt eine Pipe-Methode verwenden , die es mir ermöglicht, an diese Snapshot-Änderungen zu binden. Ein paar Methoden. Ich werde nicht benutzen, ein paar von denen, die ich nur eins benutzen werde. Ich werde die Map-Methode hier verwenden. Also Karte selbst muss importiert werden. Also werde ich Karte von Rxjs/Operatoren importieren. So können Sie sehen, dass ich, wenn meine Daten beobachtbar sind, mit einer Karte darauf arbeiten kann. Also diese Karte gibt mir einige Änderungen meiner Daten von einem Snapshot Änderungen, richtig? Also, da ich einige Änderungen habe, werde ich hier eine Methode verwenden, Pfeilfunktion hier, falsch eingegeben, ok. Und hier werde ich meine Änderungen zurückgeben, aber ich werde auch Karte auf diese verwenden. Ich muss diese Änderungen abbilden, um die Daten daraus zu sehen. Also, wenn ich auf diese zuordne, werde ich ein Dokument selbst haben. Also Dokument, ich könnte ein x hier verwenden. Es ist kein Problem. Also, jetzt, da ich dieses Dokument auf eigene Faust habe, Lassen Sie mich hier geschlossenes Zeichen verwenden. Jetzt, da ich dieses Dokument alleine habe, könnte ich dieses Dokument durchlaufen und es den Daten entsprechen, die ich brauche. Also werde ich diese Datenkonst hier erstellen. Und setzen Sie es gleich dem dieses Dokument. und dieses Dokument wird die Nutzlast auf sich selbst haben. So Nutzlast. wieder, und das Dokument jetzt auf seine eigenen und. Daten. Das bedeutet also im Grunde, dass ich diese Daten aus einem Dokument als To-Do-Daten zurückgeben werde , um das Modell von To-Do zu sein. Also im Grunde werden diese Daten jetzt gleich der rechten Seite in meinem Cloud-Firestore sein. Also ziehe ich die richtigen Daten zurück, aber ich habe immer noch nicht die ID, um die ID zu bekommen. Jetzt, da ich diese Daten habe, verwenden wir Daten. ID hier gleich dem x zu sein. Wieder zu meinem Dokument Nutzlast. doc wie folgt. Und jetzt. Hier möchte ich nur die Daten haben, aber ich werde auch die ID haben, die Sie hier sehen können. So. ID wie diese. Und jetzt, da ich diese Daten vollständig habe, werde ich nur Daten zurückgeben. Und damit werden meine Aufgaben korrekte Daten haben, die den ID-Titel und die abgeschlossenen Werte enthalten. Und da ich in meiner Komponente dazu kommen muss, werde ich die Methode jetzt nach meinem Konstruktor hier unten erstellen, ich werde den Kommentar dazu setzen, zu dos zu gelangen, und ich werde eine Methode für get to dos erstellen. Hier. Ich werde das einfach zurückgeben. Also werde ich später diese Methode in meiner Komponente verwenden. Also lasst uns jetzt in unsere Komponente gehen. Hier in To-Dos werde ich in die Komponente selbst gehen. Und vor allem, da ich mit dem Dienst in meiner Komponente arbeiten werde, sollte ich diesen Dienst importieren. Also werde ich in meinem Konstruktor den privaten to-Dos-Service verwenden , um eine Art von To-Dos-Service wie diesen zu sein. Ich werde es automatisch an der Spitze importieren, da mein Dienst injizierbare Funktion ist, ich kann es importieren, es grundsätzlich in Komponenten injizieren. Also hier jetzt werde ich meine get to dos Methode haben. Ich komme zu Dos. Es wird die Methode sein, die meinen To-Dos-Service damit verwenden wird . Um Service wie diesen und weiter zum Dos-Service zu dosen, habe ich meine Methode get to dos so genannt. Und da meine Daten beobachtbare Daten sind, könnte ich sie abonnieren, also abonnieren Sie so. Und ich werde eine Antwort von meinem für meine Daten erhalten. Und das ist Antwort wird die Art der Aufgabe sein, aber Array zu tun. Also werde ich jetzt die Pfeilmethode hier verwenden, und Sie können die rote Linie hier sehen. Ich habe mein To-Do-Modell hier nicht importiert, also werde ich es einfach oben importieren. Das ist Eichenholz. Und hier, jetzt, wo ich mein get to dos abonniert habe, konnte ich mich trösten. Loggen Sie sich auf Dos, Antwort wie diese. Mal sehen, was wir zurückbekommen. Ich werde das kopieren, zur Dos-Methode vollständig kommen und es einfach hier einfügen. Sobald diese Komponente geladen ist, sobald wir auf der To-Dos-Seite sind, wird diese NgonInit ausgeführt, und es wird diese get to do ausführen. Diese get to dos wird die get to dos Methode in meinem todos-Dienst ausführen. Und das got to dos wird mir diese Daten zurückgeben, die ich zuvor aus meiner To-Dos-Sammlung von meiner Angular Firestore erhalten habe. Hier können Sie sehen, wie alles miteinander verbunden ist. Also, jetzt, wo ich alles hier habe, könnte ich clear hier verwenden und ng servieren auf meiner Seite laufen und meine App lokal ausführen, um alles zu überprüfen. Nun, da mein Server betriebsbereit ist, kann ich diesen lokalen Host 4200 kopieren und in meinen Browser zurückkehren, diesen lokalen Host hier einfügen. By the way, wenn Sie ein Fan von Naruto sind, Dies ist Schmerz im Grunde, und ich bin wieder in meiner App. Also werde ich meine App hier überprüfen. Ich werde hier zur Konsole gehen, und ich werde in todos Seite gehen, sobald ich dort bin. Sie können dieses Protokoll von To-Dos sehen. Und da sind unsere Daten. Wir haben drei bis Dos. Jede der Daten hat die ID, den Titel und die abgeschlossenen Werte. Nun, da wir die Daten erfolgreich aus unserem Feuerladen, Wolkenfeuerladen, abgerufen haben, können wir Datendaten hier in unseren Listen, auf unserer To-Dos-Seite binden . 14. Todos in der Web-App: Jetzt ist es an der Zeit, unsere Daten aus unserer To-Dos-Komponente zu rendern. Also bekommen wir die Daten hier. Ich werde hier eine Variable von To-Dos erstellen, die der Typ des To-do-Arrays wie folgt sein wird. Und jetzt hier in get to dos, werde ich das benutzen. zu dos und binden es an die Antwort, die wir zurück bekommen. Ich werde auch eine fertig zu dos haben. Also beenden Sie Dos, die wieder sein wird, der Typ des To-do-Arrays. Und es wird dasselbe sein. dies. fertig zu dos gleich Antwort. Ja, aber du erinnerst dich, wie unsere Aufgaben zwei verschiedene Listen haben werden. Eine ist für fertig zu dos und die zweite ist nur für todos, die noch nicht fertig sind. Also lassen Sie uns unsere Daten sofort hier filtern. Also meine Antwort für meine Aufgaben, ich habe einen Filter auf diese verwendet und ich werde von jedem zu Dos zurückbekommen , die ich filtere. Also werde ich hier nur das To-do zurückkehren. abgeschlossen, aber das ist nicht abgeschlossen, was zu tun hat abgeschlossen, als falsch abgeschlossen. Also im Grunde jeder zu tun, das nicht abgeschlossen ist, wird in Dos-Array sein. Ich werde dies jetzt diesen Filter vollständig kopieren und jedes Todo , das abgeschlossen ist, wird im fertigen To-Dos-Array sein. Also jetzt in meinem HTML von meinen To-Dos, kann ich damit arbeiten. Ich werde hier in meiner Liste der To-Dos, Ich werde diese beiden Listenelemente löschen. Und hier beim Listeneintrag werde ich Direktive ngfor verwenden, die im Grunde für meine Aufgaben eine Schleife ist. Also werde ich durch Todos schleifen und ich werde ein let todo von todos verwenden. Also, während ich mich durch To-Dos schleife, gibt es mir jedes To-Do zurück. Also hier kann ich anstelle von gehen zu gehen, ich könnte hier todo verwenden. Titel. Ja. Also wird es im Grunde To-Dos durchlaufen und es wird so viele Listenelemente rendern, wie ich soviel wie Todos brauche, so viel Todos wie ich. Also werde ich das kopieren wie folgt verwenden. Lassen Sie uns das nicht tun, da ich ein paar andere Symbole hier habe. Also werde ich hier wieder ngfor Schleife verwenden. Und ich werde das binden, um todo von finishedTodos jetzt zu lassen. Und das ist fertig. Wir werden im Grunde das gleiche tun, was ich machen werde. Titel hier. Und damit sind wir fertig. Wenn ich zu meiner Anwendung zurückgehe, können Sie sehen, dass ich jetzt zwei zu Dos habe, die nicht an der Spitze fertig sind und eine zu tun, die unten abgeschlossen ist. So sind die Daten da und es wird erfolgreich auf dem Bildschirm gerendert. Ich kann Daten immer noch nicht aktualisieren oder die Daten löschen. Ich kann nicht einmal Daten hinzufügen, neue Aufgaben in meiner To-Do-Liste hinzufügen. Also lassen Sie uns zuerst mit dem Hinzufügen der Daten arbeiten. 15. Funktionalität zum Hinzufügen von Todos: Um unsere zu Dos hinzuzufügen, verwenden wir Abschnitt oben auf unserer To-Dos-Seite. Also irgendwie hören Sie in der Kopfzeile, wir werden den to do Titel hier in einem Eingabefeld hinzufügen und auf einen Klick auf Add To-Do-Schaltfläche, werden wir To-Do in unser Array unten unter dieser Liste hinzufügen. Und es wird auch in unserer Datenbank gespeichert. Also, um mit dem Hinzufügen von To-Dos zu arbeiten, werde ich hier in die To-Dos-Komponente gehen. Und unter meinen get to-dos, werde ich eine Methode hinzufügen zu tun, so hinzufügen, wird im Grunde eine Methode sein. Und es sollte einen Titel aus diesem Eingabefeld erhalten. Der Titel wird also Typ der Zeichenfolge sein. Also, jetzt gehen wir in unserem HTML und übergeben Sie diesen Titel. Also hier in der Kopfzeile haben wir dieses Eingabefeld und eine Schaltfläche. So könnte ich hier Click-Ereignis verwenden. Und auf einen Klick möchte ich To-Do-Methode zu dieser Aufgabe hinzufügen. Ich sollte mir einen Titel geben. Also sollte ich den Titel von meinem Eingabefeld hier bekommen. Um diesen Titel zu erhalten, werde ich eine lokale Referenz von To-Do-Titel verwenden. Um eine lokale Referenz zu setzen, verwenden wir nur einen Hash. Und dann, um Titel mit dieser lokalen Referenz zu tun, haben wir einen Verweis auf die gesamte Eingabe. Also hier kann ich jetzt einen To-Do-Titel wie diesen übergeben, . und Wert darauf. Auch am Ende hier werde ich ein; verwenden und diesen To-Do-Titel setzen . Wert gleich einer leeren Zeichenfolge sein. Was bedeutet, lassen Sie mich das auch ein bisschen umgestalten. Damit du alles sehen kannst. Das bedeutet im Grunde, sobald ich auf diese Schaltfläche klicke, wird es einen Titel hinzufügen, im Grunde To-Do hinzufügen, aber auch nachdem diese Methode beendet ist. Dieses To-Do-Titel-Eingabefeld, wird seinen Wert in die leere Zeichenfolge zurückgeben. Es wird wieder leer sein, so dass wir eine weitere hinzufügen können. Also jetzt in meinen To-Dos hier. In Add-to-do sollte ich zuerst überprüfen, ob dieser Titel leer ist. Wenn dieser Titel leer ist, sollte ich einfach verhindern, dass mein Code ausgeführt wird. Also werde ich rennen. Wenn Titel gleich einer leeren Zeichenfolge ist, werde ich hier einfach zurückkehren. Also alles andere, dass, wenn der Titel korrekt ist, dieser Code unten sein wird. Nun, um mein To-Do hinzuzufügen, sollte ich auch dieses To-Do mit diesem Titel erstellen. Also werde ich eine Konst von To-Do erstellen, um gleich Objekten wie diesem zu sein . Es wird einen Titel haben und diese const to-do sollte eine Art von To-Do wie folgt sein. Und es wird einen Titel haben, der Titel von oben ist. Und es wird auch abgeschlossen sein, was falsch ist. Sobald wir hinzufügen, dass zu tun, wird es immer falsch sein, da es immer noch nicht fertig ist. Und schließlich, sobald ich das erstellt habe, konnte ich jetzt meinen Dienst nutzen. Also das. To-Dos-Service. und ich habe nicht immer noch diese Add-to-do-Methode hier, aber ich werde es verwenden, füge hinzu, um so zu tun. Und darin werde ich gehen, um von hier zu tun, dass ich geschaffen habe. Lassen Sie uns nun in unseren Dienst gehen und diese AddToDo Methode erstellen. Also in Dienstleistungen hier, um Service zu tun, direkt unter meinem get to dos werde ich hinzufügen To-Dos und fügen To-Do, Singular. Und ich werde eine Methode hinzufügen todo erstellen, die bekommen, um sich selbst zu tun, was eine Art von To-Do ist. Und das wird eine Methode sein. Wie könnte ich dieses Todo in meine Firebase hinzufügen, in meine Sammlung? Also werde ich dies einfach verwenden. to-dos Sammlung hier und ich werde verwenden. Es gibt Add-Methode darauf. Ich könnte Add-Methode verwenden und ich könnte einfach todo hier übergeben. Also, jetzt werde ich hier meinen Wolkenfeuerladen öffnen, und Sie werden meine Aufgaben sehen, die ich vorerst habe. Ich gehe zurück zu meiner App und ich werde ein wenig aktualisieren. Lassen Sie uns ein neues To-Do hinzufügen. Also zu tun, wird zu einer Klasse gehen, drücken Sie die Eingabetaste. Da ist es. Es ist unten. Wenn ich meine Cloud firestore überprüfe, Ich könnte einen gehen zu einer Klasse als eine neue zu tun sehen. So. Jetzt, wenn ich die Seite aktualisiere, wird es mir immer wieder geben, dass zu tun, wie es erfolgreich in unserer Datenbank gespeichert wird. Lassen Sie uns jetzt sehen, wie wir unsere fertigen To-Dos auf einem Klick auf ein Papierkorb-Symbol hier löschen können, rechts. 16. Todos löschen: Im Idealfall sollte das Löschen unserer Aufgaben so funktionieren. Sobald ich auf dieses Papierkorb-Symbol klicke, sollte ich die Daten von dieser Aufgabe übergeben. Und basierend auf diesen Daten werde ich sie später löschen und aus meiner Datenbank entfernen. Diese Daten sollten ID zu tun sein, da das immer irgendwie eindeutig ist. Also jetzt in meinem todos HTML, Ich könnte gehen, um zu dos beenden. Und auf einem Klick auf dieses Papierkorb-Symbol, könnte ich klicken, klicken Sie auf Ereignis, richtig? Und ich werde eine Methode namens delete todo ausführen. Dazu sollte ich mein To-Do selbst übergeben. Ich habe diesen Löschvorgang immer noch nicht erstellt. Also werde ich zu meiner To-Dos-Komponente gehen, und hier unten werde ich löschen ausführen, um hier zu tun. Und ich werde das zu tun bekommen, was eine Art von Aufgaben ist. Und jetzt könnte ich meine Daten entfernen. Hier in meiner Komponente ist dies keine Art von To-Dos, aber um jetzt in meiner Komponente hier zu tun, werde ich mich wieder an den Service wenden. Also dies. To-Dos-Service, . löschen zu tun. Also habe ich das immer noch nicht zu tun. Also werde ich einfach gehen, um meine Löschung zu tun, da ich es immer noch nicht habe. Also lasst uns in Dienst gehen und einen erstellen. Also nach meinem Hinzufügen in meinem Dienst, werde ich einen Löschvorgang erstellen, um hier zu tun, und ich werde dieses Löschen verwenden, um das zu tun, das ich kopiert habe. Und ich werde hier zu tun bekommen, was eine Art von To-Do ist. Und hier könnte ich jetzt Logik ausführen, um meine Aufgabe zu löschen. Da ich meine Aufgabe durch eine ID löschen muss, werde ich mich in Verbindung setzen, ich werde dies jetzt verwenden, um Dokumente zu machen. Also hier werde ich dies verwenden., um Dokument zu tun, das diesem gleich sein wird, . Feuerladen., auf Feuerladen. Ich habe Dokumentenmethode. Also wird diese Dokumentmethode Sammlung kontaktieren, die ich basierend auf einer ID des Dokuments wünschen , und es wird mir dieses Dokument vollständig zurückgeben. Also hier werde ich ein Backticks verwenden und Sammlungsname ist todos/. Und ich werde hier einen Platzhalter von JavaScript verwenden, und ich werde dazu verwenden, dass ich hier .id so übergeben habe. Also, jetzt wird mein To-Do-Dokument erkannt, richtig? Also, jetzt könnte ich einfach diese.todo Dokument Dot verwenden , und darauf habe ich eine Löschmethode und das sollte es sein. Also bin ich in meiner To-Dos-Seite, Ich habe ein kaufen ein T-Shirt fertig zu tun. Also, wenn ich hier ein T-Shirt kaufen, und wenn ich auf meine Seite gehen würde und ich auf mein Symbol klicken, können Sie sehen, dass, diese Art von bereits verschwunden. Also, wenn ich die Seite aktualisiere, ist sie nicht da. Auch in meiner Datenbank ist es nicht da. Dies ist eine Wäsche ein Auto. Dieser ist zum Speichern gehen und das geht zu einer Klasse. Und damit haben wir hier nur noch eine weitere Funktionalität zu tun, und das wären unsere Updates. Also, sobald ich auf diese leere Box klicke, wird es meine Aufgaben beenden und diese in fertige todos Array verschieben. 17. Todos aktualisieren: Also werde ich hier wieder in meine todos HTML gehen. Und sobald ich hier auf mein Symbol des Quadrats klicke, werde ich einen Click-Ereignis-Listener ausführen. Dieser Ereignis-Listener wird eine Methode der Bearbeitung ausführen, und es wird übergeben, um es zu tun. Ich sollte jetzt eine diese Methode in meiner Komponente erstellen. Also, hier, bearbeiten, ist es immer von meinem HTML zu tun, was Art von To-Do ist. Wieder schreibe ich an Dos, um so zu tun. Und jetzt könnte ich seinen vollendeten Wert umkehren. So zu tun, Punkt abgeschlossen wird gleich umgekehrt zu tun, Punkt, so abgeschlossen. Übrigens werde ich in meinen HTML zurückkehren. Ich sollte auch in der Lage sein, auf Fertig zu klicken, um zu doshere. 00:00:49 .940 —> 00:00:54 .185 Und verschieben Sie sie zurück in unvollendete to dos. Also habe ich meine Logik, um das umzukehren. Jetzt ist es an der Zeit, wieder meinen Service zu kontaktieren. Also dieser Dot to Dos Service Dot bearbeiten zu tun, was ich immer noch nicht erstellt habe. Und ich werde das übergeben, um diese Methode zu tun. Also lassen Sie uns diese Methode erstellen. Hier werde ich Edit todo Kommentar verwenden. Methode wird Edit genannt, um es zu tun, wird todo von meiner Komponente. Und diese zu tun, wird eine Art von Aufgaben sein. Und drinnen werde ich dasselbe verwenden wie in meinem Löschen. Also könnte ich das hier von oben kopieren. Also sollte ich mein To-Do-Dokument aus meiner Feuerladen To-Dos-Sammlung holen. Und ich bekomme das basierend auf der ID des Todo. Aber jetzt, anstatt To-Do zu löschen, sollte ich hier passieren, um Document Dot Update zu tun, und ich sollte meine neue hier zu tun übergeben. Da ich in meiner Komponente bin, ändere ich die Daten, um die Daten umzukehren. In meinem Dienst schicke ich das irgendwie mit umgekehrten Daten zu tun. So wird es falsche Art und Weise in meiner Datenbank speichern. Also, wenn ich jetzt einen Bildschirm aktualisiere und ich versucht habe, das zu testen, gehen Sie zu einem Store-Klick. Es ist in meinem fertig zu Dos. Wenn ich die Seite aktualisiere, ist es immer noch in meinem fertigen zu denen. Wenn ich meine gehen zu einem Geschäft, und hier ist es, gehen Sie zu einem Geschäft hat jetzt einen Satz auf wahr abgeschlossen. Also funktioniert es im Grunde. Also, wenn ich die Seite erneut aktualisiere, wird sie immer ziehen, die als echter Wert als Endwert gespeichert werden. Also könnte ich wieder setzen, ein Auto als fertig waschen, zurück gehen, finden, dass Ihr Auto waschen. Sie können sehen, dass es wahr ist. Ich könnte zurückgehen und dieses Ziel setzen, um wieder auf Un To-Do-Liste zu speichern. Also ist es jetzt hier, richtig? Also zurück, gehen Sie zu speichern hat von falsch abgeschlossen. Also funktioniert alles gut. 18. Was wir gelernt haben, und Tests wurden: Also haben wir unsere Anwendung jetzt vollständig erstellt. Wir haben unsere Komponenten hier. Wir haben ein Routing, das vollständig integriert ist. Wir haben eine Daten von unserer Firebase, die funktioniert. Wir könnten neue Daten hinzufügen, neue Daten hinzufügen, hinzufügen, es wird hinzugefügt, wir könnten unsere Aufgabe abschließen. Wir könnten unsere Aufgabe löschen. Wir könnten zurück nach Hause gehen, zu To-Dos gehen, unser Routing funktioniert voll und unsere Todo-App. Wenn ich zur Projektübersicht gehe, ist es vollständig auf einer Firebase eingerichtet und es ist vollständig mit unserer to do App auf unserer Angular-Seite verbunden. Nun, es gibt nur eine Sache zu beenden. Wir können jetzt auf Firebase Hosting arbeiten und unsere, unsere gesamte App auf Firebase Hosting schieben und live sehen. 19. Wie man App auf to bereitstellt?: Also, um mit unserem Hosting jetzt zu beginnen, klicke ich hier auf loszulegen. Ich bin übrigens, im Hosting-Bereich meiner Firebase. Also fangen Sie an. Also hier ist es. Wir müssen zuerst global Firebase-Tools installieren. Also kann ich das einfach kopieren, schöne Animation hier. Und ich könnte in meine Konsole gehen. Also, in meiner Konsole, lassen Sie es mir ein wenig klar, hier. Ich könnte global Firebase-Tools installieren. Ich habe das übrigens bereits installiert, aber ich werde es zusammen mit Ihnen installieren, damit Sie das gesamte Verfahren der Bereitstellung auf einer Firebase sehen können. Sobald dies installiert ist, kann ich zurück zu meinem Firebase Hosting hier, und ich könnte zum nächsten Schritt gehen. Also zuerst sollten wir uns mit unserem Firebase-Konto anmelden. Also lassen Sie uns diesen Firebase-Login hier kopieren und ihn so einfügen. Ich sollte bereits eingeloggt sein, also bin ich bereits eingeloggt, aber ich bin mit einem anderen Konto eingeloggt. Also werde ich mich wie diese Firebase Logout ausloggen, und ich werde mich einloggen, einloggen, wieder einloggen. Also wird es mich ein paar Dinge fragen. Ich werde die einfach zulassen. Es wird mich sofort in die Anmeldung eines Google-Kontos bewegen. Also melde ich mich hier mit meiner E-Mail an. Es wird mich um ein paar Zugriffe bitten. Ich werde das geben und Firebase CLI erfolgreich anmelden, wie Sie sehen können. Also, als nächstes könnte ich Firebase darin verwenden. Also muss ich meine Anwendung als Anwendung auf meiner Firebase initialisieren. Also hier lassen Sie mich das auch ein bisschen klären. Also Firebase initialisieren und es wird nur die gesamte App initialisieren. Zunächst wird es mich fragen, ob ich bereit bin, fortzufahren. Ja, bin ich. Hier werde ich wählen, welche Zukunft ich von Firebase verwenden möchte und das Hosting ist. Also bin ich gekommen, um Raum zu hosten und betreten. Daher wird es mich bitten, ein neues Projekt zu erstellen oder das vorhandene zu verwenden. Also werde ich bestehendes Projekt verwenden, Es wird mir mein Projekt zurückbringen. Also werde ich hier mein To-Do-App-Projekt verwenden, so. Also müssen wir passieren, was wollen wir als unser öffentliches Verzeichnis verwenden? Also hier werden wir den dist Ordner wie folgt verwenden. Und wie wir unsere Anwendung in dist Ordner erstellen, so drücken Sie Enter. Es wird uns fragen, ob wir diese Anwendung als eine einseitige Anwendung konfigurieren möchten, Angular erstellt die einseitigen Anwendungen, also ja, für diese auch, und Sie können sehen, dass Firebase fertig ist, wie es abgeschlossen ist. Also, jetzt könnten wir alles andere aufstellen. Damit können wir Firebase Deploy ausführen, aber vorher müssen wir unser Projekt erstellen. Also für ein Gebäude werde ich zuerst zu Angular JSON hier gehen, Sie können sehen, dass der Ausgabepfad eines Gebäudes eines Builders dist/to-do-App sein wird. Und du erinnerst dich daran, dass wir daran vorbei wie der Dist Ordner. Also 1 Sekunde, um zu überprüfen, ob ich alles richtig eingerichtet habe, ja. Und jetzt könnten wir unsere Anwendung erstellen. Also jetzt hier könnte ich das ein wenig löschen und ng build —prod verwenden. Sie müssen —prod nicht verwenden, aber ich werde meine Anwendung für die Produktionsumgebung erstellen, da es sich um dieselbe Umgebung wie meine Stagingumgebung, meine Test- und Codierungsumgebung handelt. Also dieser gebaut wird ein paar Minuten dauern, aber, Was tut? Es kompiliert alles, was wir haben. Angular selbst, es kompiliert alles, was wir haben, und es wird die ganze Anwendung für uns bauen , um als JavaScript-Anwendung verwendet zu werden. Grundsätzlich, wie Sie wissen, dass Angular ein JavaScript-Framework ist. Sobald das fertig ist, komme ich zurück. Also ist alles fertig. Wir haben unsere JavaScript-Dateien, die Bundles aus unserer eckigen Anwendung sind. Und jetzt könnten wir nur Firebase ausführen, wie diese bereitstellen. Es wird einige Zeit dauern, aber es wird unsere Anwendung greifen und vollständig auf unser Hosting bereitgestellt , das wir bereits eingerichtet haben. Es ist fertig. Jetzt könnten wir zu unserer Hosting-URL gehen. Also werde ich Control drücken und hier klicken, und es sollte mich zu Hosting-URL führen. Hier können Sie bereits sehen, dass ich gerade auf meiner Hosting-URL bin. Ich bin nicht auf meinem lokalen Gastgeber, oder? Also könnte ich zu ungefähr gehen, das ist, wofür wir haben. Das ist zu Dos. Und Sie können sehen, dass unser Hosting vollständig verbunden ist. So haben wir irgendwie unsere Anwendung auf das Hosting von Firebase bereitgestellt und es funktioniert voll mit Firebase Cloud-Datenbank. Also hier jetzt, da wir mit Hosting fertig sind, konnten wir einfach zu einer Konsole weitermachen und jetzt auf einem Hosting, wir werden diesen Setup-Teil nicht haben, aber wir werden unser Hosting selbst haben. So können Sie sehen, wie ich verbunden bin, current_user. Es gibt auch Anwendung, die besucht werden sollte, das ist es im Grunde, dass wir bereits haben. Und das wäre es. Hier können Sie Ihre benutzerdefinierte Domain hinzufügen, wenn Sie eine haben und damit arbeiten. ein bisschen auch. 20. Vielen Dank und auf Wiederstand: Also hier sind wir. Herzlichen Glückwunsch an Sie. Sie werden Ihre To-Do-App erfolgreich mit Firebase und Angular erstellt . Sie so, wie können Sie Angular, seine Komponenten, Dienste und Routing verwenden. Sie richten auch Ihren Firebase, Cloud Fire Store für Ihre Datenbank auf Firebase ein. Sie haben dort Ihre Todos-Sammlung erstellt. Sie haben diese Todos in Ihrer App gerendert. Und auch Sie waren in der Lage, Daten dieser todos hinzuzufügen, zu löschen und zu ändern. Und schließlich waren Sie in der Lage, Ihre gesamte App auf Firebase Hosting bereitzustellen. Wichtiger Hinweis, in Zukunft können Sie mehr erwarten, lassen Sie uns Kurse in dieser Serie von mir codieren. Also seien Sie bereit, sobald Sie einen anderen live bekommen. Für diesen könnten Sie mich wissen lassen, was Ihnen gefallen hat und was Ihnen durch diesen Kurs nicht gefallen hat. Du könntest sogar deine ehrliche Bewertung für diesen Kurs hinterlassen. Und so helfen Sie mir bei der Erstellung von nächsten, lassen Sie uns Kurse in meiner Serie codieren. Nochmals vielen Dank und auf Wiedersehen.