Master Angular 2 - Teil 3 - Komponenten | Grant 'Angular' K | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Master Angular 2 - Teil 3 - Komponenten

teacher avatar Grant 'Angular' K, Crazy about Angular!

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

5 Einheiten (14 Min.)
    • 1. Einführung in Angular 2 auf Skillshare

      1:27
    • 2. 2 4 Registrieren deiner Komponenten für den Einsatz

      5:08
    • 3. 2 5 Verwendung deiner Komponenten

      4:25
    • 4. 2 6 Zusammenfassung der Komponenten

      1:31
    • 5. So lernst du fortfahren

      1:23
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

395

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Verstehe das Grundkonzept von Angular 2 - Komponenten.

Triff deine:n Kursleiter:in

Teacher Profile Image

Grant 'Angular' K

Crazy about Angular!

Kursleiter:in

A passionate Angular developer. Let's make cool stuff together!

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung in Angular 2 auf Skillshare: hallo und willkommen zu diesem Modul auf eckig, auch. Jetzt geht es in diesem Modul um alles, was Sie in Ihrem Titel sehen können. Ich habe derzeit das Komponenten-Modul ausgewählt, aber Sie könnten sich auf einem anderen Modul befinden. Es hängt genau davon ab, was Ihr Titel sagt. Wenn Sie gerade hier ankommen und auch neu in eckig sind , dann werden Sie nur finden, was in diesem Titel ist. Also in diesem Fall seine Komponenten, seine Komponenten, obwohl Sie auf Verwurzelung oder irgendetwas anderes suchen könnten. Wenn Sie nichts über eckig zu wissen, ist es am besten, auf mein Profil zu klicken, indem Sie einen von den Links oben rechts klicken oder nach eckigen innerhalb des Geschicklichkeitsschiffs suchen und meine Kurse finden. Sobald du das getan hast, kannst du mit Nummer eins anfangen. Es ist der allererste Kurs, den ich in meinem Profil veröffentlicht habe. Also geh da hinten. Wenn Sie ganz neu in eckig sind, , ist es sehr wichtig,dass Sie diese ganze Serie von Tutorials von Anfang an nehmen , also gehen Sie da drüben gerade jetzt. Andernfalls, wenn Sie an dem Thema interessiert sind, das hier oben Komponenten ist, dann habe ich diese manchmal in zwei Abschnitte aufgeteilt, so dass Sie möglicherweise auf Abschnitt Nummer drei klicken müssen, sobald Sie diesen bestimmten Abschnitt abgeschlossen haben . Alles in allem bist du an der richtigen Stelle, um eckig zu lernen, zu klicken und zu rollen, und lasst uns anfangen. 2. 2 4 Registrieren deiner Komponenten für den Einsatz: Okay, also haben wir eine schöne neue Bildkomponente bereit zu gehen? Nun, es ist fast bereit zu gehen. Und warum sage ich das? Nun, eckig ist nicht genau wie herkömmliche Programmiersprachen, wenn Sie dort herkommen. Und ich bin sicher, dass Sie wissen, dass Javascript etwas anders ist. Es ist mehr freie Form als das, was wir gewohnt sind. Mangula gibt ihm eine nette Struktur, aber in einer traditionellen Programmiersprache würden Sie eine Klasse erstellen. Und wenn Sie zum Beispiel C scharf verwenden , würde diese Klasse sitzen und einige in einer Art Namensraum, und dann könnten Sie sofort irgendwo anders auf diese Komponente zugreifen. Sie könnten einfach neue Bildkomponente sagen, und es würde ein Objekt für Sie erstellen, nicht ganz der Fall mit eckig, weil es keine riel Kompilierung von unserem Programm gibt. Im Hintergrund zu passieren, ist mehr von dem, was wir eine Übersetzung nennen, die nur von unserem Typoskript in JavaScript übersetzt wird. Woher wissen wir also, wo die Bildkomponente ist? Wenn wir über eckig zu gut im App-Modul sprechen Punkt ts angular geht und hat einen Blick auf alle Module, die es zur Verfügung hat. Denken Sie daran, dies ist eine Art von der Karte oder der Referenz Das ist eine bessere Erklärung. Erläuterung der Referenz, auf die es gehen sollte, wann immer es braucht, um etwas zu finden, das wir benannt haben. Und das können Sie hier bereits in Aktion sehen. Im Inneren dieses am Energiemodul Dekorator haben wir ein Array off Deklarationen, und die 1. 1 davon ist apt Komponente. Nun, offensichtlich, wir wissen, was das ist, denn wenn wir auf App-Komponente Doktor gehen, Ja, da ist es. Es ist nicht so eckig weiß, dass App-Komponente da ist. Wenn wir zurück zu dem Modul gehen, was wir tun können, ist jetzt in diesem Deklarationsarray importieren, unsere Image-Komponente. Aber bevor wir das tatsächlich tun können, müssen wir es zuerst an der Spitze in einer Anweisung importieren. Also lassen Sie uns Bildkomponenten in Ordnung von und dann in Anführungszeichen, wir werden die Adresse setzen, an der sich die Bildkomponente befindet. Jetzt. Wenn wir uns ansehen, wo dieser Ordner ist apt up Modul dot ts. Was wir tun wollen, ist in die Bildkomponenten zu gehen und es dann von dort zu bekommen. Nun, die Art und Weise, wie wir das tun, ist, dass wir dahin navigieren. Was wir also tun wollen, ist auf den aktuellen Ordner zu schauen, in dem wir uns befinden, der Punkt Schrägstrich ist und dann geben wir ihm den Ordnernamen, weil der Bildkomponenten-Ordner innerhalb desselben Ordners ist. Also lassen Sie uns sagen, Bild Bindestrich Komponenten Vorwärts Schrägstrich und dann geben wir ihm den Namen aus der Komponentendatei hofft sein Auto Feld etwas für ihre. Für mich da. Wir haben diese Bildpunktkomponente nicht und Sie werden feststellen, dass wir nicht auf dem Dock ts hinzufügen, weil wir keine Dateienden für diesen Teil benötigen. An anderen Orten tun wir es. Es ist ein bisschen frustrierend. Sie sind nicht wirklich treu geblieben Teoh irgendeine Art von Rahmen. Aber ich nehme an, das ist eines der großen Dinge über eckige zwei ist, wo hat eines der schlechten Dinge, abhängig von Ihrer Sicht. Also, was wir hier getan haben, ist, dass wir in diesem Ordner im selben Abschnitt gegangen sind, und wir haben nach der Bildkomponente gesucht. Und wenn du zum Beispiel keine rote Linie bekommst, zum Beispiel keine rote Linie bekommst, wenn ich sie falsch buchstabiere, bekomme ich eine rote Linie, dann bedeutet das, dass Visual Studio sie tatsächlich gefunden hat. Das heißt, wir haben es jetzt in unserer Erklärung zum Import zur Verfügung. So haben wir die Bildkomponente dort Jetzt ist unsere Bildkomponente registriert und einsatzbereit . Und in der nächsten Vorlesung wird Ihnen zeigen, wie wir es tatsächlich verwenden. Aber vorerst will ich dir nur zeigen, was ich vergessen habe? Ich wollte es dir kurz zeigen. Komm schon, hol es dir zusammen. - Richtig. Wir haben unsere Image-Komponenten. Ah, das war's. Wenn ich das einfach lösche, lassen Sie sich nicht nur Bildkomponenten ansehen, und Sie werden feststellen, dass ich dieses Pop-up bekomme, das Sie wahrscheinlich nicht bekommen, und das erlaubt mir, automatisch zu importieren, was ich brauche. Und es ist eine verdammte Zeitersparnis. Also lassen Sie mich das speichern und lassen Sie mich Ihnen zeigen, wo Sie das in Visual Studio-Code bekommen, Sie können einen Plug in oder eine Erweiterung bekommen, was dieses kleine Symbol hier ist, wenn Sie auf diese klicken, Dies sind diejenigen, die ich eckig zum Typoskript installiert habe. seine Auto-Import ist derjenige, den Sie wollen und vielleicht npm intelli da so, wenn Sie für den automatischen Import suchen, wenn ich einfach darauf klicke, dass es diejenige ist, die Sie suchen sollten und Sie werden sehen, wenn er seine Einträge darin setzt . Autoimporte für ihn, wie wir es gerade gesehen haben. Das ist also eine sehr praktische Erweiterung, über die man wissen muss. Okay, also mach los, installiere das, wenn du es brauchst. Aber ich habe Ihnen jetzt gezeigt, wo angular hält eine Aufzeichnung von allen Komponenten, die Sie gemacht haben , so dass wir sie in unserer App verwenden können. 3. 2 5 Verwendung deiner Komponenten: Alles klar. Es ist an der Zeit, unsere Komponente tatsächlich zu nutzen. Wir haben es in unserem APP-Modul deklariert. Lassen Sie mich das schließen. Und wir haben es selbst erschaffen. Damit wir das auch schließen können. Nun, wie verwenden wir die Komponente? Nun, lassen Sie uns dies in einer Seite unserer APP-Komponente Punkt T s und innerhalb von hier verwenden Wir betrachten jetzt diese Vorlage u r l und die Vorlage Earl ist, wo Sie tatsächlich die Komponente verwenden. Also lassen Sie uns die App-Komponente dot html öffnen und dann innerhalb von hier können wir all dieses Zeug und unten lassen . Lassen Sie uns auf wenig div Schrägstrich steif erstellen. Meine Formatierung ist etwas durcheinander. Da gehen wir. Und im Inneren von hier, werden wir es tatsächlich an die Bildkomponente mit erstellt füttern. Merken Sie sich nun an die Bildkomponenten. An diesem Punkt gibt nur Ausgänge Gesichter ein Bild, nur so dass wir wissen, dass es funktioniert. Was wir verwenden müssen, ist dieser Selektor im Bild. Gehen Sie also zum HTML und verwenden Sie einfach am Strichbild und schließen Sie dann Ihr Tag. Nun sagen Sie, dass gehen Sie zu Ihrer App, die entdecken sollte, dass es neu kompiliert werden muss. Es wird die Seite für Sie neu laden und mal sehen, da gehen wir. Wir haben Dies ist ein Bild peitscht falschen Finger. Also, das ist jetzt die Komponente für uns enthalten. Aber das ist nicht alles, was ich dir zeigen möchte. Hören Sie, was passiert, wenn ich das kopiere und ein weiteres einlege und ich es speichere? Wir kommen zurück, es kompiliert sich selbst und Sie erhalten genau die Ergebnisse, die Sie erwarten, was dazu ein Bild ist. Warum habe ich das getan? Nun, Sie können sich vorstellen, wenn Sie eine Art riesige Anwendung hatten und innerhalb dieser Anwendung, sagen wir, Sie wissen, Sie haben diesen Kurs gekauft Also es ist ein gutes Beispiel. Nehmen wir an, Sie haben auf yeah Kurs-Tag und Sie schließen, dass aus und dann innerhalb der App Kurs-Tag, Sie werden vielleicht die App Favoriten Tag Teoh Markt haben. Etwas ist deine Favoriten. Sie haben vielleicht App-Details und können Sie sehen, wie wir die Nest-Dinge innerhalb von Komponenten schwächen ? also später Wenn ichalso spätereine Scrollliste von 100 Kursen erstellen möchte, müsste ich nur das AP-Kurs-Tag enthalten und das wiederum die APP-Details enthalten würde, die den Favoriten enthalten würde, und es würde all diese Komponenten immer und immer wieder in sehr modularer Weise. Und wenn Sie ein klassischer Programmierer auf eine sehr klassische Art und Weise sind, weil ich meine, das ist im Grunde, wie wir Sachen in klassischen Sprachen machen. Also, wenn ich das speichere, zeige ich dir dieses Stück. Sehen Sie sich an, was mit unserer APP passiert. Wieder kompilieren, kompilieren, neu laden und abstürzen. Die ganze Sache wird abstürzen. Also weißt du, wie ich gesagt habe, dass es wie klassische Programmierung ist? Nun, in Bezug auf Abstürze, ist es sicherlich. Und Sie würden das nicht in schlichtem altem JavaScript bekommen. Aber du machst auch eckig. Und es sagt Ihnen, dass wir einige Vorlagenfehler haben, also werden wir Ereignisse loswerden und wir werden das Debuggen ein wenig später abdecken und dieses APP-Image tatsächlich loswerden . Also jetzt, wenn ich sage, dass unsere APP sollte wieder normal sein und sobald es wieder normal wird , werden wir in diesem Abschnitt unsere Entwurzelung betrachten. Lassen Sie mich das erweitern. Wir haben ich h ein r p und wir haben das DIV, das unser Bild enthält. also die Grundlagen aus, eine Komponente in eckig zu erstellen und sie dann für die Verwendung zu registrieren und sie dann innerhalb einer anderen Komponente zu verwenden. Also herzlichen Glückwunsch, dass Sie jetzt so ziemlich alles wissen, was Sie über eckig wissen müssen. Dazu ist die grundlegende Sache, die Sie für grundlegende, eckige APS wissen müssen . 4. 2 6 Zusammenfassung der Komponenten: Okay, das ist nur eine kurze kleine Zusammenfassung von allem, was du gelernt hast. Was ich möchte, dass Sie von diesem Modul wegnehmen, ist, dass alles eine Komponente in eckig ist . Wenn Sie es in eine Komponente aufteilen können, tun Sie dies, besonders wenn Sie diese Komponente wiederverwenden möchten. Und ich habe gerade Mega Boone dot com hochgezogen, die eine Musik-Site ist, wo man Musik kaufen kann und das ist ein großartiges Beispiel für die Erstellung von Komponenten. Jetzt weiß ich nicht, was ihre Architektur ist, aber Sie können deutlich sehen, dass Sie hier eine Komponente haben, die, wissen Sie, wissen Sie, wahrscheinlich wie eine Albumvorschau. Wir haben hier unten Komponenten, das ist eine große Albumvorschau. Vielleicht haben wir Vorschauen an der Seite verfolgt, und dies sind alle wiederverwendeten Komponenten. Das wäre also eigentlich ganz einfach in eckigen zwei zu machen. Trotz, wie komplex es aussieht. Es ist nur ein Haufen von Dave, die einen Haufen aus haben. Ah, wie du sie nennst. So ein großes Wort, nicht wahr? Haben Sie eine Reihe von Tags, die auf alle Komponenten verweisen, die Sie verwenden werden Wenn Sie also eine Sache wegnehmen, es alle Komponenten, die Sie in eckigen erstellen, Sie müssen anfangen, Websites zu betrachten, wie Sie die Matrix betrachten würden, nur eine Reihe von Code für eine Reihe von Komponenten, die alle zusammen Schlitze. Ok. Damit sind wir jetzt bereit, weiterzumachen und beginnen, einige grundlegende Konzepte von eckig bis in das nächste Modul zu lernen . 5. So lernst du fortfahren: Herzlichen Glückwunsch. Du beendest das. Ein sehr schnelles Modul auf eckig bis jetzt, wenn Sie weiter lernen wollen und warum sollten Sie nicht? Weil eckig ist ziemlich genial. Dann gibt es einen einfachen Weg, das zu tun. Ich habe es eingerichtet, also ist es schön und einfach. Wenige und Fähigkeiten teilen Sie in der unteren Ecke des Bildes auf dem Bildschirm zu sehen, gibt es eine Zahl, die eine sequentielle Zahl ist. Sie können es auch im Titel aus dem Kurs sehen. Beispiel ZumBeispiel ist dies Teil eins, aber Sie könnten in Teil fünf oder Teil 50 sein. Es spielt keine Rolle, ob Sie auf den nächsten Teil dieses Kurses zugreifen möchten, dann suchen Sie einfach nach Winkel zwei oder gehen Sie zu meiner Profilseite, indem Sie auf einen der entsprechenden Links oben rechts klicken, und Sie sehen eine Liste der Kurse , die ich lehre. Chancen. Bist du eingespernt? Sie können sofort erkennen, welcher der nächste ist, also ist es in diesem Fall Nummer zwei. Aber in Ihrem Fall könnte es Nummer 51 sein. So gehst du so weiter. Klicken Sie einfach auf den Kurs und melden Sie sich an, um Ihr angular Learning fortzusetzen, auch wenn Sie den Kurs jetzt nicht abschließen möchten. Es ist eine gute Idee, sich jetzt anzumelden. Sie wissen also, wo Sie sich das nächste Mal bei Skill Share anmelden und die Lernerfahrung am Laufen halten möchten , ich sehe Sie im nächsten Modul.