Master Angular 2 - Teil 2 - Komponenten

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 1 Einführung in Komponenten: hallo und willkommen zu diesem zweiten Modul auf die Schaffung erstaunlicher Web-Apsis mit eckigen zwei. Jetzt, bisher, haben wir eine sehr einfache App namens APP Works und Grant. Und wenn ich mit der rechten Maustaste darauf klicke, was ich in Safari nicht tun kann. Also, was ich tun werde, ist, diese Adresse zu kopieren. Ich werde Google Chrome öffnen, und ich werde es einfach hier einfügen. Lokaler Gastgeber 4200. Wir haben diese App jetzt, wenn ich mit der rechten Maustaste klicke und ich auf Inspect klicke, werde ich meine Konsole an der Seite hier öffnen und es wird mir zeigen, wie mein HTML angelegt ist . Und ich bringe dich nur durch, bevor wir mit der Programmierung weitermachen. Nur Sie haben ein Gefühl dafür, wie eckig ausgelegt ist. Und wie Sie vielleicht erwarten, ist dies eine grundlegende Webseite. Wir haben eine HTML-Deklaration an der Spitze. Wir haben voraus Abschnitt, wo wir sehr Stylesheets und verschiedene Links laden können. Wenn Sie also Javascript-Bibliotheken hier einfügen möchten, könnten Sie das tun. Aber im Großen und Ganzen würdest du das nicht tun. Sie würden zuerst nach einer Bibliothek suchen, und auch wir haben diesen Körperabschnitt, der unsere tatsächliche App enthält und innerhalb unserer App haben wir entwurzeln und denken Sie daran, dass Entwurzelung dieses Tag war, das tatsächlich innerhalb der allerersten Komponente angegeben wurde dass wir uns angeschaut haben und dann innerhalb von dort haben wir ein H und A P, und diese haben diesen speziellen Energiegehalt Strich Aufwand gegeben, siehe Gericht Hinweis. Das ist nur eine eckige Sache, und das erlaubt uns, unsere eigenen Variablen wie App Works und Grant zu setzen. Das ist also nur ein kurzer Rückblick auf alles, was wir im ersten Abschnitt behandelt haben. So wissen Sie, wie eckig funktioniert direkt in diesem Abschnitt. Wir werden uns ansehen, wie man eine andere Komponente erstellt, und warum sollten wir das tun wollen? Nun, es gibt einen sehr wichtigen Grund, und ich zeige dir, ob ich zu dem Manchester Wetterbericht gehe, warum nicht? Gehen wir jetzt hierher. Dies wird wahrscheinlich nicht in eckig geschrieben, richtig in PHP geschrieben. Aber was Sie hier sehen können, ist ein ganzes Mischmash an Informationen, richtig? Und Sie können auch sehen, dass Manchester friert, weshalb ich von Manchester weggezogen bin und immer regnet. Aber das beiseite, was Sie sehen können, ist all diese Informationen. Aber als Entwickler müssen Sie anfangen, über all diese Informationen hinaus zu suchen, und Sie müssen in die Teile von der Seite schauen. Also, was soll ich damit meinen? Ich meine, hier haben wir diesen Aktienabschnitt und in eckigen, müssen Sie anfangen, modular zu denken. , Wenn Sie also etwas teilen möchten würden Sie in Ihrer Komponente keinen Freigabe-Abschnitt erstellen. Was Sie tun würden, ist, dass Sie eine Komponente erstellen, bei der es um die Freigabe geht. Dieser Abschnitt hier mit den Freigabe-Links wäre also eine Komponente. Dann nehmen Sie diese Komponente und Sie würden sie in jeder Seite einfügen, in der sie benötigt wird. Und Sie können sofort sehen, dass Sie viel Zeit für die Codeeingabe sparen und viel Zeit zum Ändern des Codes sparen würden . Wenn Sie jemals Dinge in der Zukunft ändern müssen, weil Ihre Komponente an einem Ort ist, was nur grundlegende gute Programmierpraxis ist, wirklich richtig. Und dann haben Sie andere Komponenten, wie Sie dieses Suchfeld haben, das eine Komponente ist. Sie haben diese Kopfzeilen. Sie haben dieses Top-Menü, das auch separate Komponenten sein würde, so können Sie sehen, wie wir Dinge in ihre eigenen Stand-Alone-Module zu trennen, was es einfacher macht, es in verschiedenen Teilen unserer Anwendung zu verwenden. Oder wir können sie sogar herausheben und in brandneue Anwendungen einsetzen. Wenn wir dies wünschen, können wir sie als Module mit anderen Entwicklern teilen. Es macht einfach alles viel einfacher in der Programmierung zu handhaben, oder? Schauen wir uns nun an, wie wir unser allererstes Modul erstellen können. Aber in der nächsten Vorlesung werde ich nur ein paar Optionen durchlaufen, die Sie auch für Redakteure für eckig haben , und ich zeige Ihnen, was mein Favorit ist. Es ist völlig kostenlos, und es liegt ganz bei Ihnen, welches Sie wählen. 3. 2 2 Welche Code-Editor sollten du verwenden?: Okay, schauen wir uns einige Editoren für den Code an, den wir schreiben werden. Bisher haben Sie gesehen, wie ich einen Editor benutze, aber ich werde Sie durch ein paar Optionen führen, um Sie wissen zu lassen, was da draußen ist. Die 1. 1 ist ziemlich beliebt, und das ist erhaben, Tex. Und dies wird auch eckig zu unterstützen Wenn ich nicht falsch liege, habe ich es nicht wirklich verwendet, aber ich habe gehört, dass es tut, aber Sie müssen es kaufen, es sei denn, Sie bewerten in umgekehrten Kommas kostenlos. Also, das ist eine Option erhabenen Text. Ein anderes ist Atom, und Sie können es von Mac herunterladen, oder Sie können es für andere Plattformen zu bekommen. Und Atom ist ein ziemlich guter Redakteur. Ich denke, es wird von Can't get Hub so weit getan, wie ich mich erinnere, es ist ihr eigener Editor, und Sie können es auch für Windows bekommen . Wenn wir also nach unten scrollen, können Sie sehen, wie es aussieht. Sieht ziemlich süß aus. Es hat eine Menge Dinge. Offensichtlich, wenn es vom Get-Hub-Team gemacht wird, wird es Unterstützung haben. Vergiss Hub, hätte ich gedacht. Lassen Sie mich sehen. Nein, ich kann nichts sehen, aber das ist eine Option für dich bei ihm. Der nächste ist ein Oldie, aber ein Goodie, was Notizblock plus plus ist. Und das kommt aus den Tagen, als die Leute nur einfache alte Notizblock benutzten, um Sachen zu schreiben , erkannten, dass es nicht ganz gut genug war, also wechselten sie darauf. Wenn du ein alter Schulprogrammierer bist, könnte das deine Tasse Tee sein, aber ich habe das Beste zuletzt gespart. Meiner Meinung nach mag ich Visual Studio-Code wirklich. Undnatürlich, natürlich, das wird von Microsoft gemacht, weil es der gleiche Namensgeber ist wie ein Visual Studio, das große I D. E , das Sie wahrscheinlich wissen. Dies ist diejenige, die ich heruntergeladen habe und ich täglich verwende. Ich habe noch nie etwas Falsches daran gefunden. Es hat viele Erweiterungen, mit denen Sie eckige Syntax hervorheben und Verknüpfungen für die Eingabe von Code erstellen können, weil einige eckige Dinge ziemlich schmerzhaft sein können, immer und immer wieder zu tippen. Und diese Abkürzungen machen es uns einfach viel einfacher. Also werde ich während der gesamten Laufzeit dieses Kurses Visual Studio-Code verwenden. Und wenn Sie keine Art von Unklarheiten wollen, dann gehen Sie weiter, laden Sie und verwenden Sie diese, es sei denn, Sie haben bereits Ihren Lieblingseditor, in diesem Fall fühlen Sie sich frei, das 4. 2 3 So erstellst du eine Komponente: Okay, Es ist Zeit, unser Projekt zu öffnen und unsere eigenen Komponenten zu erstellen. Gehen Sie weiter und öffnen Sie Ihren Lieblings-Editor. Also visueller Studio-Code, in meinem Fall. Und ich hoffe, in Ihrem Fall wird es leichter machen, mitzuverfolgen. , Die Art und Weise,wie Visual Studio-Editor funktioniert, ist, dass Sie einen Ordner öffnen müssen ,damit Sie keine Dateien müssen. , Sie öffnen einfach einen Ordner. Lassen Sie mich nachdenken. Wo habe ich das hingebracht? Ich glaube, ich habe jemand Zuschussdokumente und gehen Sie zu Ihrer Energie Tuapse, wo Sie Ihre erste raus. Doppelklicken Sie nun auf Ihre App und Sie sollten alle Dateien sehen, die wir zuvor angesehen haben. Wählen Sie keine aus. Wählen Sie einfach „Öffnen“ und sie werden für Sie in Visual Studio-Code geöffnet sein. Und Sie haben eine schöne weniger unten neben allen Dateien und Ordnern in Ihrem Projekt. Es ist also wirklich praktisch, um zu navigieren, was gerade vor sich geht. Nur um zu betonen, bearbeiten Sie nichts in Notizmodulen. Das lassen wir generell in Ruhe. werden Wirwerdenauch generell sagen, das in Ruhe lassen. Alle unsere Codierung im allgemeinen Sinne, die dreimal ist, haben gesagt, dass General jetzt innerhalb des Quellordners und dann innerhalb von dort gemacht wird . Im Allgemeinen ist das vier Generäle innerhalb des APP-Ordners. Nein, im Moment haben wir ein Nickerchen Components CSS, das derzeit nichts drin hat. Aber wir könnten Stile dort einfügen, wenn wir uns wünschen, dass wir unser HTML haben. Denken Sie daran, wir haben es mit diesem Namen Variable geändert. Und wir haben unseren Typoskript-Ordner. Nun, wenn wir ein Modul erstellen, wollen wir das irgendwie innerhalb eines eigenen Ordners speichern. Jetzt, die 1. 1 die App, Komponenten, Komponenten, die APP-Route, wenn Sie möchten, denken Sie daran, die Ausgabe ist dieser Selektor. Wir verlassen irgendwie in seiner eigenen ersten Ebene aus dem Stammordner. Es ist in Ordnung, wo es ist. Aber wenn ich eine andere Komponente erstellen möchte, können Sie sich mit drei Dateien pro Komponente vorstellen, das würde ziemlich schnell gefüllt werden. Also, was wir tun, ist, dass wir einfach einen Ordner erstellen. Also oben oben hier, gibt es eine kleine neue Ordnerschaltfläche, und wir werden weitere Komponenten erstellen. Was sollen wir nun erschaffen? Mal sehen, Vielleicht wird dies eine Bildkomponente sein, Also ist es eine gute Benennung Praxis toe tatsächlich diesen Ordner so etwas wie Bild nennen, Komponente oder Bild. Sie entscheiden, was Ihre Benennung. Ah, Konvention ist also, es liegt absolut an dir, aber ich habe vielleicht Image-Dash-Komponenten drin. Ich mag es nicht, nur einfaches altes Bild zu verwenden, weil das verwirrend wird, wenn es um das Speichern von Bildern geht . Also ist es immer gut, ein wenig ausführliche Bildtod-Komponente zu sein. Jetzt im Inneren von hier, werden wir eine neue Datei erstellen und oben oben haben wir ein wenig Selektoren. Lassen Sie mich es erweitern und drücken Sie den kleinen neuen Datei-Selektor. Jetzt kommen wir zur eigentlichen Benennungskonvention, also Bildpunktkomponenten Punkt T s. Das sollte ein Lehrer sein, und das ist eine Namenskonvention. Natürlich können Sie sehen, dass das gleiche wie Apple Component dot ts ist. Also gehen Sie zu Bildkomponente Punkt ts und raten Sie was? Dies ist noch keine Komponente. Es ist nur auf einer leeren Datei. Jetzt ist die Art und Weise, wie wir Komponenten erstellen, in der Regel in dieser Reihenfolge. Es muss keine Störung sein. Wir exportieren eine Klasse namens Bildkomponenten, also haben wir jetzt eine Klasse, die angular verwenden kann. Wir müssen eckig sagen, was für eine Sache das ist, weil es es es nicht nur aus dem Namen kennt . Nun, wir wollen diesem den Komponententyp geben. Und um das zu tun, verwenden wir, was es Dekorateure nannte. Und ein Dekorateur sitzt an der Spitze mit an Komponenten. Nun, wenn ich nur meine kleinen Klammern für die Komponente einlege, und dann hat meine geschweifte Klammer eine rote, quiggly Linie darunter, und wenn ich darauf klicke, bekomme ich diese kleine Glühbirne und du wirst diese Glühbirne noch nicht haben. Ich werde Ihnen zeigen, wie Sie es bekommen, aber es sagt uns, dass wir die Komponente aus eckigem Schrägstrich importieren müssen. Wenn ich das oben anklicke, haben wir jetzt diese Importkomponente vom Gericht, und das gibt Ihnen einen Hinweis darauf, was irgendwo in eckig passiert. Eine Komponente wurde so deklariert, aber um sie innerhalb der Sache zu verwenden, die wir machen, müssen wir sie zuerst in diese Datei importieren. Es ist ein bisschen wie die using-Anweisung in C Sharp oder das Äquivalent in Java. Ich vergesse den tatsächlichen Namen. Ist es auch Import, vergesse ich. Ich bin sicher, einer von euch wird es mir sagen, jetzt haben wir diesen Import, den wir verwenden können. Komponente. Wir haben diesen Dekorateur und sagten, dass diese Klasse eine Komponente ist. Jetzt wird dieses Konzept von einem Dekorateur immer wieder über kommen, und es gibt viele verschiedene Arten von Komponenten. Aber im Allgemeinen sind sie alle Komponenten. Also haben wir unsere Image-Komponenten fast fertig. Aber wir vermissen ein paar entscheidende Dinge. Und wenn wir unsere AP-Komponenten Punkt Typoskript als Leitfaden betrachten, schauen Sie, wir brauchen einen Selektor. Wir brauchen eine Vorlage. Wir brauchen noch keinen Stil, also lassen wir das aus. Aber diese beiden sind für die Komponenten erforderlich, die wir anzeigen werden. Es ist anders für andere Arten von Komponenten, aber sobald wir anzeigen, müssen wir einen Selektor haben und wir müssen eine Vorlage haben. Gehen wir zurück zu unseren Bildkomponenten auf Inside Off-Komponenten. Wir tippen einfach selector und wir legen einen Mantel auf. Und dann geben wir diesem in unseren Zitaten einen Namen. Jetzt der Selektor. Wenn ich nur dieses Selektorbild aufrufen und dann zu meinem HTML ging und ich das Bild-Tag verwendet habe, würde es beginnen, ein wenig verwirrend mit einigen der klassischen HTML zu werden, die Sie vielleicht wissen, dass Konvention und eckig mit einem Selektor ist, etwas wie AP Strichbild. Also dieses kleine Prequel, das ist der falsche Weg, den Kopf in Konflikt mit dem tatsächlichen Red ist jetzt. Dieses kleine Pre-Bit vor dem Bild ist eine Art eindeutige Identifikation, was bedeutet, dass unser HTML nicht mit dem klassischen HTML verwechselt wird, der überall verfügbar ist . Also haben wir unseren Selektor jetzt was brauchen wir noch? Wir brauchen unsere Vorlage und ihre beiden Optionen eine Vorlage und eine Vorlage. U R l Jetzt bedeutet eine Vorlage einfach, dass wir einige HTML in hier definieren können, die dieses Bild definiert . Definiert also diese Komponente. Anstatt eine separate Datei zu erstellen, wenn mein HTML einfach klein ist, denke ich, dass alles hier enthalten ist. Also, wenn mein HTML einfach ein Absatz ist, der besagt, dass dies ein Bild ist, weiß ich, dass ein Absatz in einem Bild ist, also ziehe mich nicht auf das. Dann gibt es keinen Sinn, in seiner eigenen Datei ist ganz glücklich, hier zu leben, oder? Also, das ist die Gesamtheit aus, Erstellen einer Komponente haben wir die Importanweisungen, so dass wir Komponente verwenden können. Wir haben diesen Dekorateur, um eckig zu erzählen. Diese Klasse ist eine Art von Komponente. Wir haben einen Selektor, so dass wir ihn irgendwo verwenden können. Und wir haben eine Vorlage. So ist unsere Komponente fertig. Aber eckig ist noch nicht bereit, es zu benutzen. Dies ein paar andere Bits müssen wir hinzufügen, um eckig zu sagen, zu gehen und nach dieser Komponente zu suchen . Das machen wir also in der nächsten Vorlesung. 5. So lernst du weiter fortwährend: 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.