Angular-Crashkurs!

1. 0101Was ist Angular: Was ist eckig? Angular ist ein Framework für die Erstellung dynamischer Single-Page-Anwendungen. Wenn Sie ein Anfänger sind, ist diese Definition natürlich nicht ganz sinnvoll. Um aus dieser Definition einen Sinn zu machen, wollen wir zunächst verstehen wie eine einfache Webanwendung funktioniert. Nehmen wir an, Sie haben eine E-Commerce-Website besucht und diesen mündlichen Shop.com-Schrägstrich ElectronC eingegeben. Vielleicht haben Sie mündlichen Shop.com-Schrägstrich ElectronC gerade auf den Link geklickt Der Browser würde dann die Anfrage an den Server senden und eine Liste mit elektronischen Artikeln anfordern Der Server würde die Anfrage bearbeiten und dann möglicherweise die Datenbank abfragen und nach einer Liste von Datensätzen fragen, bei denen es sich in diesem Fall um elektronische Datensätze handelt. Nach dem Abrufen würde er die Antwort an den Client oder den Browser zurücksenden . , Früher verwendeten wir Technologien wie PHP, ASP.net, RubonRails oder Jango, um die STML dynamisch zu generieren und an den Client oder den Browser zurückzuschicken Diese STMLs enthalten also die Daten, die mit der erforderlichen STML - oder Präsentationslogik damit sie Bei diesem Ansatz gibt es jedoch viele Probleme. Kannst du das Video anhalten und versuchen, eine Vermutung anzustellen? Zuallererst werden wir Probleme mit der Leistung haben, weil die Generierung von dynamischem STML sehr ressourcenintensiv ist. Wenn eine große Menge an Datenverkehr auf den Server kommt, wird das eine Menge Ressourcen beanspruchen , die Leistung beeinträchtigen, die Kosten erhöhen und letztendlich auch die Benutzererfahrung beeinträchtigen, da Webseiten möglicherweise sehr schnell gerendert werden Es könnte eine gewisse Latenz geben. Ein anderes Problem, das wir uns vorstellen können ist die Komplexität der Codebasis. Die Backend-Entwickler müssen Code schreiben, um STML dynamisch zu generieren, was die Komplexität der Codebasis und damit auch die Wartbarkeit der Codebasis erhöhen wird der Codebasis und damit auch die Wartbarkeit der Codebasis Außerdem müssen die Backend-Entwickler auch Frontend-Technologien erlernen, um ihre Arbeit erledigen zu können Drittens, und das ist am wichtigsten, würde es Kompatibilitätsprobleme geben Nun kann TML von einem Browser verstanden werden, aber was ist, wenn es sich bei dem Client um eine mobile Anwendung handelt Oder was ist, wenn eine andere Anwendung die Daten lesen möchte? Nun, wenn eine Anwendung Daten anfordert, können wir ihnen kein HTML senden. Sie müssen die zusätzliche Arbeit erledigen, den gesamten Präsentationsteil zu entfernen, alle HTML-Tags und die Daten zu extrahieren, was überhaupt nicht praktikabel ist Haben wir also eine Lösung für dieses Problem? Nun, wie wäre es, wenn wir einfach die Daten senden und den Kunden den Präsentationsteil erledigen lassen? Würde das das Problem lösen? Lass uns einen Blick darauf werfen. Anstatt STML zu senden, würden wir jetzt JSON senden Falls du dich fragst, was JSON ist : Es sind einfach Daten in einem standardisierten Format, die einem standardisierten Format, die jeder andere Kunde verstehen will Wenn wir zum Beispiel nach einer Liste von elektronischen Geräten fragen , die JSON-Antwort könnte die JSON-Antwort vom Server etwa so aussehen, und alle Clients sind in der Lage , das zu verstehen. Entwickler mobiler Apps könnten beispielsweise Code schreiben , der diese JSON-Datei durchläuft und die benötigten Daten extrahiert. In ähnlicher Weise kann eine andere Anwendung einige vorhandene Bibliotheken verwenden , um die Daten einfach aus der JSON-Antwort zu lesen. Und heutzutage senden all diese Überwachungstechnologien wie Java, Jango, PHP und Node-JS, was heutzutage sehr beliebt ist was heutzutage sehr beliebt ist, nur JSON-Daten, und sie kümmern sich nicht darum, Präsentationslogik tamisch zu generieren oder in die Antwort einzubeziehen Aber wir haben hier ein Problem. Dieses JSON kann von einer mobilen App oder einer anderen Anwendung oder einem anderen Client gelesen mobilen App oder einer anderen Anwendung werden. Aber was ist mit Browsern? Wir können diese JSON-Daten nicht einfach sofort im Browser anzeigen und erwarten, dass der Benutzer eine sehr gute Erfahrung macht. Sie möchten die Daten auf visuell ansprechende Weise sehen und sie möchten in der Lage sein, mit der Anwendung über Links, Schaltflächen, Formulare usw. zu interagieren mit der Anwendung über Links, . Wir müssen also immer noch irgendwo HTML, CSS und JavaScript haben , damit wir das erreichen können Wie erreichen wir das? Lass uns einen Blick darauf werfen. Nehmen wir an, der Benutzer hat shop.com besucht. Sobald der Kunde diese Site besucht, sendet der Browser die Anfrage an den Server und fordert die Index-SML-Datei Diesmal würde der Server mit allen TML-CSS- und JavaScript-Dateien antworten , die Sie jemals benötigen Und für all diese nachfolgenden Anfragen wird er nur mit den Daten im JSON-Format antworten nur mit den Daten im JSON-Format Wenn Sie eine herkömmliche Website besuchen, jedes Mal, wenn Sie auf einen Link klicken oder zu einer bestimmten Seite wechseln, lädt der Browser jedes Mal, wenn Sie auf einen Link klicken oder zu einer bestimmten Seite wechseln, die gesamte Seite neu, sendet eine Anfrage an den Server und erhält als Antwort eine neue HTML-Seite In diesem Fall lädt der Browser jedoch die gesamte Anwendungsstruktur, HTML, CSS, JavaScript, alles nur einmal Wenn Sie danach auf einen Link klicken oder durch die Seiten navigieren, die Seite nicht erneut geladen Stattdessen aktualisiert die Anwendung den Inhalt dynamisch mithilfe von JavaScript. Sie aktualisiert den JSON-Inhalt oder die JSON-Daten dynamisch mithilfe des bereits vorhandenen JavaScripts . Im Wesentlichen verhält es sich also wie eine einseitige Anwendung. So wie Sie eine mobile App auf Android haben, werden Sie diese Anwendung mit TML, CSS und JavaScript in einem Browser erstellen Und genauso wie Ihre mobile App nicht jedes Mal neu geladen werden muss, wenn Sie damit interagieren Auch dafür muss die Seite nicht jedes Mal neu geladen werden, wenn der Kunde mit der Anwendung im Browser interagiert Einige Beispiele für einseitige Anwendungen sind Facebook, LinkedIn, Twitter und es gibt viele Instagram ist auch eine einseitige Anwendung. Wenn Sie durch den Beitrag scrollen, werden Sie nicht sehen, dass die Seite neu geladen wird Das liegt daran, dass es in diesem Modell funktioniert. Wenn Sie facebook.com zum ersten Mal besuchen, wurden bereits alle erforderlichen HTML-CSS- und JavaScript-Dateien heruntergeladen alle erforderlichen HTML-CSS- und Und bei allen nachfolgenden Anfragen antwortet der Server nur mit den Daten im JSON-Format, und sie werden mithilfe von JavaScript auf verschiedene Komponenten übertragen Die eigentliche Frage ist, wie werden wir diese HTML-CSS- und JavaScript-Dateien erstellen? Werden wir buchstäblich SML-CSS und JavaScript verwenden , um diese Anwendungen zu erstellen Das ergibt keinen Sinn. Es wird eine unvorstellbare Menge an Mühe, Zeit und Energie erfordern, und es ist einfach unmöglich Hier kommt Angular ins Spiel. Angular ist ein Framework. Was das Framework ist, ist nur ein Haufen von Bibliotheken oder vorgefertigtem Code , der Entwicklern das Leben erleichtert , sodass sie TML, CSS und JavaScript nicht von Grund auf neu schreiben müssen TML, CSS und JavaScript nicht von Grund auf neu Wir verwenden Angular für die Erstellung dieser dynamischen Single-Page-Anwendungen Wenn Sie ein Auto bauen möchten, macht es für Sie keinen Sinn, jedes einzelne Bauteil von Grund auf neu zu bauen. Sie möchten Komponenten von verschiedenen Anbietern beziehen und sie nach Ihren Wünschen zusammenbauen . In ähnlicher Weise werden Sie das Angular Framework verwenden , um die Anwendungen nach Ihren Wünschen zu erstellen . Hoffe es macht Sinn. Ich sehe dich als Nächstes. 2. 0102 NodeJS vs. Angular: Es ist wirklich wichtig, den Unterschied zwischen Angular und Node J zu verstehen , weil wir Nodejs oft als etwas betrachten, das auf der Serverseite läuft, und Angular ist etwas, das auf Serverseite läuft, und Angular ist etwas, das Wir benötigen jedoch nodejs, um Angular-Anwendungen erstellen oder entwickeln zu können erstellen oder entwickeln In der Tat, sei es irgendeine Art von JavaScript-Anwendung wie Nodejs React oder sogar View-JS oder Wir benötigen nodejs, um diese Anwendungen erstellen oder entwickeln zu können erstellen oder entwickeln Versuchen wir also, die Rolle von Node JS bei der Angular-Entwicklung zu verstehen von Node JS bei der Angular-Entwicklung zu Angler ist etwas, das auf der Client-Seite läuft, was bedeutet, dass es sich um eine JavaScript-Anwendung , die im Browser ausgeführt wird Auf der anderen Seite läuft nodejs auf dem Server, und sowohl NodeJS als auch Angler sind JavaScript-Anwendungen, und sie benötigen JavaScript-Laufzeit, um sich selbst ausführen zu können Für Angler-Anwendungen haben wir einen Browser, der JavaScript ausführt . Für Node JS haben wir jedoch die Nodejs-Laufzeit sodass wir unsere Anwendung in dieser Umgebung bereitstellen können , und dann kann sie mit der Bearbeitung der Anfrage beginnen Bisher spielt Nodejs Angular keinerlei Wir benötigen Nodejs nicht, um Angular-Anwendungen ausführen zu können zu Der Browser macht diesen Job bereits. eckige Anwendungen zu erstellen, benötigen wir jedoch nodejs Um dies besser zu verstehen, werfen wir einen Blick darauf, wie die Nodejs-Anwendung tatsächlich entwickelt und bereitgestellt wird Zuallererst müssen Sie Nodejs auf Ihrem lokalen Computer installieren, und dann neigen Sie normalerweise dazu , diese Nun, das ist keine exklusive Liste von Befehlen, aber nur um Ihnen eine Vorstellung zu geben, werde ich einige Befehle zeigen, die wir bei der Entwicklung von NodeJS-Anwendungen ausführen könnten Entwicklung von NodeJS-Anwendungen ausführen Zuallererst könnten Sie nach der Installation von Node JS diesen Befehl NPM eingeben, der das Projekt initialisiert und das in der Datei befindliche Paket dot js mit einigen grundlegenden Informationen einführt Datei befindliche Paket dot js mit einigen grundlegenden Informationen Es könnte Sie also grundsätzlich bitten, den Projektnamen, die Beschreibung usw. einzugeben Danach können Sie auch Express installieren. Die Installation von Express ist heutzutage so ziemlich ein Standard , da es einige vorgefertigte Codes und Bibliotheken enthält , die wir sofort verwenden können. Es macht es uns zum Beispiel leicht, Routing, Bearbeitung von Anfragen, Antworten usw. einzuführen Bearbeitung von Anfragen, Antworten usw. Und Sie könnten auch Typoskript installieren. Es ist auch so ziemlich üblich Typoskript anstelle von rohem JavaScript zu verwenden , da Typoskript quasi eine weiterentwickelte Version von JavaScript ist Es wird unsere Arbeit viel einfacher machen. Sobald Sie Typescript installiert haben, würden Sie anfangen, den Code zu schreiben, und danach müssten Sie diese Typoskript-Dateien in entsprechende Javascript-Dateien übersetzen, zu schreiben, und danach müssten Sie diese Typoskript-Dateien in entsprechende Javascript-Dateien übersetzen damit die Nodejs-Registrierung oder die Nodejs-Javascript-Runtime-Registrierung sie tatsächlich ausführen kann. Sobald Sie das getan haben, könnten Sie die Dinge tatsächlich mit NPM Start testen. Und wenn Sie mit allem zufrieden sind, werden Sie diese Anwendung auf dem Produktionsserver bereitstellen , und dann kann sie mit der Lösung der Anfrage beginnen Nun zu Angular, wir können diese Nod-Just-Befehle nicht verwenden, weil die Art und Weise, wie die Angle-Projekte behandelt werden, sich ein wenig von der Art und Weise unterscheidet , wie die Nod-Jz-Projekte behandelt werden Zum Beispiel wird sich die Projektstruktur im Fall von Angular unterscheiden Um Anglo-spezifische Befehle auszuführen, benötigen wir also ein anderes Tool namens Angular CLI Wir müssen es auf unserem lokalen Computer installiert haben. Und wir werden es installieren, indem wir den NPM-Befehl ausführen All diese Befehle , die mit NPM beginnen, sind also Nodejs-spezifische Um Angular CLI zu installieren, müssen wir zuerst Node JS installiert haben Erst dann können wir diesen Befehl tatsächlich ausführen. Tatsächlich wurde Angular CLI selbst mit JavaScript geschrieben und benötigt eine gewisse JavaScript-Laufzeit , um sich selbst ausführen zu können. Und noch einmal, diese Registrierung ist Node JS. Selbst für die Entwicklung von Angular-Anwendungen müssen wir also zuerst Node js auf unserem lokalen Computer installieren Dann werden wir weitermachen und Angular CLI installieren , mit der wir einige anglo-spezifische Befehle ausführen können einige anglo-spezifische Befehle Nachdem Sie Angular CLI installiert haben, können Sie Anglo-spezifische Befehle ausführen Zum Beispiel Engine U, und dann werden Sie den Projektnamen erwähnen. Dadurch wird eine grundlegende Projektstruktur mit allen grundlegenden Paketen und Bibliotheken erstellt, die wir benötigen, um mit die der Entwicklung von Angular-Anwendungen zu beginnen Technisch gesehen ist das alles möglich, ohne Anglo CLI zu installieren, aber das ist ein sehr mühsamer Prozess. Aus diesem Grund haben wir Anglo CLI, um uns die Arbeit zu erleichtern. Es wird uns eine Menge schwerer Arbeit abnehmen. Und dann könnten Sie tatsächlich anfangen, Code in Typoskript zu schreiben, und dann werden Sie die Anwendung bereitstellen , um Dinge zu testen, und dann werden Sie irgendwann die Anwendung erstellen, die im Grunde all diese Typoskript-Dateien in äquivalentes JavaScript übersetzt all diese Typoskript-Dateien in , weil Browser das verstehen verstehen Und dann werden Sie es irgendwo auf dem Server speichern. Immer wenn jemand Ihre Website besucht, sendet der Server all diese Dateien zurück und lädt sie in den Browser. Das Wichtigste, was Sie hier verstehen müssen , ist, dass wir im Fall von Nodejs Nodejs nicht nur benötigen, wir im Fall von Nodejs Nodejs nicht nur benötigen zu entwickeln oder zu erstellen, sondern auch, um die Anwendung tatsächlich auf der Serverseite auszuführen auf der Serverseite Im Fall von Angler benötigen wir Node J für den Aufbau oder die Entwicklung der Angular-Anwendung, aber wir benötigen ihn nicht wirklich, um die aber wir benötigen ihn nicht wirklich Angular-Anwendung in der Produktion auszuführen da wir einen Browser haben, benötigen wir Node J für den Aufbau oder die Entwicklung der Angular-Anwendung, aber wir benötigen ihn nicht wirklich, um die Angular-Anwendung in der Produktion auszuführen, da wir einen Browser haben, der diesen Job erledigt. Hoffe es macht Sinn Ich sehe dich als Nächstes. 3. 0103 Einrichten der Entwicklungsumgebung: Die Einrichtung der Entwicklerregistrierung für Angular ist Es beinhaltet diese drei Schritte. Zunächst installieren wir Node js und dann verwenden wir den Befehl nodejs, um Angular CLI zu installieren, damit wir mit der Ausführung der anglo-spezifischen Befehle beginnen können der Ausführung der anglo-spezifischen Und dann benötigen wir einen Quellcode-Editor, ein robustes Tool, mit dem wir den Code im Vergleich zu einem Standard-Notizblock effizienter schreiben, erstellen und debuggen im Vergleich zu einem Standard-Notizblock effizienter Visual Studio-Code erledigt diesen Job. Mal sehen, wie das alles gemacht wird. Das ist also die offizielle Homepage von nodjs isndjs.org, und wir können Wenn Sie darauf klicken, wird der Installer heruntergeladen , und dann können Sie NodeJS installieren, genau Es ist sehr einfach. Wenn Sie jedoch eine bessere Kontrolle darüber haben möchten, wie Sie herunterladen möchten, können Sie zum Download-Tab gehen und dann können wir hier Node JS mit einem Paketmanager installieren und einrichten , oder wir können ein vorgefertigtes Installationsprogramm wie das, das wir gerade gesehen haben, verwenden , oder wir können einfach die Binärdateien herunterladen und manuell installieren Und wenn Sie möchten, können wir auch den Quellcode herunterladen. Dieser einfache Ansatz besteht natürlich darin, ein vorgefertigtes Installationsprogramm zu verwenden. Sie könnten die Version, die Sie herunterladen möchten, und das Betriebssystem auswählen . Aber wenn Sie die Version ändern möchten, können wir das tun. Wenn Sie für ein Unternehmen arbeiten, wird empfohlen, dass Sie eine der LTS-Versionen entscheiden LTS steht für Long Term Support. Daher werden alle Versionen , die als LTS gekennzeichnet sind , nach ihrer Veröffentlichung mehrere Jahre lang von der No Jess-Community unterstützt und gewartet nach ihrer Veröffentlichung mehrere Jahre lang Dies sind also stabilere Versionen, aber zu Lernzwecken können wir uns für die neueste und beste Version entscheiden Ich wähle die neueste Version und klicke auf Herunterladen. Ich habe es bereits heruntergeladen und es ist dort auf meinem Desktop. Wenn Sie jedoch abenteuerlustiger werden möchten, können wir die Paketmanager-Option wählen Standardmäßig wurde F&M ausgewählt, was für Fast Node Manager steht Wenn Sie also den schnellen Node Manager zur Installation von Node JS verwenden möchten , müssen Sie nur all diese Befehle im Windows-Befehlszeilentool oder mithilfe von PowerShell ausführen Windows-Befehlszeilentool oder mithilfe von Bevor Sie diese Befehle ausführen, müssen Sie jedoch den Windows-Paketmanager oder Wind Get installiert haben oder Wind Get installiert Sie können es ganz einfach im Windows Store herunterladen. Sobald Sie den Windows Package Manager installiert haben, können Sie all diese Befehle ausführen , um den schnellen Node Manager zu installieren Anschließend können Sie Nroment konfigurieren und schließlich Node JS herunterladen Wenn Sie ein Anfänger sind, fahren Sie einfach mit dem Installationsprogramm fort. Sie müssen diesem Ansatz nicht folgen. Aber Sie fragen sich vielleicht, warum wir den Paketmanager verwenden wollen , anstatt nur Node JS mit einem Installer zu installieren? Nun, F&M wird uns eine gewisse Flexibilität beim Wechsel zwischen verschiedenen Knotenversionen geben Wechsel zwischen verschiedenen Knotenversionen Wenn Sie beispielsweise auf Kompatibilität testen und es auf einer anderen Version von Node JS testen möchten , macht es F&M sehr einfach Indem wir nur ein paar Befehle ausführen, können wir zu einer anderen Knotenversion wechseln Dies erspart uns im Grunde Deinstallation und Neuinstallation einer anderen Version von Node JS. Aber wenn Sie ein Anfänger sind, stehen die Chancen gut , dass Sie so etwas nicht tun möchten. Laden Sie einfach das Installationsprogramm herunter und installieren Sie Node js. Wir haben hier auch eine Reihe anderer Optionen. Wenn Sie Node JS auf einem Docker-Container installieren möchten, dann sind dies alle Befehle, die wir ausführen müssen, und das würde Node JS installieren Sobald Sie das Installationsprogramm heruntergeladen haben, doppelklicken Sie einfach darauf Belassen Sie alles auf den Standardeinstellungen, akzeptieren Sie die Lizenz und beenden Sie die Installation. Klicken Sie auf Fertig stellen. Lassen Sie uns nach der Installation die Partial - oder Windows-Befehlszeile mit Administratorrechten starten , um unsere Installation zu überprüfen. Es ist wirklich wichtig , dass Sie Ihr Poial mit Administratorrechten starten Ihr Poial mit Administratorrechten Wenn Sie die Umschalttaste drücken und mit der rechten Maustaste auf den Bildschirm klicken, Ihnen möglicherweise die Option zum Starten von Pill angezeigt, dies ist jedoch nicht mit Administratorrechten möglich Also werden wir auf die Windows-Taste klicken und dann nach PowerShell suchen Klicken Sie mit der rechten Maustaste darauf und klicken Sie auf Als Administrator ausführen. Das hat also die Windows Power Shell geöffnet. Lassen Sie uns überprüfen, ob unser Node JS installiert ist. Ich sage Knotenbindestrich B, B für Version, und schon wurde die Version angezeigt Und in ähnlicher Weise werde ich auch überprüfen, ob NPM für Node Package Manager steht Mit diesem Tool werden wir alle Pakete installieren, die wir in unserem Projekt benötigen Dieser Befehl ist fehlgeschlagen, da Powershell uns aus Sicherheitsgründen standardmäßig nicht erlaubt, Skripte auszuführen Um dies zu beheben, müssen wir unsere Ausführungsrichtlinie ändern. Lassen Sie uns zunächst die Ausführungsrichtlinie herausfinden. Und es ist derzeit auf eingeschränkt eingestellt. Wir werden das auf uneingeschränkt ändern, damit wir Skripte mit partiellen Funktionen ausführen können Ich sage Ja, indem ich Y eintippe. Lassen Sie uns den Bildschirm leeren und versuchen, den Befehl erneut auszuführen Und es wurde angezeigt. Als Nächstes werden wir Angular CLI installieren, und der Befehl dafür ist, dass wir den Node Package Manager verwenden, um Angular CLI mit einer globalen Option zu installieren. Mit der Option Hyphen G sagen wir, dass wir Angular CLI global installieren wollen , damit wir die Angular-Befehle von jedem Verzeichnis aus ausführen können die Angular-Befehle von jedem Verzeichnis aus Wenn wir dies nicht auf global setzen, ist Angular CLI nur auf das aktuelle Verzeichnis beschränkt Wenn Sie Pakete installieren möchten, die auf ein bestimmtes Projekt beschränkt sind, möchten wir die Option Bindestrich G nicht verwenden Wir können sie lokal behalten. Wir möchten jedoch, dass Angular CLI für alle Projekte in allen Verzeichnissen verfügbar ist. Also wollen wir dies mit dieser Option auf global mit Bindestrich G setzen . Und dann werden wir Angular CLI angeben Dies sollte Anglo CLI installieren, und es wird einige Zeit dauern Lassen Sie uns nun überprüfen, ob Anglo CLI installiert ist , indem wir den Angular-Befehl ausführen Das ist die NG-Version mit Bindestrich. Und es hat die Version angezeigt, was bedeutet, dass wir Angular CLI erfolgreich installiert haben Als Nächstes werden wir Visual Studio Code installieren Dies ist die offizielle Website für Visual Studio Code. Das ist sehr einfach. Sie müssen lediglich das Installationsprogramm herunterladen und anschließend installieren. Sobald dies erledigt ist, sollte der Visual Studio-Code so aussehen. Hoffe es macht Sinn. Ich sehe dich als Nächstes. 4. 0104 Komponenten in Angular: Was sind also Komponenten in Angulo? Lass uns einen Blick darauf werfen. Stellen Sie sich vor, das ist Ihre Facebook-Seite. Diese Seite besteht nun aus mehreren Blöcken, oder nennen wir sie vorerst UI-Komponenten. Zum Beispiel haben wir vielleicht eine Komponente namens Fotos, in der Ihre Fotos angezeigt werden, und dann haben Sie vielleicht eine Komponente namens A, die über Sie spricht. Und dann haben wir vielleicht eine weitere Komponente namens Pose, die deine Pose anzeigt. Wir können auch Komponenten in einer anderen Komponente haben. Zum Beispiel könnte die Post-Komponente aus einigen Komponenten bestehen, die als Create Post und Display Post bezeichnet werden. Beitrag erstellen“ können Sie einen Beitrag erstellen, und Beitrag anzeigen zeigt nur den neuesten Beitrag an, und die Pose anzeigen wird und die Pose anzeigen wird dynamisch aktualisiert, wenn wir durch die Seite blättern. Das heißt, wenn wir durch die Seite scrollen, werden wir sehen, dass ein neuer Beitrag gefüllt wird, und all diese Komponenten befinden sich möglicherweise in einer Master-Komponente Jetzt habe ich eine Frage an dich. Was braucht es, um diese Komponenten zu bauen? Nehmen wir zum Beispiel die Komponente „Pose anzeigen“. Was braucht es, um diese Komponente zu erstellen? Ich gebe dir einen Hinweis. Wir brauchen HTML, weil der Browser das versteht Andernfalls würden wir im Browser nichts sehen . Was brauchen wir noch? Styling, wir brauchen natürlich CSS oder etwas Ähnliches , um es optisch ansprechend zu gestalten. Und dann brauchen wir auch Daten, die oft vom Server abgerufen Und dann brauchen wir auch die Logik oder den Code, der Komponente eine gewisse Intelligenz verleiht Beispielsweise möchte der Benutzer möglicherweise mit der Komponente interagieren, indem er auf die Schaltfläche „Gefällt mir“ klickt, oder der Benutzer möchte möglicherweise einen Kommentar einreichen. Immer wenn der Benutzer den Text eingibt und auf Senden oder Kommentar hinzufügen klickt, die zugrunde liegende Logik oder der Code ausgeführt, sodass dieser Kommentar dem Beitrag hinzugefügt wird. Die Kombination all dieser Elemente, die Ansicht, die aus TML und CSS besteht, Daten und Logik, ist die eckige Komponente Eine eckige Komponente würde aus all diesen Komponenten bestehen, sodass wir beim Ausführen unserer Anwendung sehen werden, dass diese Komponenten geladen werden Der beste Weg, um die Angular-Komponente zu verstehen , besteht darin, sich einen Beispielcode anzusehen. Nun, das ist offensichtlich kein vollständiger Code. Dies soll Ihnen nur eine Vorstellung davon geben , was eine eckige Komponente ist. Dies besteht aus der Ansicht , einer Kombination aus TML und CSS Hier versuchen wir, auf eine TML-Datei und eine CSS-Datei hinzuweisen eine TML-Datei und eine CSS-Datei Alle Stimuli und CSS, die für diese spezielle Komponente erforderlich sind, würden sich also diese spezielle Komponente erforderlich sind, würden in diesen Dateien befinden Und dann haben wir auch die zugrunde liegende Logik , die der Komponente eine gewisse Intelligenz verleihen würde Im Fall eines Display-Posts könnten wir beispielsweise eine Methode namens post verwenden, die Code enthält, der angibt , was passieren würde , wenn der Benutzer auf einen Like-Button drückt. Dann könnten wir auch eine andere Methode namens Kommentar hinzufügen haben , die definiert, was passieren würde , wenn der Benutzer einen neuen Kommentar hinzufügen würde. Die Daten würden vom Server abgerufen, was wir in diesem speziellen Code nicht sehen, aber wir werden das auf jeden Fall später untersuchen. Aber ich hoffe, dass Sie ein Gefühl dafür haben , was eine eckige Komponente ist Wenn wir das Beispiel durchgehen, werden Sie es noch besser verstehen . Wir sehen uns als Nächstes. 5. 0105 Erstellen eines Winkelschnitts mit Projekt-Komplettlösung: Okay, lassen Sie uns sehen, wie wir unser erstes Angler-Projekt erstellen können unser erstes Angler-Projekt erstellen Und dafür werden wir unseren Visual Studio-Code starten, und dann müssen wir das Terminal starten Wir können entweder das Terminal verwenden, das bereits Teil von Visual Studio Code ist , oder wir können auch ein beliebiges Befehlszeilentool wie die Windows-Befehlszeile, PowerShell usw. verwenden wie die Windows-Befehlszeile, PowerShell usw. Solange Sie Anglo-Befehle von diesem Tool aus ausführen können , sollten wir damit klarkommen Um das Terminal im Visual Studio-Code zu starten, sollten wir im Menü auf Terminal und dann auf Neues Terminal klicken Ich habe auch einen neuen Ordner in meinem Windows erstellt, dem wir all unsere Angular-Projekte hosten werden. Ich werde seinen Pfad kopieren und wir werden in dieses Verzeichnis gehen. Ich werde CD für Chain Directory verwenden und den Pfad einfügen. Wir befinden uns jetzt in dem neu erstellten Verzeichnis, und hier werden wir unser neues Angular-Projekt erstellen . Der Befehl zum Erstellen eines neuen Angular-Projekts lautet NG New. Und dann geben wir den Namen des Projekts an. Ich nenne es einfach meine App. Jetzt haben wir hier eine Reihe von Optionen. Ich würde Ihnen empfehlen, SCSS zu verwenden. SCSS ist wie eine weiterentwickelte Version von CSS. Wenn Sie mit CSS vertraut sind, können Sie SCSS leicht verstehen Und selbst wenn Sie nichts über Styling wissen, können Sie es im Laufe dieses Kurses leicht verstehen Laufe dieses Kurses Lassen Sie uns zunächst die SCSS-Option wählen und die Eingabetaste oder die Eingabetaste drücken Jetzt werden wir gefragt, ob wir serverseitiges Rendern und statische Seitengenerierung aktivieren möchten serverseitiges Rendern und statische Seitengenerierung Wir werden diese später untersuchen, aber ich werde versuchen, Ihnen eine Vorstellung davon zu geben, welche das sind. Wenn Sie eine mit Angular erstellte Webseite besuchen, lädt der Browser normalerweise das gesamte Javascript und erstellt die Seite dann auf Ihrem Computer. Der Server sendet nur die Daten. Das wird als clientseitiges Rendern bezeichnet, und clientseitiges Rendern wird am häufigsten verwendet. Das serverseitige Rendern oder SSR funktioniert wie herkömmliche Websites, bei denen die Seite zuerst auf dem Server erstellt wird und die vollständige Schätzung an den Browser gesendet wird Nun, es gibt Vor- und Nachteile, die wir zu einem späteren Zeitpunkt untersuchen werden, aber meistens bevorzugen wir das clientseitige Rendern Die statische Seitengenerierung oder SSG ermöglicht es uns, statische HTML-Dateien für unsere Website zu generieren , wenn wir unser Projekt erstellen Und diese statischen Dateien werden dann direkt an die Benutzer gesendet, was schnell ist, da nicht darauf gewartet werden muss, dass der Server etwas erstellt Es funktioniert wie eine statische Website und ist nützlich für eine Dokumentationswebsite, auf der alle Seiten als HTML-Dateien vorkonfiguriert sind Aber wie ich bereits sagte, werden wir in den meisten Fällen, wenn es sich um eine eckige Anwendung handelt, wenn es sich um eine eckige Anwendung handelt, keine davon verwenden Wir würden das standardmäßige clientseitige Rendern verwenden. Aber vorerst können wir zu dieser Option Ja sagen , sodass Angler alle dafür erforderlichen Konfigurationen enthält Und falls wir sie verwenden wollen, können wir sie verwenden. Also werden wir ja sagen, indem Y eingeben und dann die Eingabetaste drücken. Nun, es wird eine Weile dauern, bis das Projekt erstellt ist. Lassen Sie mich das Video pausieren und zurückkehren, sobald es fertig ist. Okay, unser Projekt ist jetzt erstellt, und wenn Sie zum Projekt-Explorer gehen, sehen wir eine Option zum Importieren eines Ordners oder zum Öffnen eines Ordners. Klicken Sie darauf Wir gehen wieder in das Verzeichnis und wählen das Angular-Projekt aus , das wir gerade erstellt haben. Klicken Sie darauf und klicken Sie auf Ordner auswählen. Das wird also unser Projekt importieren, und das ist die typische eckige Projektstruktur. Lassen Sie mich Ihnen kurz erklären , was wir hier sehen. Also zuerst haben wir das SRC-Verzeichnis. Hier befindet sich der eigentliche Code für die Angular-Anwendung. Es enthält die App-Komponenten, Dienste, Kacheln, Assets und Konfigurationsdateien. Lassen Sie uns die wichtigsten Unterordner und Dateien ganz schnell erkunden. Wir haben also diesen App-Ordner, und hier haben wir die Root-Komponente Also alle Dateien, die mit der App Dot Component beginnen , entsprechen alle der Root-Komponente. Die App Dot Component Dot Ts-Datei ist die Typoskriptdatei der Root-Komponente Und genau wie bei allen anderen Komponenten zeigt sie auf die entsprechende Vorlagendatei oder STML und auch auf die entsprechende Stil-URL Das ist also die STML und das ist die entsprechende Style-Datei Neben dem App-Ordner haben wir auch eine Reihe anderer Dateien Zum Beispiel ist die Hauptpunkt-TS-Datei wie der Einstiegspunkt für unsere Anwendung. Es bootet im Grunde das Root-Modul oder das App-Modul Und dann haben wir auch die Index-HTML-Datei, die die Angler-App selbst enthält, und das ist die Datei, die bereitgestellt wird, wenn jemand unsere Website zum ersten Mal besucht. Wir haben auch die entsprechende Style-Datei. Und dann haben wir eine JSON-Datei mit eckigem Punkt. Dies ist die Hauptkonfigurationsdatei für die Angular-CLI. Sie definiert im Wesentlichen die Einstellungen für das Erstellen, Testen und Bereitstellen der App. Hier können wir also verschiedene Build-Optionen einrichten und konfigurieren, welche Assets, Stile und Skripte enthalten sind usw. All das werden wir später untersuchen. Und dann haben wir auch das Paket dot JSON. Diese Datei enthält Metadaten über das Projekt, einschließlich Abhängigkeiten und Skripten. Wir haben also Abhängigkeiten, die während der Laufzeit erforderlich sind. Dann haben wir auch eine Reihe von Abhängigkeiten, die wir für die Entwicklung benötigen, aber während der Laufzeit nicht unbedingt erforderlich sind. Anglo CLI ist zum Beispiel etwas, das wir für die Entwicklung und das Testen benötigen, aber nicht während der Laufzeit Eine weitere wichtige Datei ist sconft dot Json. Es ist eine TypeScript-Konfigurationsdatei, die definiert, wie Sie können diese Compiler-Optionen je nach Bedarf ändern Compiler-Optionen Und dann haben wir auch die Node-Module. Dieses Verzeichnis enthält alle Abhängigkeiten, Bibliotheken und Pakete, die über NPM installiert Normalerweise müssen Sie hier nichts ändern. Es wird automatisch generiert. Es gibt auch eine Menge anderer Dateien, aber wir müssen uns nicht wirklich um diese Dateien kümmern da sie unserem Projekt oder unserem Lernen keinen Mehrwert bieten werden . Das ist also ein kurzer Überblick über das, was wir in Anglo Project haben Wir werden all dies zu einem späteren Zeitpunkt im Detail untersuchen , aber im Moment hoffe ich, dass uns dies einen guten Start gegeben hat, um mit dem Schreiben unseres Codes zu beginnen . Wir sehen uns als Nächstes. 6. 0106 Erstellen einer Angular-Komponente und Läufen der App: Lassen Sie uns einen Blick darauf werfen, wie wir eine neue Komponente in Angular generieren oder erstellen können , und dann werde ich Ihnen auch erklären, was in einer Komponente enthalten ist Der Befehl zum Erstellen oder Generieren einer neuen Komponente lautet also NG generate component, und dann geben Sie der Komponente den Namen. Ich nenne es Pose. Das hat also einen neuen Ordner mit dem Komponentennamen erstellt, und dieser Ordner enthält alle komponentenspezifischen Dateien. Lassen Sie uns diese Typoskriptdatei öffnen und versuchen zu verstehen, was da drin steht Zuallererst haben wir diesen Komponenten-Dekorator, Angler mitteilt , dass es sich bei dieser Klasse um eine Komponente handelt, und der einige Metadaten bereitstellt, anhand derer Angler verstehen, wie die Komponente erstellt und angezeigt erstellt Zuallererst haben wir also den Selektor. Das definiert ein benutzerdefiniertes Schätzungs-Tag das der Angler verwendet, um diese bestimmte Komponente anzuzeigen Wenn diese Komponente Teil einer übergeordneten Komponente sein sollte, müssen wir diesen Tagnamen verwenden Wir haben den Standalone-Wert auf true gesetzt. Dadurch kann diese Komponente existieren, ohne Teil eines Winkelmoduls zu sein. Nun, vor Angular 14 müssen wir alle unsere Komponenten in einem Modul definiert haben. Mit den neuesten Versionen von Angular wird es nicht mehr benötigt, und wir können eigenständige Komponenten definieren. Wenn Sie nicht wissen, was ein Modul ist, können wir im Moment natürlich nicht darüber sprechen. Wir werden es ein anderes Mal untersuchen. Als Nächstes haben wir Importe. Hier können wir alle Winkelmodule oder andere eigenständige Komponenten auflisten, von denen andere eigenständige Komponenten auflisten, von denen diese bestimmte Komponente abhängt. Als Nächstes haben wir die Vorlagen-URL und diese verweist auf die STML-Datei, die die Struktur oder die Benutzeroberfläche dieser Komponente definiert In diesem Fall befindet sich die Datei im selben Verzeichnis wie die Komponente und heißt Post Dot Component Dot HTML, was dieser speziellen Datei entspricht In ähnlicher Weise haben wir auch diese Stil-URL, die auf die SCSS-Datei verweist , die die Stile für diese bestimmte Komponente definiert Sie können SCSS-Code in diese Datei schreiben , um die Komponente zu stylen Im Moment hat Angler standardmäßig etwas HTML in die Post-TML-Datei eingefügt Aber im Moment haben wir dafür kein Styling. Bald werden wir hier etwas Code einführen. Wir haben auch diese spezifizierte Ts-Datei, es sich um eine Testdatei für die Komponente Da Sie ein Anfänger sind, können Sie diesen Code natürlich möglicherweise nicht verstehen, also werden wir ihn für ein anderes Mal speichern Versuchen wir nun, diese Anwendung zu starten und zu sehen, was passieren wird. Aber vorher müssen wir diese spezielle Komponente als Teil der Master-Komponente oder der App-Komponente aufnehmen . Also werde ich diesen Selektor kopieren und zur Schätzdatei der App-Komponente gehen Im Moment ist es mit einigen Standardinhalten gefüllt. Wir können es einfach löschen und wir werden unseren eigenen Code einführen. Wenn Sie feststellen, dass wir hier einen Fehler haben, liegt das daran, dass wir diese Komponente in die entsprechende Typoskriptdatei importieren müssen diese Komponente in die entsprechende Typoskriptdatei Gehen wir zu diesem Punkt Ts der App-Komponente, der TypeScript-Datei, und fügen wir dann unsere Post-Komponente fügen Der Name der Komponente ist der Name der Klasse. Ich werde es kopieren und hier verwenden. Wenn ich meine Maus zeige, können wir diese Komponente tatsächlich automatisch importieren. Diese Importanweisung wird also automatisch von Visual Studio-Code generiert. Lassen Sie mich jetzt die Datei speichern und unsere Anwendung starten und sehen, was passieren wird. Dafür verwende ich den Befehl G serve. Dieser Befehl kompiliert also Ihre Wangular-Anwendung und startet einen lokalen Entwicklungsserver, den lokalen Host zugegriffen Er läuft auf Port 4.200, und dort können wir sehen, wie Ihre Dies hat auch eine Live-Reload-Funktion, was bedeutet, dass, wenn wir Änderungen an unserem Code vornehmen , diese sofort im Browser widergespiegelt werden Lassen Sie mich diesen speziellen Link kopieren. Gehe zu deinem Browser. Und es hat funktioniert. Gehen wir zurück und versuchen , den HTML-Code zu ändern. Speichern Sie die Datei. Sobald die Datei gespeichert wurde, hat Angular seine Arbeit erledigt. Und wenn Sie zum Browser zurückkehren, werden die neuen Änderungen jetzt widergespiegelt. Wir sehen uns als Nächstes. 7. 0107 Facebook Posts App-Demo: Ich glaube an Lernen durch Handeln, und meiner Meinung nach ist es die effektivste Art zu lernen Deshalb werden wir heute eine Art Facebook-Post-Anwendung erstellen , und dabei werden wir eine Menge Dinge auf Englisch lernen Dieser Ansatz macht nicht nur Spaß, sondern gibt Ihnen auch einen Einblick, wie wir Angel in Echtzeitprojekten einsetzen Die Anwendung, die Sie sehen, ist also das, was wir erstellen werden. Es funktioniert irgendwie wie ein Facebook-Post. Wir haben also ein paar Beiträge von John Doe und Jane Smith, und das sind die Beiträge, die sie gemacht haben. Wir können dann mit dem Beitrag interagieren , indem wir auf die Schaltfläche „Gefällt mir“ klicken. Sobald du das getan hast, wird uns eine Nachricht angezeigt, die besagt, dass dir dieser Beitrag gefällt, und wir können ihn auch liken, sodass wir diese Nachricht nicht sehen. Wir können auch einen Kommentar hinzufügen Klicken Sie auf Beitrag, damit dieser Kommentar hinzugefügt wird. Ordnung, lassen Sie uns unsere Reise beginnen , um diese lustige kleine Anwendung zu erstellen. Wir sehen uns als Nächstes. 8. 0108 Datenbindung, Interpolation und Eigenschaftsbindung: Bisher haben wir das Angular-Projekt erstellt und auch eine neue Komponente generiert, die einfach nur diese Nachricht anzeigt Wenn Sie zum Browser zurückkehren, sehen wir diese Meldung. Bald werden wir diese Anwendung in diese Anwendung umwandeln . Aber dafür benötigen wir eine Datenquelle, aus der wir all diese Daten beziehen. Idealerweise sollten wir diese Daten von einem Server im JSON-Format abrufen . Aber da wir lernen und um die Dinge einfach zu halten, werden wir diese Daten von der übergeordneten Komponente abrufen und sie dann in der untergeordneten Komponente anzeigen. Lass mich dir zeigen, was ich meine. Wir haben also die untergeordnete Komponente , die wir gerade erstellt haben, und wir haben bereits die übergeordnete Komponente. Was ich jetzt tun werde, ist, eine Eigenschaft oder ein Feld in dieser Komponente mit diesen Daten zu füllen eine Eigenschaft oder ein Feld in dieser Komponente mit diesen Daten Ich habe diese Daten bereits. Lass es mich dir zeigen. Ich werde den Namen in Pose ändern und dann werde ich diesen Wert zuweisen. Das ist also im Grunde ein Pose-Array , das eine Liste von Objekten enthält , die die Struktur eines Beitrags in sozialen Netzwerken simulieren , mit Details über den Autor des Beitrags, den Inhalt und die entsprechenden Kommentare. variable Pose wird als ein Array von Objekten initialisiert und jedes Objekt repräsentiert einzelnen Beitrag mit eigenen Datenfeldern Das ID-Feld hat den Typ Nummer. Das Benutzerfeld ist vom Typ Zeichenfolge, der Inhalt ist vom Typ Zeichenfolge, und dann haben wir auch Befehle, denen es sich um ein Array von Zeichenketten handelt. Dieses Beitragssegment enthält gerade ein paar Objekte. Jetzt müssen wir diese Daten irgendwie in die untergeordnete Komponente bekommen . Mal sehen, wie es gemacht wird. Lassen Sie uns eine Eigenschaft oder eine Variable erstellen , die diese Daten enthalten wird . Nennen wir es Benutzerpose, und das wird auch ein Array sein. Ich mache Shift F , um den Code zu formatieren. Lassen Sie uns etwas Luft zum Atmen geben. Okay, Benutzerbeitrag ist also der Name der Eigenschaft, und es ist ein Array beliebigen Typs, was bedeutet, dass es ein Array von beliebigen Datenobjekten, Zeichenketten, Zahlen usw. enthalten kann . Und im Moment ist es ein MTRI ohne Daten. Lassen Sie uns nun diese spezielle Eigenschaft in diesem Tag definieren. So wie wir STML-Elemente mit eigenen Eigenschaften haben , können wir auch unsere benutzerdefinierten Eigenschaften als Teil unserer Komponenten verwenden als Teil unserer Komponenten Möglicherweise haben wir ein Image-Tag , dessen Eigenschaft ARC sein könnte In ähnlicher Weise haben wir dieses benutzerdefinierte Komponenten-Tag für die Pose der App, dessen Eigenschaft eine Pose verwenden könnte. Und wir werden dem jetzt einen gewissen Wert zuweisen. Kannst du dir vorstellen, wie hoch der Wert sein wird? Nun, es ist diese Variable , die die Daten enthält. Lass mich es kopieren und hier einfügen. Um uns nun anzusehen, was diese Eigenschaft des Benutzerbeitrags enthält, versuchen wir, sie auf der Benutzeroberfläche anzuzeigen. Und die Syntax dafür lautet wie folgt: Wir werden geschweifte Klammern verwenden , damit es angezeigt wird Das wird Interpolation genannt. Dies ist eine Einweg-Datenbindungstechnik, Sie Daten aus der Komponente in der Vorlage anzeigen können der Komponente in der Vorlage Das bedeutet, dass die Daten von der Komponenteneigenschaft zum TML-Element fließen der Komponenteneigenschaft zum TML-Element Lassen Sie mich die Datei speichern und zum Browser zurückkehren, um zu sehen, ob dort etwas passiert. Es zeigt nichts an. Das heißt, hier wurde nichts besiedelt. Um Angular mitzuteilen , dass wir erwarten diese Eigenschaft von der übergeordneten Komponente aufgefüllt wird, müssen wir einen Decorator namens input verwenden . Lass mich dir zeigen, was ich meine So wie es ist. Ein Angler hat schon die Arbeit für mich erledigt, es ebenfalls zu importieren Sobald ich die Datei sage, sehen wir einen Fehler. Kannst du dir vorstellen, warum wir diesen Fehler sehen? Nun, was wir hier haben, ist ein Array, aber was wir hier zuzuweisen versuchen, ist eine Zeichenfolge. Aber die Frage ist, wir haben nicht vor, es als Zeichenfolge zuzuweisen. Wir beabsichtigen, diesen bestimmten Wert zuzuweisen. Damit es funktioniert, müssen wir etwas verwenden, das als Eigenschaftsbindung bezeichnet wird. Schließen Sie diese Eigenschaft einfach in eckige Klammern ein, und das Problem wird behoben. Warum ist das so Das bedeutet, dass Sie tatsächlich eine Eigenschaft aus der übergeordneten Komponente binden . Das ist die Pose für eine untergeordnete Komponente, die als Benutzerpose bezeichnet wird. Und diese Eigenschaft muss über diesen Eingabe-Dekorator verfügen. Erst dann wird das passieren? Jetzt speichern wir die Datei und kehren zum Browser zurück. Alles, was wir hier sehen, sind ein paar Objekte. Warum ist das so? Nun, das wird als Array von JavaScript-Objekten angezeigt, die möglicherweise nicht gut lesbar sind, um sie lesbar zu machen, eine Art, Pipe-JSON zu verwenden. Dadurch wird das Array in eine JSON-Zeichenfolge formatiert. Und das ist Teil der gängigen Module. Wir müssen es importieren, die Datei speichern und wir haben diesen Fehler nicht mehr. Gehen wir zurück und es hat funktioniert. Wir können die Beitragsinformationen anzeigen. Mal sehen, wie wir das zu dieser Anwendung weiterentwickeln können . Wir sehen uns als Nächstes. 9. 0109-Direktiven mit NgFor zur Anzeige von Posts: Im Moment zeigen wir die Daten im JSON-Format an. Offensichtlich wollen wir es den Benutzern nicht so zeigen. Wir wollen die Daten aus diesem JSON extrahieren und diese Daten dann mit eSTIML-Tags umhüllen und dann irgendwann ein gewisses Styling anwenden , damit wir sie so anzeigen können Unser Ziel für diese spezielle Vorlesung ist es also, den Namen oder den Namen des Autors und den entsprechenden Beitrag zu extrahieren den Namen oder den Namen des Autors und und ihn dann auf sinnvolle Weise anzuzeigen Wenn wir jetzt zum Code zurückkehren, enthält diese spezielle Eigenschaft die Daten, und um es noch einmal zu wiederholen Wir beziehen die Daten von der übergeordneten Komponente aufgrund der Eigenschaftsbindung, bei der wir die Eigenschaft des Benutzers an die untergeordnete Komponente an die Post-Eigenschaft der übergeordneten Komponente binden untergeordnete Komponente an die Post-Eigenschaft der übergeordneten Komponente Und so erhalten wir die Daten in dieser speziellen Eigenschaft Und das würde nur passieren, wenn Sie diesen Dekorateur haben. Lassen Sie uns nun versuchen, die Daten anzuzeigen. Ich werde zunächst alles in ein DV-Tag schreiben. Und hier wollen wir Namen und den Inhalt des Beitrags eintragen Ich werde den Namen im H-Two-Tag behalten. Und dann wird der Beitrag in ein Absatz-Tag eingefügt. Wie kommen wir also an den Benutzernamen und den Inhalt? Nun, das geschieht mithilfe von Interpolation. Dafür werden wir ein paar Colbrss verwenden. Und hier werden wir Benutzerpose sagen. Wir wollen auf das erste Element zugreifen. Pose hat derzeit ein paar Elemente. Und wir verwenden Benutzerpost , weil das ein Eigenschaftsname in der untergeordneten Komponente ist. Wie greifen wir also auf das erste Element zu? Nun, wenn ich Null sage , erhalten wir als Punktbenutzer Zugriff auf das erste Element . Dann werde ich dasselbe auch für den Inhalt tun. Ich werde den Inhalt festlegen. Mit Interpolation können wir also die Daten von der Komponente an die Vorlage binden die Daten von der Komponente an die Vorlage binden Lassen Sie mich die Datei speichern und sehen, wie sie im Browser gerendert wird. Lass uns zurückgehen Und es hat das erste Element angezeigt. Und dasselbe werden wir auch für das zweite Element tun . Ich werde den Code kopieren, pausieren und die Zahl um eins erhöhen. Dies wird auf das zweite Element zugreifen , das ist das. Gehen wir zurück und es wurde auch gerendert. Wie praktisch ist es nun, solchen Code zu schreiben? Im Moment haben wir ein paar Elemente in diesem Array, sodass wir Code wie diesen schreiben können. Aber was ist, wenn wir Hunderte oder sogar Tausende von Elementen haben? Es ist einfach unpraktisch, solchen Code zu schreiben. Haben wir eine Lösung? Gibt es eine Möglichkeit, Angular die Arbeit für uns erledigen zu lassen? Die Antwort sind Angular-Direktiven. Wir werden später ausführlicher über Anglo-Direktiven sprechen später ausführlicher Aber vorerst werden wir uns auf eine bestimmte Richtlinie konzentrieren , die uns bei dieser Aufgabe helfen wird, und diese Richtlinie ist NG 4. Lass mich dir zeigen , was ich meine. Also werde ich nur ein Tag definieren, ein Tauch-Tag. Und hier werde ich eine Direktverbindung verwenden. Und die Syntax dafür lautet wie folgt: Stern NG Vier. Und hier sage ich, lass den Beitrag des Benutzers posieren. G für die Direktive ermöglicht es uns, über ein Array namens Benutzerpose zu iterieren Und für jedes Element im Benutzer-Pose-Array wird eine lokale Variable namens post erstellt, die das aktuelle Element in der Iteration darstellt Kurz gesagt, deklarieren wir für jedes Element im Array eine Variable und von spezifiziert das Array, durch das wir uns schleifen, was in diesem Fall Benutzerpose ist Um auf die Daten des aktuellen Elements zuzugreifen, können wir diese Variable verwenden Ich werde das durch Post ersetzen. Tangler wird dieses Tag im Wesentlichen so oft wiederholen, der Anzahl der Elemente im Array oder der Anzahl der Elemente im Benutzerbeitrag entspricht Array oder der Anzahl der Elemente im Benutzerbeitrag Und wir können auf die Daten jedes einzelnen Elements zugreifen , indem wir diese Variable namens post verwenden Nun, falls Sie sich fragen, wie wir diese Direktiven in einer TML-Datei verwenden können diese Direktiven in einer TML-Datei verwenden Nun, wenn wir diesen Code kompilieren, wird Angular sie auswerten und dann dynamisches STML generieren Wenn wir hier also Hunderte von Elementen haben, würden diese vielen Du-Tags von Angular einmal nach der Kompilierung erstellt Browser verstehen diese Anweisungen nicht. Diese werden von Angular der Einfachheit halber bereitgestellt. Lassen Sie mich die Datei speichern und schauen wir uns den Browser an , um zu sehen, ob er die Daten rendert, und tatsächlich hat es funktioniert Jetzt möchte ich dir einen Auftrag geben. Fahren Sie fort und zeigen Sie Kommentare für jeden Beitrag an. Das ist ganz einfach und Sie kennen die Lösung bereits. Ich hoffe du wirst es tun. Ich sehe dich als Nächstes. 10. 0110 Anzeigen von Beitrags-Kommentaren: Wir können den Namen des Autors und den entsprechenden Beitrag anzeigen und den entsprechenden Beitrag Lassen Sie uns nun weitermachen und die entsprechenden Kommentare anzeigen . Außerdem werden wir diese Schaltflächen „ Gefällt mir“ und „Beitrag“ sowie dieses Eingabefeld hinzufügen . Für diese spezielle Vorlesung werden wir keinerlei Verhalten für diese Schaltflächen angeben . Das werden wir in der nächsten Vorlesung oder in den nächsten Vorlesungen tun . Gehen wir also zurück zum Visual Studio-Code. Ich hoffe, Sie haben versucht, die Kommentare hinzuzufügen , und ich hoffe , dass Sie erfolgreich sind. Wenn nicht, schauen Sie sich einfach an, wie es gemacht werden sollte. Also nur zur logischen Trennung werde ich ein weiteres Dew-Tag hinzufügen. Dies könnte sich als nützlich erweisen, wenn wir bestimmte Abschnitte gestalten möchten. Und in diesem Dev-Tag werde ich eine ungeordnete Liste erstellen, in der wir die Kometen anzeigen Hier werden wir die NGF-Direktive verwenden, um sozusagen die gesamte Befehlsliste zu durchlaufen oder zu iterieren Also verwende ich genau dieselbe Syntax. Nennen wir es als Kommentar, und ich werde dieses spezielle Feld so kopieren. Und natürlich müssen wir das aus diesem variablen Beitrag abrufen , der die aktuellen Elementbefehle enthalten würde. Post-Punkt-Befehle. Und innerhalb dieses Tags können wir Interpolation verwenden, um den Kommentar anzuzeigen Speichern Sie die Datei auf diese Weise. Und wenn ich zum Browser zurückkehre, sollten wir die Kommentare sehen. Lassen Sie mich auch schnell die Schaltfläche hinzufügen. Ich werde es so nennen. Wir benötigen auch einen ähnlichen Button, um einen Kommentar zu posten. Nenn es Post. Und dann brauchen wir ein Eingabefeld. Einfach so. Speichern Sie die Datei. Gehen wir zurück zum Browser. Wir haben also den Like-Button, das Eingabefeld und den entsprechenden Post-Button. Natürlich haben wir im Moment kein Verhalten für diese Schaltflächen. Das werden wir in den kommenden Vorlesungen tun. Ich werde dich sehen 11. 0111 Ereignisbehandlung Hinzufügen von Verhalten: Lassen Sie uns jetzt an diesem Like-Button arbeiten. Ich möchte, dass Sie darauf achten, wie sich dieser Like-Button verhält In dem Moment, in dem wir die Anwendung zum ersten Mal starten, werden alle Beiträge den Status „Unbeliebt heißt, wir werden für jeden Beitrag diese Schaltfläche mit dem Namen L sehen . Wenn ich bei einem Beitrag auf die Schaltfläche „Gefällt mir“ klicke, sollte sich der Status wie folgt ändern Der Text auf der Schaltfläche sollte sich zu Ungefällt ändern, und dann sollten wir diesen Text sehen können , der besagt: Dir hat dieser Beitrag gefallen. Und wenn ich auf die Schaltfläche Unlike klicke, sollte sie wieder zur Schaltfläche L wechseln. Und das erreichen wir, indem wir eine Liste oder eine Reihe von Beiträgen führen, die mit „Gefällt mir“ markiert wurden. Wenn Sie sich erinnern, haben wir für jedes einzelne Element dieses ID-Feld. Sobald ich auf die Schaltfläche „Gefällt mir“ eines bestimmten Beitrags klicke , fügen wir die entsprechende ID zu dieser Liste oder dem Set hinzu. Auf diese Weise können wir alle Beiträge verfolgen , die mit „ Gefällt mir“ markiert wurden, und auf dieser Grundlage können wir den Text auf der Schaltfläche sowie den Text, den wir daneben sehen, anzeigen . Schauen wir uns also an, wie es gemacht wird. Deshalb werde ich hier ein neues Set vorstellen , das eine Liste von Beiträgen enthält, die mir gefallen. Ich werde Set sagen. Dadurch wird eine Reihe von Zahlen beibehalten , da das ID-Feld vom Typ Zahl ist. Und dann werde ich eine Methode namens like post vorstellen . Und dann schicken wir ihm die Post-ID. Welches ist vom Typ Nummer. Diese Methode wird nichts zurückgeben , also sagen wir ungültig. Dann werden wir die Bedingung stellen , dass wir überprüfen, ob dieser punktähnliche Postpunkt diese gesendete ID hat. Wenn das der Fall ist, wollen wir diese ID aus der Liste der Beiträge mit „ Gefällt mir“ entfernen . Diese Methode würde jedes Mal ausgelöst , wenn wir diese Taste drücken. Wenn wir auf die Schaltfläche „Gefällt mir“ klicken, fügen wir diese ID im Wesentlichen zu dieser Liste oder dem Set hinzu und umgekehrt. Wenn wir auf die Schaltfläche „Unlike“ klicken, überprüfen wir, ob der Beitrag bereits im Like-Beitrag enthalten ist. Falls ja, werden wir ihn löschen. Also hier werden wir das wie Post, Punkt löschen, Post-ID, so einstellen . Dann haben wir den Else-Block und hier fügen wir einfach die Post-ID hinzu. Ich weiß, es dauert eine Weile bis du das irgendwie verinnerlicht hast, aber in einer Weile wird alles Sinn machen. Lass uns zur Vorlage gehen. Hier werden wir eine Angular-Event-Bindung durchführen. Sobald wir also auf diese Schaltfläche klicken, raten Sie mal, wir werden diese Methode wie post aufrufen und dann die aktuelle Post-ID übergeben, nur um zu wiederholen erhalten dass diese Beitragsvariable die aktuellen Elementdaten enthält, und so haben wir die ID Und hier werden wir Interpolation verwenden, um quasi zu überprüfen, ob die Post Tide in dem Beitrag , mit dem ich geliked habe, vorhanden ist, und auf dieser Grundlage wollen wir den Text anzeigen Der LED-Post-Post-Point überprüft, ob er des Beitrags gelehrt hat Ich möchte das Fragezeichen verwenden. Wenn es da ist, bedeutet das, dass Post ist wie, und jetzt wollen wir den Text anders anzeigen. Andernfalls ist der Beitrag nicht in der Liste vorhanden, daher möchten wir den Text als „Gefällt mir“ anzeigen. Lass mich das in den DVTag einfügen und ich mache Shift F, um unseren Code zu formatieren Und nebenbei werde ich ein Span-Tag einführen, und hier werden wir diesen Text eintragen Hier werde ich NG verwenden, um zu überprüfen, ob die Post-Idee in der Post-Liste mit „Gefällt mir“ oder ähnlichem Post Dot vorhanden ist , und ich werde die Post-Dot-ID auf diese Weise senden Wenn das der Fall ist, wollen wir dieses Span-Tag rendern , das diesen Text anzeigt. Ich mag diesen Beitrag. So wie es ist. Lassen Sie uns die Datei speichern und sehen, ob sie funktioniert. Ich werde diese Schaltfläche mit „Gefällt mir“ markieren, und sobald ich die Like-Taste drücke, hat sie das Klickereignis dieser Schaltfläche ausgelöst, das als Methode bezeichnet wird, und es wird geprüft, ob diese Bedingung zutrifft. In diesem Fall ist es falsch. Aus diesem Grund hat es diesen bestimmten Artikel oder die ID zur Beitragsliste hinzugefügt . Und auf dieser Grundlage ändern wir den Text auf der Schaltfläche sowie diesen speziellen Text. Lassen Sie uns das anders machen, und es schien großartig zu funktionieren. Als es mir nicht gefiel, haben wir diese bestimmte Post-ID im Grunde genommen aus der Liste entfernt, und auf dieser Grundlage rendern wir auch das Span-Tag Das wird in Angular also als Event-Handling bezeichnet. Hoffe es macht Sinn. Ich sehe dich als Nächstes. 12. 0112 Zwei-Wege-Bindung Hinzufügen von Kommentaren zu Beiträgen: Okay, lassen Sie uns nun versuchen unserer Anwendung die Funktion zum Hinzufügen von Befehlen hinzuzufügen Wir werden das erreichen, indem wir eine Kombination aus bidirektionaler Bindung und Ereignisbehandlung verwenden . Lass mich dir erklären, was ich meine. Wir haben für jeden Beitrag ein Eingabefeld. Immer wenn ich hier Text eintippe, möchte ich, dass eine Eigenschaft in der Komponente sofort aktualisiert wird. Das können wir mit einer bidirektionalen Bindung erreichen. Wenn der Benutzer auf die Post-Schaltfläche klickt, rufen wir eine Methode mit entsprechenden Post-ID auf und innerhalb der Methode werden wir versuchen, diesen Beitrag zu finden, und dann versuchen wir schließlich, diesen Kommentar in die Liste der zugehörigen Befehle einzufügen. Obwohl wir hier ein paar Kommentare sehen, fügen wir vielleicht einen neuen Kommentar in diese Liste ein. Schauen wir uns also an, wie es gemacht wird. Wir haben also bereits das Eingabefeld. Lassen Sie uns zunächst einen Standardtext eintragen. Wenn wir zurückgehen, sehen wir den Standardtext mit der Bezeichnung Kommentar hinzufügen. Also werden wir das zuerst hinzufügen. Platzhalter, füge einen Kommentar hinzu. So wie es ist. Und jetzt werde ich hier eine der Anglo-Direktiven verwenden Für bidirektionale Bindung heißt das NG Moral Und es wird mit einer Kombination aus Klammern und eckigen Klammern umschlossen und eckigen Klammern Ich werde dir gleich erklären, was hier vor sich geht. Und hier werde ich einen neuen Kommentar schreiben. Wir müssen diese Eigenschaft zur Komponente hinzugefügt haben. Ich werde es kopieren und hier eine neue Eigenschaft erstellen. Es wird vom Typ Zeichenfolge sein, weil der Benutzer das eingibt. Standardmäßig wird es nichts haben. Speichern Sie die Datei. Dies gehört zum Forms-Modul, also müssen wir die Datei importieren und speichern und der Fehler tritt nicht mehr auf. Das ng-Modell ist also die Anglo-Direktive, die für die bidirektionale Bindung all dieser Formularelemente verwendet wird bidirektionale Bindung all dieser Formularelemente Das Eingabefeld ist jetzt an die neue Befehlseigenschaft in der Komponente gebunden die neue Befehlseigenschaft in der Komponente Wenn sich der Wert des Eingabefeldes ändert der Benutzer etwas eingibt, wird der Wert des neuen Kommentars automatisch aktualisiert. Diese Eigenschaft würde sofort aktualisiert werden. Aber warum das als bidirektionale Bindung bezeichnet wird , werden Sie am Ende dieser Vorlesung verstehen Als Nächstes werden wir eine Methode erstellen, die diesem Post-Button entspricht. Wir werden also ein Klickereignis wie bei dieser Schaltfläche haben, ich werde das kopieren und hier ändern wir den Methodennamen in Kommentar hinzufügen, und wir werden erneut die Beitrags-ID senden. Lassen Sie uns diese Methode erstellen. Lassen Sie mich noch einmal diesen Code kopieren, um etwas Zeit zu sparen. Wir werden jedoch die Logik ändern. Zunächst werden wir versuchen, den Beitrag anhand der Post-ID zu finden . Also lass uns das machen. Ich werde einen konstanten Beitrag erstellen diesem Benutzer entspricht. Ich versuche, einen Beitrag mit dieser Post-ID zu finden, und das ist eine Syntax dafür Entspricht gleich, entspricht der Post-ID. Die Find-Methode wird also verwendet, um das Post-Array des Benutzers zu durchsuchen, aber den Beitrag, dessen ID mit der als Argument angegebenen Post-ID übereinstimmt der als Argument angegebenen Post-ID Wir haben dann eine Bedingung , um zu sehen, ob der Beitrag tatsächlich existiert und nicht undefiniert ist Wenn der Beitrag also existiert und dieser neue Kommentar punktuell abgeschnitten ist, wollen wir erst dann den Kommentar hinzufügen Wenn der Beitrag also nicht undefiniert ist und der neue Kommentar mit einem bestimmten Wert aktualisiert wird nachdem die letzten Leerzeichen gekürzt wurden, dann wollen wir diesen Kommentar tatsächlich in die Kommentarliste dieses bestimmten Beitrags aufnehmen Ich sage Post Dot Befehle Punkt. Drücken Sie diesen Punkt Neuer Befehl. Und schließlich, sobald wir den Befehl gedrückt haben, wollen wir diesen Text nicht mehr im Eingabefeld anzeigen. Deshalb aktualisiere ich die neue Befehlseigenschaft und mache sie leer, speichere die Datei. Ich werde das auch speichern. Gehen wir zurück und sehen, ob sich die Anwendung wie erwartet verhält . Und es hat funktioniert Wir können einen neuen Befehl hinzufügen. Nun, warum wird das als bidirektionale Bindung bezeichnet? Wie Sie feststellen, wird in dem Moment, in dem etwas in diesem Eingabefeld aktualisiert wird, dasselbe auch in diesem Feld widergespiegelt. Es ist auch andersherum wahr. In dem Moment, in dem wir diese spezielle Eigenschaft aktualisiert haben, spiegelt sich dies auch hier wider. Daten fließen im Wesentlichen nicht nur von der Vorlage zur Komponente, sondern auch umgekehrt. Die Daten werden ebenfalls aktualisiert und von der Komponente zur Vorlage übertragen Bei Interpolation ist dies jedoch nicht der Fall. Es wird als unidirektionale Bindung bezeichnet, bei der die Daten einfach von der Komponente zur Vorlage fließen der Komponente zur Vorlage Wir haben den Text hier also nicht mehr. Hoffe es macht Sinn. Ich sehe dich als Nächstes. 13. 0113 SCSS Mini-Masterclass: Dies wird ein Minimster-Kurs zu SCSS oder SASA CSS sein SCSS SCSS ist wie eine weiterentwickelte Version von CSS. Es sieht ähnlich aus wie normales CSS, jedoch zusätzliche Funktionen, um unser Styling effizienter zu gestalten SCSS ist jedoch beliebter weil es vollständig mit CSS kompatibel ist, was bedeutet, dass Sie jede vorhandene CSS-Datei verwenden und mit dem Hinzufügen von SCSS-Funktionen beginnen können , ohne viel zu ändern In diesem Vortrag werden wir über alle wichtigen Funktionen sprechen , die Sie kennen müssen , zusammen mit Beispielen Lassen Sie uns zunächst über Variablen sprechen. Schauen Sie sich diese Tradition des CSS-Stylings an. Wir verwenden genau den gleichen Wert oder die Farbe für das Farbattribut in H eins und H zwei. Nun, das könnte ein Problem sein denn wenn wir diese Farbe aktualisieren würden, müssten wir das an beiden Orten tun. In diesem Fall sind es nur ein paar Standorte, sodass wir möglicherweise kein Problem haben. Aber was wäre, wenn wir die Farbe an mehreren Stellen aktualisieren würden ? Nun, das wird zu einer mühsamen Arbeit und ist fehleranfällig. In SCSS haben wir Variablen. Hier versuchen wir, eine Variable namens Primärfarbe zu definieren , deren Wert die Farbe selbst ist, und wir verwenden diese Variable an mehreren Stellen Wenn wir also den Wert der Primärfarbe aktualisieren, wird er an allen Stellen wiedergegeben , unabhängig davon, wo wir diese Variable verwenden. Wir können auch benutzerdefinierte CSS-Eigenschaften oder CSS-Variablen verwenden, aber sie sind in Bezug auf die Schreiblogik nicht so flexibel wie SCSS-Variablen , da SCSS es uns ermöglicht Code mit erweiterten Funktionen wie Schleifen, Bedingungen und Funktionen zu schreiben , die mit benutzerdefinierten CSS-Eigenschaften nicht möglich sind mit benutzerdefinierten CSS-Eigenschaften nicht möglich jedoch einen wesentlichen Vorteil , nämlich CSS-Eigenschaften haben jedoch einen wesentlichen Vorteil , nämlich die Möglichkeit, die Werte während der Laufzeit dynamisch zu aktualisieren Werte während der Laufzeit dynamisch In SCSS sind Variablen dagegen statisch und funktionieren nur zur Kompilierzeit. Mit anderen Worten, die SCSS-Datei würde irgendwann zu einer entsprechenden CSS-Datei kompiliert , damit Browser sie verstehen können Wir können ihre Werte während der Laufzeit, wenn die Anwendung ausgeführt wird, nicht ändern während der Laufzeit, wenn die Anwendung ausgeführt wird Als nächstes kommt die Verschachtelung. In CSS müssen wir Selektoren wiederholt schreiben, auch wenn sie verwandt sind, genau wie Sie hier sehen In CSS dagegen ist Verschachtelung erlaubt, wodurch der Code lesbarer und einfacher zu verwalten Und wenn wir uns diesen Code ansehen , können wir erkennen, wie die entsprechende STML aussehen würde Es sollte ungefähr so aussehen. Wir haben das NAV-Element , dessen untergeordnetes Element unordered List oder UL ist, dessen untergeordnetes Element das LI-Tag Dieselbe Struktur wird auch beim Design verwendet, wodurch es besser lesbar und wartungsfreundlicher Als nächstes kommen Partials. CSS unterstützt zwar die Importregel, aber jede Eingabe führt zu einer zusätzlichen STDB-Anfrage, was die Ladezeit verlangsamen kann Andererseits ermöglicht uns SCSS , die Stylesheets in Teildateien aufzuteilen und sie ohne zusätzliche SDP-Anfragen zu importieren , da sie schließlich zu einer einzigen CSS-Datei kompiliert werden Alle Dateien, die Sie hier sehen und die mit einem Unterstrich oder Teilzeichen beginnen, und wir verwenden die Import-Anweisung, um sie in die SCSS-Hauptdatei zu importieren Als nächstes kommen Mixins. Wenn Sie in CSS genau dasselbe Styling für mehrere Elemente verwenden , müssten Sie den Code manuell kopieren und einfügen In SCSS hingegen haben wir Mixins, die es uns ermöglichen , wiederverwendbare Stilblöcke zu erstellen und sie in unserem Stylesheet wiederzuverwenden Auf diese Weise können wir Wiederholungen vermeiden und die vorhandenen Stile wiederverwenden Ähnlich wie beim Schreiben von Funktionen beim Programmieren. Und in diesem Fall haben wir den Mix im benannten Button-Stil, und wir fügen diesen Mix an mehreren Stellen ein. Und wenn wir das tun, bringen wir auch einige Argumente mit. In diesem Fall sind die Argumente die Hintergrundfarbe und die Textfarbe. Standardmäßig waren sie blau und weiß, aber wir können sie überschreiben, indem wir unsere eigenen Argumente senden Für Taste eins senden wir also Schwarzweiß und für Taste zwei senden wir Rot und Weiß Als nächstes kommt die Erbschaft. Wenn wir in herkömmlichem CSS genau dasselbe Styling an mehreren Stellen verwenden müssen genau dasselbe Styling an mehreren Stellen , müssen wir es erneut einfach kopieren und einfügen. Ein CSS ermöglicht es uns jedoch, einen Selektor um einen anderen zu erweitern, und auf diese Weise können wir die vorhandenen Stile wiederverwenden Als nächstes kommen Loops. Schauen Sie sich diesen traditionellen CSS-Code an. Schauen Sie sich im Gegensatz dazu den SSS-Code an, dem wir Loop verwendet haben, um diese Stile dynamisch für uns zu generieren Der FOR-Director erstellt eine Schleife und Dollar I wird verwendet, um in diesem Fall die aktuelle Schleifeniterationsnummer sowohl in den Klassennamen als auch in den Eigenschaftswert einzufügen die aktuelle Schleifeniterationsnummer sowohl in diesem Fall die aktuelle Schleifeniterationsnummer sowohl in den Klassennamen als auch in den Eigenschaftswert Dieser Code generiert genau den gleichen Stil, den Sie während der Kompilierung auf der linken Seite sehen Als nächstes kommen Funktionen. CSS hat eine begrenzte Anzahl integrierter Funktionen wie Calc, RGB oder URL Sie können jedoch keine eigenen Funktionen in CSS definieren. In einem CSS hingegen können wir benutzerdefinierte Funktionen erstellen , um Operationen wie Farbmanipulation, Berechnungen, im Grunde alles, was Sie tun möchten, durchzuführen. Hier haben wir also die Funktion Breite berechnen, und dann rufen wir diese Funktion auf, indem wir ein Argument einsenden. In diesem Fall senden wir 100 Pixel, was mit 1,5 multipliziert würde, und derselbe Wert würde zurückgegeben Als nächstes kommen bedingte Aussagen. Schauen Sie sich diesen Code an. Wie Sie sehen können, ermöglicht SCSS bedingte Logik mit I Ls- und Elseif-Anweisungen Hier überprüfen wir also, ob die Theme-Variable Wenn wir dafür ein spezielles Styling haben, siehe, wir führen ein anderes Styling ein. Als nächstes kommen mathematische Operationen. CSS hat sehr grundlegende mathematische Operationen , die Sie mit Calc ausführen können, aber SCSS ermöglicht komplexe mathematische Operationen direkt, ohne dass die Calc-Methode erforderlich Das ist alles über SESS und herzlichen Glückwunsch. Sie haben gerade die SCSS-Meisterklasse abgeschlossen . Wir sehen uns als Nächstes 14. Skillshare Bewertung fragen: Hallo, das ist dein Lehrer für diesen Kurs und ich hoffe, dass dir die bisherige Reise wirklich Spaß macht. Der Grund für dieses Video ist im Grunde, dass wir Sie bitten , sich ein paar Minuten Zeit zu nehmen , um diesen Kurs zu bewerten und zu überprüfen. Das ist sehr wichtig, da das Skillshare-Team je nach Anzahl der Bewertungen und Bewertungen, die der Kurs erhält, entscheidet, ob der Kurs auf dieser Plattform bleibt oder entfernt wird Leider wurden einige meiner Kurse entfernt. Und viele Schüler waren davon betroffen, weil es ihnen an ausreichenden Bewertungen und Bewertungen mangelte Wenn es kein großer Gefallen ist, nehmen Sie sich einfach ein paar Minuten Zeit und lesen Sie für diesen Kurs und beschreiben Sie auch einige Zeilen, was Sie bisher gelernt haben. Und wenn es Ihnen auf die eine oder andere Weise geholfen hat, wird das dazu beitragen, dass dieser Kurs auf dieser Plattform am Leben bleibt Und wahrscheinlich werden Sie auch den Zugang zu diesem Kurs nicht verlieren. Ich hoffe du tust das. Vielen Dank und wir sehen uns als nächstes. Hab einen schönen Tag vor dir. 15. 0114 Styling unserer Beiträge-Anwendung mit SCSS: Ich habe das Styling für unsere Anwendung eingeführt , damit sie so aussieht Da Sie jetzt mit SCSS vertraut sind, sollten Sie in der Lage sein, zu verstehen, was hier vor sich geht Im Grunde habe ich das Klassenattribut für alle DV-Tags im HTML-Code eingeführt und auch das entsprechende Styling bereitgestellt. Und falls Sie es bemerken, versuchen wir, der gleichen Struktur des HTML-Codes selbst zu folgen und sie nachzuahmen gleichen Struktur des HTML-Codes Wir haben also das DV-Tag, in dem wir einige untergeordnete Du-Tags haben, und wir folgen derselben Struktur Wir haben also den übergeordneten DevTag-Selektor. Post ist der Name der Klasse, die wir hier verwendet haben. Darin versuchen wir, die Unterdivs, Aktionen und Kommentare auszuwählen Und wir haben für das Styling ihrer Elemente gesorgt. Ich möchte, dass Sie sich etwas Zeit nehmen, diese Datei durchgehen und versuchen zu verstehen, was wir hier tun wollen. Ich habe auch einige Kommentare verfasst, damit Sie sie verstehen. Und ich glaube nicht, dass es für mich Sinn machen wird , Sie durch jedes dieser Attribute zu führen, denn ehrlich gesagt ist Styling eine der einfachsten Dinge, die man tun kann. Und außerdem wird dies nicht wirklich als technische Fähigkeit angesehen. Ich hoffe, es macht Sinn. Ich sehe dich als Nächstes. 16. 0115 Angular Services: Stellen Sie sich vor, Sie erstellen eine E-Commerce-Website mit Angular Als Teil Ihres Projekts verfügen Sie jetzt möglicherweise über diese Komponenten, Profilkomponente und die Komponente Bestellungen. Profilkomponente dient der Anzeige des Benutzerprofils, und die Komponente Bestellungen dient der Anzeige der historischen Bestellungen des Benutzers. Natürlich können Sie auf einer E-Commerce-Website Hunderte von Komponenten haben. Aber lassen Sie uns anhand dieses Beispiels auf diese konzentrieren. Möglicherweise gibt es bestimmte Funktionen, die in mehreren Komponenten weiterhin gemeinsam sein werden. In diesem Fall benötigen wir möglicherweise eine Authentifizierung, die sich in diesen beiden Komponenten befindet Möglicherweise haben wir einige Codezeilen , um den Benutzer zu authentifizieren, und dieser Authentifizierungscode sendet die Anfrage an den Server, um sicherzustellen, dass der Benutzer tatsächlich der ist , für den er sich ausgibt Nun, das ist eine sehr ineffiziente Methode, um mit diesem Szenario umzugehen. Kannst du dir vorstellen warum? Nun, zuallererst haben wir den gleichen Code, der in mehreren Komponenten entworfen wird, das ist also Wiederholung Zweitens stellen wir mehrere Anfragen, was die Serverressourcen belasten wird Wir sollten in der Lage sein, nur eine Anfrage zu senden und diesen Status dann irgendwo zu speichern , damit wir die Anfrage zur Authentifizierung des Benutzers nicht weiter senden müssen die Anfrage zur Authentifizierung des Benutzers nicht weiter senden Genau deshalb brauchen wir Angular Services. In diesem Szenario könnten wir einen Dienst namens AT-Service einführen , der über einen authentifizierungsspezifischen Code verfügt. Wir werden den Authentifizierungscode von den Komponenten in diesen AT-Service verschieben , sodass er an einem Ort verbleiben kann und die Komponenten lediglich den AT-Dienst verwenden , um den Authentifizierungsstatus des Benutzers zu ermitteln. Aber es ist der AT-Service , der die Anfrage tatsächlich an den Server sendet , um den Benutzer zu authentifizieren Sobald dies der Fall ist, wird es auch einen Zustand beibehalten. Im Wesentlichen könnten wir innerhalb des AT-Dienstes eine Eigenschaft haben, um den Authentifizierungsstatus des Benutzers zu speichern. Es wird die Anfrage nur einmal senden und dann den Status oder den Eigenschaftswert aktualisieren. Komponenten schauen sich einfach den Eigenschaftswert an und anhand dessen wissen sie, ob sie gerendert werden sollen oder nicht. Im Grunde verwenden wir also Dienste, um Daten abzurufen oder um mit dem Server zu interagieren und den Status beizubehalten, wie Sie gerade gesehen haben Möglicherweise haben wir auch Hilfsfunktionen sich im AT-Service Wenn Sie also Hilfsfunktionen wie Datentransformation oder Validierung von Benutzereingaben haben, können Sie sie alle an einem Ort innerhalb des Und natürlich könnten wir auch die Geschäftslogik haben. In diesem Fall prüfen wir im Grunde, ob der Benutzer über ausreichende Berechtigungen verfügt oder nicht. Aber was sind die Vorteile dieses Ansatzes? Nun, zuallererst die Wiederverwendbarkeit von Code, Logik kann einmal geschrieben und dann für mehrere Komponenten verwendet werden Trennung der Probleme, sodass sich die Komponenten weiterhin auf die Präsentationslogik konzentrieren, während die Geschäftslogik und das Abrufen von Daten auf Dienste verlagert Dadurch wird auch die Vertrauenswürdigkeit von Diensten verbessert , da sie sich nicht mit irgendeiner Benutzeroberflächenlogik befassen Als Nächstes werden wir den Service in unserer Facebook-Post-Anwendung einführen . Wir sehen uns als Nächstes. 17. 0116 Endpunkt konfigurieren und Servieren der Daten: Im Moment erhalten wir alle Post-Daten von der übergeordneten Komponente Das ist kein realistisches Szenario. Wir müssen diese Daten vom eigentlichen Server bekommen , und raten Sie mal, was? Wir haben derzeit keine Server, die diese Daten bereitstellen. Idealerweise sollten wir einen Server mit Cloud-Registrierung erstellen und dann einen Server-Site-Code schreiben , der diese API tatsächlich zum Senden dieser Daten verfügbar macht, aber ich habe eine bessere Lösung für dieses Problem werde einfach eines der vorhandenen Online-Tools verwenden der vorhandenen Online-Tools Ich bin mit einer schnellen Google-Suche auf diese Seite gestoßen, und das scheint das Problem zu lösen. Der Name der Website lautet also bispto.com Slash MOC Hyphen API. Und wie der Name schon sagt, können wir damit eine Schein-API erstellen, sodass wir uns nicht die Mühe machen müssen, den Server zu erstellen und den Code zu schreiben, bla, bla, Code zu schreiben, bla, bla Zum Zeitpunkt dieser Aufnahme ist diese Website aktiv. Wenn Sie diese Website mit einer schnellen Google-Suche nicht live sehen können , können Sie viele solcher Tools leicht finden. Also, was ich jetzt tun werde, ist, diese Beitragsdaten zu kopieren. Bevor wir sie bereitstellen, müssen wir sicherstellen, dass sie im richtigen JSON-Format vorliegen. Dafür verwende ich ein anderes Tool, das ich wiederum bei einer schnellen Google-Suche gestoßen bin. Also werde ich es hier einfügen und auf Verarbeiten klicken. Wenn Sie neugierig auf den Namen der Website sind, dann ist das jsonformata.usccept.com Offenbar handelt es sich also nicht um ein angrenzendes Format. Wir sollten doppelte Anführungszeichen für die Schlüssel und auch für die Werte haben für die Schlüssel und auch für die Werte Also hat es die Arbeit für uns erledigt. Ich werde es kopieren und hier einfügen. Im Wesentlichen bitten wir dieses Tool, diese Daten als Antwort zu senden , wenn ich die Anfrage sende. Und hier werde ich Pose sagen. Wenn der URL-Endpunkt oder die UR mit einem Schrägstrich endet, dann wollen wir, dass dieses Tool diese Daten sendet Stellen Sie sicher, dass 200 in Ordnung sind, und klicken Sie auf Create Mock Server Um sicherzugehen, dass es funktioniert, werde ich das kopieren. Lass es mich für dich vergrößern. Ich kopiere diese URL, füge sie hier ein, posiere und wir können die Antwort sehen, die wir benötigen. Fahren wir mit der nächsten Vorlesung fort. 18. 0117 Abrufen von Daten aus dem Dienst: In dieser Vorlesung werden wir uns ansehen, wie wir die Daten von diesem Server abrufen können die Daten von diesem Server , damit wir etwas damit anfangen können Lassen Sie uns also zunächst einen Dienst erstellen, und der Befehl dafür lautet NG generate service. Es wird uns bitten, einen Namen für den Dienst anzugeben. Ich nenne es Pose. Also hat Angler diese beiden Dateien erstellt. Lass mich das öffnen. Ich werde eine Variable erstellen, die diese URL enthalten wird. Privat, nennen wir es so, wie API-URL gleich ist, und ich werde diese URL kopieren Als Nächstes verwende ich den Konstruktor, um die STTP-Client-Abhängigkeit einzufügen Lass mich dir zeigen, was ich meine. Wir haben den Konstruktor bereits erstellt Und wenn Sie sich fragen, was ein Konstruktor ist, ist es im Grunde eine spezielle Methode, die automatisch aufgerufen wird, wenn eine Instanz der Klasse erstellt wird Wenn also die Instanz von Post Service erstellt wird, ruft Angler den Konstruktor automatisch Normalerweise verwenden wir den Konstruktor, um die Abhängigkeiten einzufügen . Lass mich dir zeigen, was ich meine Ich sage privater STTPE-TDP-Client STDP-Client ist im Wesentlichen eine Typoskriptdatei und enthält Code, um die Anfrage an den Server zu senden und die Daten abzurufen Wir verwenden dies also im Grunde, um eine HDP-Anfrage an den Server zu stellen HDP-Anfrage Und wenn es im Konstruktor angegeben wird, injiziert das Angular Dependency Injection System bei jeder Erstellung automatisch Angular Dependency Injection System bei jeder Erstellung automatisch eine Instanz des TDP-Clients Damit müssen wir keine Instanz von astrotypischem Licht manuell erstellen Wir können Angular bitten, die Instanz für uns zu injizieren. Aber um die Instanz des astrotypischen Clients tatsächlich zu erstellen , müssen wir Angular mit Hilfe des Anbieters darüber informieren mit Hilfe des Anbieters Lass mich dir zeigen, was ich meine. Ich werde die App-Konfiguration Dot Ts öffnen, und hier haben wir bereits einige Anbieter. Zusätzlich zu diesen werde ich ATT-Client bereitstellen spezifizieren. So wie es ist. Also, was das bewirken wird, einfach ausgedrückt, wir sagen: Hey, Angular, wann immer eine Komponente oder ein Service eine stodypische Leitung benötigt, stellen Sie bitte sicher, dass sie Das ist es, was das bedeutet. Jetzt werden wir uns im Hauptkurs „Angular“ eingehend mit dem Verständnis befassen usw. ist , was Dependency Injection, Singleton Pattern Aber vorerst hoffe ich, dass du eine Idee hast. Durch die Angabe des Anbieters bitten wir Angular, eine Instanz von stodypic Line zu erstellen, und indem wir sie als Teil des Konstruktors angeben, bitten wir Angular, die Instanz von next einzufügen. Ich werde eine Methode erstellen, die tatsächlich die Aufgabe übernimmt, die Daten vom Server abzurufen. Ich werde es als Fetch-Pose bezeichnen, also so . Ich werde Observable A sagen . Diese Methode gibt also im Grunde Observable zurück, das ein Array mit beliebigen Elementen ausgibt Auch hier werden wir uns später eingehend mit diesen Konzepten befassen eingehend mit diesen Konzepten Aber stellen Sie sich das vorerst als etwas vor, das Daten für uns generieren wird Und hier gebe ich diesen STP-Punkt G A zurück . Wir werden die API-URL wie folgt angeben Das G ist im Grunde die Methode des tradipic-Clients , die eine stdPGT-Anfrage an die angegebene URL ausführt, und wir erwarten ein Array beliebigen Typs in schriftlicher Form Lass uns die Datei speichern. Speichern wir auch diese Datei. Wir machen ab der nächsten Vorlesung weiter. 19. 0118 Daten abonnieren und auffüllen: Okay, lassen Sie uns weitermachen und die Daten auf der Benutzeroberfläche auffüllen. Dafür öffne ich Post-Component Dot Ts-Datei Derzeit erhalten wir die Daten von der übergeordneten Komponente mit bidirektionaler Bindung. Da wir also die Daten nicht mehr von der übergeordneten Komponente abrufen werden, werde ich das loswerden, und das sollte zu einem Fehler in der übergeordneten Komponente führen. Lassen Sie uns das also schnell angehen. Ich werde das von hier entfernen. Und wir benötigen diese Daten nicht mehr in der übergeordneten Komponente, weil wir sie vom Server beziehen. Speichern Sie die Datei. Gehen wir zurück zur Post-Komponente. Und hier haben wir im Moment keinen Konstruktor Lassen Sie mich einen erstellen , weil wir den Dienst in diese Komponente einfügen möchten den Dienst in diese Komponente einfügen Constructor, privater Postdienst, Postdienst Dies hat auch den Postdienst automatisch für uns importiert . Speichern Sie die Datei. Damit bitten wir Angler, die Instanz von Post Service einzufügen Dann werde ich eine der Angler-Methoden namens NG in verwenden , damit Gate einer der Lifecycle-Hooks für Angler ist Im Grunde wird es einmal aufgerufen, nachdem Angler alle datengebundenen Eigenschaften der Komponenten initialisiert hat In der Regel ist dies ein Ort, an dem wir Komponentendaten initialisieren oder sogar Aufgaben wie das Abrufen von Daten vom Server ausführen In diesem Fall werden wir diese Methode verwenden, um die Daten mithilfe des Angular-Service abzurufen Also hier werde ich diesen Post-Service sagen und wir werden die Methode, die wir gerade erstellt haben, fetch post dot subscribe aufrufen die wir gerade erstellt haben, fetch post dot subscribe Ich werde dir gleich erklären, was wir hier machen. Und dann sage ich Pose. Dieser Punkt in der Benutzerpose, der die Eigenschaft „entspricht Pose“ füllen wird Speichern Sie die Datei. Wenn Sie die Abonnement-Methode aufrufen, mache ich Shift F, um den Code zu formatieren. Wenn Sie die Subscribe-Methode aufrufen, weisen Sie Angeler an, die SddprQuest auszuführen und Ihnen die Ergebnisse zu geben, wenn sie Wenn ich zurückgehe, können Sie sich Observable als einen Datenstrom vorstellen, der die Daten im Laufe der Zeit sendet Stellen Sie sich das als eine Pipe vor, die mehrere Werte wie Zahlen oder Objekte oder beliebige andere Daten nacheinander senden kann mehrere Werte wie Zahlen oder Objekte oder beliebige andere Daten nacheinander senden oder beliebige andere Daten nacheinander Und diese Werte kommen nicht alle auf einmal an. Sie kommen, wann immer sie bereit sind, entweder sofort oder später. Und um die Daten von einem Observable tatsächlich zu empfangen, müssen Sie es abonnieren Stellen Sie sich das Abonnieren so vor, als ob Sie einen Listener anhängen , der wartet und reagiert wenn neue Daten Und wenn Sie ein Abonnement abschließen, entscheiden Sie, was mit den einzelnen Daten geschehen soll — das ist der Sinn der absorbierbaren Daten Jetzt haben Sie vielleicht eine Frage. Warum können wir die Daten nicht einfach ohne dieses Konzept von Observable und Subscribe abrufen ohne dieses Konzept von Observable und Subscribe Nun, es kann einige Zeit dauern, bis Daten ankommen. In der Zwischenzeit möchten wir, auch unsere Anwendung läuft. Sie erlauben im Grunde, dass die Anwendung weiter ausgeführt wird, während wir auf die Antwort warten. Und sobald die Daten bereit sind, verarbeitet das Abonnement sie ohne die Benutzeroberfläche zu blockieren. Lassen Sie mich die Datei speichern und sehen, ob unsere Anwendung noch funktioniert. Okay. Im Moment glaube ich, dass unsere Anwendung nicht läuft. Lass uns zurückgehen und NG Sv machen. Gehen wir zurück zum Browser. Und es hat funktioniert. Hoffe es macht Sinn. Ich sehe dich als Nächstes. 20. 0119 Benutzerdefinierte Angular-Direktiven Strucutal- und Attibute-Direktiven: Um Direct Use und Angular zu verstehen, ist es wirklich wichtig, dass Sie verstehen, was ein Kuppel- oder Dokument-Objektmodell ist Die Kuppel ist wie eine Karte, die den gesamten Inhalt einer Webseite strukturiert darstellt . Nun, was bedeutet das? Stellen Sie sich vor, das ist Ihr HTML-Code. Wenn der Browser diesen HTML-Code lädt, liest er die TML-Datei Zeile für Zeile und erstellt eine Kuppel, die ungefähr so aussieht Hat eine ähnliche Struktur wie der HTML-Code selbst, wobei das Dokument der übergeordnete Knoten ist und der STML-Knoten ein untergeordneter Knoten ist, dessen untergeordnete Knoten Kopf und Körper sind Es folgt dieser Baumstruktur, und im Allgemeinen erstellen Browser eine Kuppel , sodass JavaScript tatsächlich darauf zugreifen und sie bearbeiten kann JavaScript kann die Knoten in der Kuppel auswählen, ändern, hinzufügen oder entfernen. JavaScript leitet Roh-HTML nicht direkt weiter. Sie manipulieren die Kuppel tatsächlich, um die gewünschten Ergebnisse zu erzielen oder die gewünschte Ansicht zu erhalten. Lassen Sie uns nun verstehen, was eine Direktive in Angular ist. Schauen Sie sich diesen Code an. In diesem Code versuchen wir, die gesamte Liste der Elemente zu durchlaufen und sie im Listenformat anzuzeigen. Annahme, dass dies die Liste ist, wir all diese Elemente im Wesentlichen im ungeordneten Listenformat Nun, Browser verstehen diese Direktive NG 4 nicht, es ist eine Anglo-spezifische Browser versteht nur HTML und kann nur JavaScript ausführen. Wenn wir also tatsächlich ein Projekt mit diesem Code erstellen, kompiliert Angular diese Datei und generiert entsprechendes JavaScript Browser verstehen können Dieses JavaScript erledigt im Wesentlichen dieselbe Aufgabe indem es alle Elemente durchsucht und eine Liste von Elementen mit dem Ai-Tag erstellt und dann schließlich ein ungeordnetes Listenelement erstellt und alle Listenelemente an dieses Element anhängt Wenn dieses JavaScript im Browser ausgeführt wird, die resultierende Kuppelstruktur könnte die resultierende Kuppelstruktur ungefähr so aussehen, was dieser STML entspricht Nun, da diese Direktive NG 4 die Kuppelstruktur manipuliert , fällt sie in die Kategorie der Strukturdirektive Daher wird NG 4 als Strukturrichtlinie bezeichnet , weil sie die Kuppelkonstruktion manipuliert Und in der Regel beginnen Strukturdirektiven immer mit einem Sternchen, wie im Fall wie im Lassen Sie uns nun über Attributdirektiven sprechen. Attributdirektiven werden verwendet, um das Aussehen oder Verhalten der Elemente zu ändern. Sie verändern nicht die Kuppelstruktur, sondern beeinflussen, wie das Element aussieht oder sich verhält. In diesem Fall verwenden wir den NG-Stil. Dies ist eine Angular-Direktive, die den Inline-CSS-Stil dynamisch auf ein Element anwendet . Es erwartet ein Objekt, für das CSS-Eigenschaften und -Werte oder die Stile gelten sollen. In diesem Fall haben wir eine Bedingung, bei der wir prüfen ob die Eigenschaft es red in der Komponente auf true oder false gesetzt ist, und auf dieser Grundlage wählen wir entweder Rot oder Blau. Wenn Es red auf true gesetzt ist, würden wir den Wert als Rot wählen. Wenn es falsch ist, würden wir den Wert als Blau wählen. Beim Erstellen des Projekts und nach dem Kompilieren dieser Datei könnte das resultierende JavaScript in etwa so aussehen Wir rufen einfach die Methode update style auf, in der wir prüfen, ob die Eigenschaft ese red auf true oder false gesetzt ist, und auf dieser Grundlage füllen wir den Farbwert entweder mit Rot oder Und diese Methode würde immer dann ausgeführt werden, wenn sich die Eigenschaft ese red ändert Nun, das ist ein grober JavaScript-Code. Das ist nicht der genaue Code. Aber die Tatsache, dass wir keine Elemente in der Kuppelstruktur manipulieren , hinzufügen oder entfernen, ist im G-Stil ein Beispiel für eine Attributdirektive Nun kann es Fälle geben, in denen eingebaute eckige Directors möglicherweise Wir benötigen eine andere Funktionalität. In diesem Fall können wir mit Angular unsere eigenen Direktiven erstellen. Schauen wir uns ein Beispiel dafür an. In diesem Fall habe ich eine benutzerdefinierte Direktive , für die ich meinen eigenen Code geschrieben habe. Ich werde dir diesen Code gleich zeigen. Aber was wir hier versuchen, ist, dass wir das DIV-Tag haben und seinen Inhalt nur rendern wollen, wenn der Benutzer angemeldet ist oder erst, nachdem der Benutzer authentifiziert wurde Wie Sie sehen können, beginnt die Direktive mit Asterix. Das heißt, es handelt sich um eine Strukturrichtlinie. Sie wird die Kuppelstruktur manipulieren. nun davon aus, dass die Eigenschaft des angemeldeten Benutzers in der Komponente auf true gesetzt ist, werden wir diesen speziellen Text „Willkommen zurück“ rendern , geschätzter Benutzer. Schauen wir uns nun den Code dieser Direktive an, App show if logged in, und so könnte er aussehen. Wir können einfach eine weitere Typoskriptdatei mit diesem Code erstellen oder einen Schnellbefehl ausführen, und Angler erstellt diese Datei tatsächlich mit einem Skelettcode. Zunächst haben wir also den Directive Decorator, der Angular mitteilt , dass es sich um eine benutzerdefinierte Direktive handelt, deren Name Appshow ist, wenn Und hier drinnen haben wir diesen Codeabschnitt. Nun, dieser Code ist eine Kombination aus zwei verschiedenen Dingen. Erstens haben wir die Eigenschaft App Show, wenn wir mit Input Decorator angemeldet sind, und zweitens ist es auch eine Setter-Methode für diese Der Eingabedekorator markiert also Appshow, ich habe mich angemeldet, als Eingabeeigenschaft der Direktive , sodass er einen Wert aus der Komponentenvorlage akzeptieren kann, in der die Direktive verwendet wird Komponentenvorlage akzeptieren kann, in der die In diesem Fall akzeptiert er den Wert, dem wir den Wert zuweisen, der als Mobbing protokolliert wurde, egal ob wahr oder Dann sagten wir, setze App Show if login so, als ob wir eine Methode definieren würden, und das definiert eine Reihe von Methoden für die Eigenschaft App show if logged in Das bedeutet, dass immer dann, wenn der Direktive ein neuer Wert mit wahr oder falsch zugewiesen wird , diese Methode mit diesem Wert als Argument ausgeführt wird. Wir bitten Angular auch, ein paar Abhängigkeiten einzufügen Container F und Template-Ref anzeigen. Grundsätzlich gilt: Immer wenn Sie ein Verzeichnis auf ein bestimmtes Stem-Element anwenden , wie in diesem Fall DIV, wird der View-Container-Ref für dieses spezifische Element erstellt, und wir verwenden dieses Objekt, um den Inhalt einzufügen. In diesem Fall verwenden wir den View-Container f, um Inhalt in dieses div-Tag einzufügen . Und Template Turf enthält tatsächlich die Inhaltsstruktur des Div-Tags, einschließlich aller verschachtelten Das Template Troof ist ein Verweis auf den Inhalt des Divs , das diese Direktive enthält In diesem Fall enthält das Template Turf im Wesentlichen den gesamten Inhalt dieses Div-Tags Und wie Sie sehen können, verwenden wir innerhalb dieser Methode, nachdem wir überprüft haben, ob das Flag angemeldet ist, und wenn es wahr ist, dann verwenden wir im Wesentlichen den View-Container, um den Inhalt innerhalb des DV-Tags zu füllen, und wir füllen ihn mit dem Inhalt in der Vorlagenreferenz Inhalt in der Vorlagenreferenz Und wenn es nicht wahr ist, sagen wir nur, alles löschen, was bedeutet, dass nichts angezeigt Ich bin mir ziemlich sicher, dass das tatsächlich sehr verwirrend klingen könnte . Wenn wir uns in den kommenden Vorlesungen ein Beispiel für eine benutzerdefinierte Direktive ansehen , werden Sie bestimmt eine bessere Vorstellung haben. Schauen wir uns nun ein Beispiel für eine benutzerdefinierte Attributdirektive an. Und hier haben wir diese benutzerdefinierte Direktive namens App Highlight. Und wie der Name schon sagt, werden wir einfach den Text in diesem P-Element hervorheben . Und so würde der Code für benutzerdefinierte Anweisungen aussehen. Wir haben also Host-Listener, die auf die Ereignisse auf dem Host-Element warten In diesem Fall wartet es auf Ereignisse, die mit der Maus eingegeben und verlassen werden, um die Markierung anzuwenden oder zu entfernen Und um den Stil tatsächlich anzuwenden, bitten wir Angler , ein paar Abhängigkeiten einzufügen : Element Ref und Element f bietet tatsächlich einen direkten Verweis auf das Dom-Element, in diesem Fall das P-Tag, und Renderer zwei ermöglicht es Ihnen, das Dom das P-Tag, und Renderer zwei ermöglicht es Ihnen, sicher zu manipulieren In dieser Highlight-Methode verwenden wir also im Wesentlichen den Renderer, um diesen Stil festzulegen Es hat zwei Argumente. Die erste ist die Elementreferenz und die zweite ist der Stil , den wir anwenden wollten. Als Nächstes werden wir unsere Facebook-Post-Anwendung verbessern und eine benutzerdefinierte Direktive einführen. Auf diese Weise wirst du es besser verstehen. Aber als Aufgabe möchte ich, dass Sie mit einer der vorhandenen integrierten Anglo-Direktiven experimentieren vorhandenen integrierten , mindestens drei davon Ich hoffe, du wirst es tun. Ich sehe dich als Nächstes. 22. 0121 Pipes in eckigen eingebauten Pipes Benutzerdefinierte Pipes: Pipes in Anglo transformieren die Eingabedaten in das gewünschte Ausgabeformat Im Grunde nehmen sie Daten als Eingabe und geben eine transformierte Version davon zurück Der beste Weg, dies zu verstehen besteht darin, sich ein Beispiel anzusehen. Hier sind einige der in Englisch eingebauten Rohre. Hier verwenden wir Pipes in Groß- und Kleinbuchstaben. Die Pipe in Großbuchstaben wird verwendet , um die Zeichenfolge in Großbuchstaben umzuwandeln , und die Kleinschreibung wird verwendet, um die Zeichenfolge in Kleinbuchstaben umzuwandeln Verwenden Sie die JSON-Pipe, die ein Objekt oder ein Array im JSON-Format anzeigt , sodass es für den Benutzer lesbar ist In der Regel verwenden wir diese Pipe zu Testzwecken. Als Nächstes haben wir die Slice Pipe, die einen Teil eines Arrays oder einer Zeichenfolge extrahiert. Slice Pipe ist auch ein Beispiel für eine parametrisierte Pipe, was bedeutet, dass die Pipe zusätzliche Argumente benötigt , um ihr Verhalten zu ändern Das Slice wird mit zwei Parametern verwendet. Null ist der Startindex und Sieben ist der Endindex. In ähnlicher Weise können wir auch einen Teil eines Arrays mithilfe von Slice Pipe anzeigen . Wir können auch mehrere Pipes in einem einzigen Ausdruck kombinieren , wie Sie es hier sehen. In diesem Fall versuchen wir, sowohl Großbuchstaben als auch Slice-Pipes zu kombinieren , und die resultierende Ausgabe ist eine Kombination aus beiden Angular ermöglicht es uns auch, benutzerdefinierte Rohre zu erstellen. In diesem Fall erstellen wir eine benutzerdefinierte Pipe, die die Zeichenfolge umkehrt. Wir können einen Angular-Befehl ausführen um den Skeleton-Code zu erstellen, und diese Klasse implementiert eine Pipe-Transformation, die es uns ermöglicht, das Verhalten für die Transform-Methode bereitzustellen . Diese Transformationsmethode akzeptiert einen Parameter vom Typ Zeichenfolge. Und innerhalb dieser Methode verwenden wir eine gewisse Logik, um die Zeichenfolge grundsätzlich umzukehren. Und so werden Sie diese Pipe in der Vorlage verwenden . Im Grunde würde der eckige Text umgekehrt angezeigt werden. Um diese Pipe zu erstellen, müssen wir diesen Befehl ausführen. Engine generiert eine umgekehrte Pipe, der Skelettcode erstellt wird wodurch der Skelettcode erstellt wird. Danach können wir die Implementierung bereitstellen. Da dies sehr einfach ist, möchte ich, dass Sie dies als Aufgabe betrachten, diese benutzerdefinierte Pipe zu erstellen und sie irgendwie zum Laufen zu bringen. Im Hauptkurs werden wir einige der anderen Konzepte besprechen, die sich auf Rohre beziehen, wie reine und unreine Rohre, asynchrone Rohre, Rohre mit mehreren Parametern usw. Aber vorerst hoffe ich, dass Sie eine Vorstellung davon haben, was Pfeifen auf Englisch sind. Ich sehe dich als Nächstes 23. 0122 Routing in Angular und Lazy Loading: In dieser Vorlesung werden wir verstehen, was Routen in Englisch sind Routen würden definieren, wie die Anwendung basierend auf der URL zwischen verschiedenen Ansichten oder Komponenten navigiert basierend auf der URL zwischen verschiedenen Ansichten oder Komponenten Lassen Sie uns das verstehen, indem Routen tatsächlich in unserer Anwendung implementieren Im Moment wird unsere Anwendung so gerendert. Wir zeigen eine Willkommensnachricht an und wir zeigen die Pose an. Ich werde jetzt eine neue Komponente namens Navigation einführen und wir werden den Code, der sich auf diese Nachricht bezieht, in die Navigationskomponente verschieben diese Nachricht bezieht, in die Navigationskomponente Darüber hinaus werden wir auch ein paar Links in dieser Komponente haben ein paar Links in dieser Komponente Der erste Link sagt Pose, welcher hat geklickt? Wir werden diese Beiträge im Grunde rendern, und auf dem zweiten Link steht mein Profil. Welcher hat geklickt? Wir zeigen im Grunde das Benutzerprofil an. Sie werden es besser verstehen, sobald wir das implementiert haben. Ich gehe zurück zu unserem Projekt, und das ist unsere übergeordnete Komponente. Im Moment zeigen wir nur die Pose an. In der Post-Komponente haben wir diesen Code, den wir zuvor eingeführt haben. Lassen Sie mich diesen Abschnitt des Codes kopieren, weil wir ihn jetzt zu einem Teil einer neuen Komponente namens Navigation machen möchten . Diese Komponente ist jetzt nur für Beiträge vorgesehen. Lassen Sie mich ein neues Terminal öffnen und eine neue Komponente namens NG Generate Navigation erstellen. Wir müssen Angler sagen, was wir generieren wollen. Es ist eine Komponente. Also hat Angler einen neuen Ordner mit komponentenspezifischen Dateien erstellt einen neuen Ordner mit komponentenspezifischen Dateien Darüber hinaus werde ich eine weitere Komponente namens Profile generieren eine weitere Komponente namens Profile In dieser Navigationskomponente werden wir den Code verschieben, den ich gerade kopiert habe. Und in der Typoskript-Datei müssen wir das auch direkt einführen Speichern Sie die Datei. In der übergeordneten Komponente werden wir den Beitrag nicht mehr anzeigen, wir werden ihn entfernen, sondern stattdessen diese Navigationskomponente anzeigen. Ich werde diesen Selektor kopieren. Ich hoffe, du kannst mir folgen. In der Typoskriptdatei der App-Komponente müssen wir diese Komponente importieren Wir benötigen diese Post-Komponente nicht mehr Wir werden sie durch eine Navigationskomponente ersetzen. Speichern Sie die Datei. Als Teil der Navigationskomponente werden wir auch einige Links einführen. Auf der ersten steht Pose und auf der zweiten steht Mein Profil. Kehren wir zum Browser zurück und sehen wir uns an , wie die Anwendung gerendert wird. Im Moment wird es also so gerendert, was natürlich nicht viel Sinn macht. Sobald wir Routing eingeführt haben, würde alles Sinn machen . Suchen Sie diese Datei mit dem Namen App Routes Dot Ts File. Wenn Sie diese Datei nicht haben, müssen Sie diese Datei manuell selbst erstellen. Und sobald Sie das getan haben, werden wir sogenannte Routen in Form eines Arrays einführen . Lassen Sie uns einen Artikel hinzufügen. Ich sage Pfad als Pose und wir verknüpfen ihn mit einer Komponente. In diesem Fall wollen wir jedes Mal, wenn jemand eine URL mit Pose als Pfad besucht , die Pose-Komponente rendern. Und in ähnlicher Weise werden wir auch eine weitere Route für das Profil einführen, und diese wird die Profilkomponente rendern. Speichern Sie die Datei. Und nur damit Sie es wissen : In der Ts-Hauptdatei booten wir die Anwendung Dies ist der Ausgangspunkt für unsere Anwendung. Anglo verwendet diese Bootstrap-Anwendung, um die App zu initialisieren und die App-Komponente zu rendern handelt es sich um die Root-Komponente oder die übergeordnete Komponente , die unsere Anwendung rendert Das entspricht also der Punkt-HTML-Komponente der App, in der gerade diese Komponente angezeigt wird, die wir gerade erstellt haben Und wir stellen Angular auch einige Konfigurationen zur Verfügung, die die Anbieter oder alle globalen Konfigurationen enthalten würden . Schauen wir uns an, was darin enthalten ist. Der Provider-Router ist also eine Hilfsfunktion von Angular bereitgestellt wird, um den Router für die Anwendung zu konfigurieren. Und es akzeptiert eine Reihe von Routen. Im Grunde genommen Ihre Routing-Konfiguration und richtet alle Abhängigkeiten ein, die für das Routing in der App erforderlich sind. Das alles wird automatisch erledigt. Ich habe diese nie selbst manuell erstellt, oder? Als wir das Projekt selbst erstellen, habe ich Angular gebeten, auch Routen zu konfigurieren, und das hat es für mich erledigt. Falls Sie Routen manuell konfigurieren, müssen Sie zusätzlich zur Erstellung der Routendatei auch diese angeben. Wir haben also Routen konfiguriert , und das ist genau der Pfad, den wir auch in den Links verwenden möchten. Hier werde ich Router-Link sagen. Das wird sein, rate mal was? Pose, dieser und dieser wird ein Profil sein. Immer wenn wir eine URL mit diesem Pfad eingeben, versucht Angle, die Profilkomponente zu rendern. Und wenn es sich um diesen Pfad handelt, würde es versuchen, die Post-Komponente zu rendern . Lass mich die Datei speichern. Aber da wir hier Router-Tinte verwenden, müssen wir das Router-Modul in diese Komponente importieren. also in der Navigations-Typescript-Datei Lassen Sie uns also in der Navigations-Typescript-Datei auch das äußere Modul einführen und die Datei speichern Und in unserer übergeordneten Komponente werden wir etwas namens Router Outlet einführen Router Outlet fungiert in Ihrer Anwendung als Platzhalter, in den der Inhalt der gerouteten Komponenten dynamisch geladen wird Hier würde Angler also versuchen, die gerouteten Komponenten zu rendern Und da wir das verwenden, müssen wir das Modul in der Typoskriptdatei der App-Komponente eingeben . Speichern Sie die Datei Wir sollten in der Lage sein, diese Komponente namens Navigation zu sehen und diese Komponente zeigt die Willkommensnachricht an und rendert diese beiden Links, für die wir Routen konfiguriert haben. Übrigens haben wir in der Profilkomponente nichts eingetragen . Lass uns das schnell machen. Ich denke, die Standardversion funktioniert vorerst. Lassen Sie uns die Datei speichern und zurückgehen und sehen, wie die Anwendung gerendert wird. So rendert unsere Anwendung also. Wenn ich auf Pose klicke, wurde die Posenkomponente gerendert und wenn ich auf mein Profil klicke, wurde die Profilkomponente gerendert. So funktioniert Routing also tatsächlich. Wir werden uns später, wenn wir mit dem Hauptgericht beginnen, eingehend mit diesen Konzepten befassen später, wenn wir mit dem Hauptgericht Und natürlich sieht unsere Anwendung im Moment optisch nicht wirklich ansprechend aus Das liegt daran, dass wir dieses Styling noch nicht hinzugefügt haben. Lassen Sie mich genau das tun und zu Ihnen zurückkehren. Okay, ich habe das Styling für unsere Anwendung eingeführt. Ein Teil des Stils ging in die Root-Komponente und ein Teil davon in die Navigationskomponente. Und letztendlich wird unsere Anwendung so gerendert. Beachten Sie, dass, wenn ich auf einen dieser Links klicke, wenn ich beispielsweise auf mein Profil klicke, die resultierende URL das Profil als Pfad hat und Angler daher die Profilkomponente rendern kann Außerdem unterstützt Angler etwas, das Lazy Loading genannt wird, was bedeutet, dass nicht alle Komponenten heruntergeladen werden , die es je gab Es würde die Komponenten herunterladen, die für die aktuelle Ansicht unbedingt benötigt werden , was bedeutet, dass neue Komponenten bei Bedarf heruntergeladen werden, wenn wir mit der Anwendung interagieren neue Komponenten bei Bedarf heruntergeladen werden, wenn Dies verbessert die Leistung und verbessert die anfängliche Ladezeit und damit auch das Kundenerlebnis. Komponenten würden also nur geladen , wenn die Route auch navigiert wird