Angular beherrschen 2 – Teil 1 – Schnellstart | Grant 'Angular' K | Skillshare

Playback-Geschwindigkeit


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

Angular beherrschen 2 – Teil 1 – Schnellstart

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 (32 Min.)
    • 1. Einführung in die Winkel 2

      3:10
    • 2. So installierst die Node JS und winklig 2

      4:01
    • 3. Gestalte eine Eckart

      10:35
    • 4. Verwende eine Angular 2-App und bearbeite deinen ersten Code

      12:31
    • 5. Wie du weiterhin lernen

      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.

1.237

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Verstehe, was Angular 2 ist, installiere es und beginne dein erstes Projekt! Yep, winklig 2 ist dir einfach einfach!

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 die Winkel 2: Benutzt ihr Jungs eckig zu? Noch? Wenn du es nicht bist, solltest du es sein. Und lassen Sie mich erklären, warum Sie es sein sollten. Zuallererst kannst du damit fantastische Sachen machen. Schauen Sie sich diese Beispiele an, die ich mit eckigem Punkt com gemacht habe. Wir haben Encyclopedia Britannica, Wolfram l für wir haben den Weather Channel, wir haben Arbeit. Das ist ein großer. Ich wusste nicht, dass das existiert. Wir haben Google-Partner, und natürlich würde Google es verwenden, weil sie es irgendwie erfunden haben. Und warum all diese Leute, die auf eckig umschalten? Was ist so toll daran? Nun, angular ist einfach ein JavaScript-Framework, aber was es tut, ist, dass es alle Funktionen benötigt, die wir in JavaScript programmieren müssten und sie viel einfacher als Entwickler zu verwenden. Was bedeutet, dass du mehr Sachen machen kannst. Du kannst mehr cooles Zeug machen. Und nun, wie Sie hier sehen können, können Sie viel mehr raffinierte Sachen machen. Das ist wirklich die dritte. Es Belüftung aus dem Web Web drei Punkt. Oh, wenn du magst. Und ich werde das urheberrechtlich schützen, weil ich das gerade gerade gerade ausgedacht habe, oder? Also, was gut an eckig ist, ist auch, dass es etwas ist, das wir verwendet haben, um eine einzelne Seite Anwendung zu erstellen . Was bedeutet das jetzt? Nun, traditionell, wenn ich zu meiner Adressleiste ging, habe ich eine Adresse in und ich drücke Enter. Es geht zu einem Server, und es holt einige Sachen, die jetzt eckig sind, damit Sie das tun können, aber normalerweise nur für den ersten Abruf. So geht es und holt diese Website. Dann, wenn ich auf Sachen wie nur gehen, um diese NPR ein klicken und schauen, es erweitert und wir haben ein Video bereit zu gehen. Wir sind auf einer neuen Seite. Du wirst es ganz oben bemerken. Nichts hat sich geändert. Vielleicht hat sich die Adresse geändert, aber nichts anderes Wenn ich wieder zurückklicke, gab es keinen Ladebalkenkontrast, dass mit wenn ich wieder zurückklicke und wir haben diese Ladeleiste. Was also passiert, ist, dass die gesamte Anwendung auf meinen Computer heruntergeladen wird, wenn ich zum ersten Mal mit angular dot com mache, und jede Seite, auf die ich danach gehe, wird von eckig auf meinem PC gerendert. Der einzige Grund, warum es zu meinem Server gehen muss, ist, Bits von Daten zu bekommen, und, wie Sie sich vorstellen können, ist das in Bezug auf Webserver viel billiger. Dann senden Sie all dieses HTML und JavaScript jedes Mal, wenn ich die Seite ändere. Deshalb ist Angler so gut und warum es von all diesen Beispielen angenommen wurde, weil es wirklich die Last auf Ihrem Server entspannt. Es macht das, was wir eine einzige Seite Anwendung nennen. Dieser ganze Kanal wird also dem Lehren von eckigen und all seinen verwandten Konzepten gewidmet sein. Und ich werde an diesem Punkt angeben, zu dem wir Winkel beibringen werden. Aber wenn Winkeldreien herauskommt, werde ich alles darauf umstellen. Also, ohne weiteres, lassen Sie uns angular installieren und unseren ersten Code bearbeiten. 2. So installierst die Node JS und winklig 2: jetzt. Der allererste Schritt besteht natürlich darin, eckig selbst zu installieren, und der erste Schritt dieses Prozesses besteht darin, Knoten Js tatsächlich zu installieren. Weil kein Js der Server ist, der tatsächlich unsere eckige Anwendung bedienen wird. Es macht auch eine ganze Reihe von anderen Dingen. Und wenn Sie mehr über keine Js wissen wollen, dann können Sie einfach wissen, dass Jr gestoppt hat. Oder wie es ist, werden Sie sowieso dorthin gehen und Sie werden zum Downloadbereich gehen und Sie werden keine Js für Ihre relevante Plattform installieren . Ich bin auf einem Mac, also bekomme ich das Macintosh-Installationsprogramm und installiere das jetzt. Mach dir keine Sorgen, wenn es eine Weile dauert, um die Installation zu installieren. Das ist ganz normal. Gehen Sie einfach voran, klicken Sie darauf und installieren Sie es richtig. Sobald Sie es installiert haben, gehen Sie vor und öffnen Sie ein Terminalfenster oder ein Befehlsfenster auf Windows. Also natürlich benutze ich es, Mac, weil ich es einfach schön finde, es zu benutzen. Aber alle Befehle sind auf Windows ziemlich gleich. Also, wenn Ihre Fenster die Windows-Taste drücken und ausführen und CMD eingeben, was ein Befehlsfenster ist, und Sie sollten sich auf die gleiche Art von Schnittstelle öffnen, die Sie hier sehen. Jetzt, sobald Sie es installiert haben, werden wir überprüfen, ob es installiert ist, indem Sie Knoten Dash V drücken, und das sagt uns die Version aus Knoten, die wir ausführen, das ist 6.9 Punkt eins. Und wenn Sie sicherstellen möchten, dass Ihre Anwendungen richtig ausgeführt werden, gehen wir zurück, um J s kennen und herunterladen. Ich werde nur darauf hinweisen, dass es tatsächlich zwei Pakete gibt. Sie haben langfristige Unterstützung und die aktuelle und generell wollen wir langfristige Unterstützung, die jetzt auf 6.9 Punkt eins liegt. Es gibt einen Vier-Punkt-etwas, der herumschwebt und Sie möchten darauf achten , das nicht zu installieren . Stellen Sie sicher, dass es über sechs ist. Nun müssen wir auch überprüfen, dass NPM , der Knoten-Paketmanager und der Knoten-Paketmanager, viele Paketinstallationen für uns erledigt. Es geht und holt den Code für uns, setzt ihn in unser Projekt, ohne dass wir etwas manuell tun müssen. Es ist wirklich, wirklich gut. Wir wollen die Version davon überprüfen. Also wieder, Dash V und das ist Version für und wenn wieder für kommen zurück zu dieser Website haben wir. Dies schließt NPM 3.1 ein, was offensichtlich vielleicht falsch ist. Aber ich denke, auf meinem Computer habe ich den neuesten Knotenpaketmanager auf die Last aktualisiert. Solange du also über drei bist, solltest du jetzt gut gehen. Ich möchte nur darauf hinweisen, dass es immer dann ist, wenn Sie Ihre Winkelanwendungen entwickeln und Dinge schief gehen. Manchmal hilft es, Ihren NPM zu aktualisieren oder Ihren Knoten zu aktualisieren. Es ist das Selbst. Suchen Sie einfach auf Google, wenn die Dinge schlecht für Sie gehen und finden Sie heraus, was die Antworten für Ihre Probleme sind . Okay, so Notizen installiert N PMs installiert. Was kommt als Nächstes? Nun, Sie können zu eckigen Punkt io gehen und wir haben hier ein paar Docks, die einen schnellen Start beinhalten . Da ist jetzt die Adresse drinnen. Wir haben unsere Schritte, um eine Angler-Anwendung auszuführen, und ich gehe einfach durch diese Liste. Wenn es sich also ändert, wissen Sie, wohin Sie gehen müssen, um die Aktualisierungsänderungen zu erhalten, da es sich ziemlich oft ändert. Aber ich hoffe, dass das jetzt viel weniger sein wird. Und jetzt. Natürlich ist das erste, was wir hier betrachten, Voraussetzung. Installieren Sie, was wir bereits installiert haben. Und dann benötigen wir Version vier von Knoten oder höher. Wir haben sechs, was gut ist. Und NPM drei X oder höher. Und da haben wir unsere Befehle, die ich dir gerade gezeigt habe, wie man läuft. Okay, also ist unser Service bereit, unser Knoten-Paketmanager ist bereit. Jetzt sind wir bereit, tatsächlich mit der Erstellung von Winkelprojekten zu beginnen. Also, das werde ich dir in der nächsten Vorlesung zeigen. 3. Gestalte eine Eckart: Richtig. Wir sind bereit, unser Winkelprojekt zu erstellen. Aber kurz bevor wir es tun, wir tatsächlich gehen und uns die Website ansehen, von der ich dir erzählt habe. Mit der Adresse, die Sie jetzt sehen können, eckigen Punkt io und es sagt Ihnen, wie Sie ein Winkelprojekt erstellen. Und wir haben bereits Knoten in NPM installiert, was in Ordnung ist. Aber jetzt haben wir einige andere Dinge, wie wir Projektordner erstellen, Konfliktdateien erstellen und Pakete installieren müssen. Nun, all diese Anweisungen führen uns durch, was wir tun müssen, sehr nett, aber sie erklären nicht wirklich, was los ist. Also werde ich dir einen kurzen Überblick geben, und dann werde ich dir einen viel schnelleren Weg zeigen, es zu tun. Also, zuerst müssen wir dieses Paket erstellen, Doc, Jason, Datei. Und das sagt uns, welche Abhängigkeiten wir für unsere Projekte brauchen. Welche Dinge wir da drin haben müssen. Und wenn wir nach unten scrollen, gibt uns diese Website ein paar von ihnen. Also haben wir einen Namen und wir haben eine Version, und das ist natürlich, wir haben uns selbst gesetzt. Wir haben einige Skripte, die definieren, wie wir Server laufen. Ich würde mir vorerst keine Sorgen darüber machen. Wir haben Lizenzen, also ist das wichtig. Wenn Sie nicht Personen zu kopieren oder zu codieren. Wir haben einige Abhängigkeiten, die uns sagen, dass wir eckige Sachen brauchen. Wir brauchen gemeinsame Compiler-Kernformen. All diese Art von Dingen. Mach dir keine Sorgen um sie. Moment weise ich nur darauf hin, dass sie existieren. Wir brauchen viele Dinge wie Typoskript, Light-Server, usw cetera, etc.. Und dann natürlich haben wir natürlicheine andere Akte. Ts Konflikt Punkt Jason. Und das sagt uns, wie der Typoskript-Compiler JavaScript aus den Projektdateien generiert . Was bedeutet das jetzt? Nun, es bedeutet, dass wir tatsächlich in Typoskript schreiben, was eine viel schönere Möglichkeit ist, Java-Skripte eher eine klassische Programmierart zu schreiben. Und wenn wir anfangen, Anwendungen zu erstellen, werden Sie sehen, wie es viel einfacher ist, als tatsächlich JavaScript zu verwenden, weil JavaScript für mich immer eine Art freie Form ohne Struktur war. Typoskript gibt ihm diese Struktur, von der ich denke, dass es wirklich für die klassische Programmiermenge abheben muss . Was haben wir dann noch? Wir haben den Systemkonflikt-Punkt Js, und dies setzt nur einen Haufen globalen durch diese Funktion global hier. Jetzt dir keine Sorgen um irgendetwas davon. Sie müssen nichts davon erstellen. Es gab eine Zeit vor ein paar Monaten, in der Sie es erstellen und dann tatsächlich Ihre Pakete installieren müssten . Aber ab sofort werden wir den brandneuen Weg nutzen, indem wir eckige zwei Anwendungen über diese Befehlszeile erstellen. Jetzt verwenden die meisten Dinge, die wir über die Befehlszeile erstellen, eine Befehlszeilenschnittstelle genannt wird, die nur ein Zit klingt. Wir verwenden die Befehlszeile als Schnittstelle. Angular hat eine brandneue Befehlszeilenschnittstelle, und hier haben wir es. Wenn wir zu cli dot eckigen Punkt i o gehen, können wir die Angelus CLI verwenden und hier haben wir die erste Kommandoreise zu sehen NPM installieren Dash G Angular Dash C L. I. Also lassen Sie uns zu unserer Kommandozeile gehen und lassen Sie uns tun, dass NPM Installation auf diesem einfach sagt, Verwenden Sie den Notiz-Paket-Manager, um etwas zu installieren und was zu installieren? Nun, wir wollen die eckige CLI installieren, aber Sie werden feststellen, dass es einen Bindestrich G gibt und das bedeutet global. Wenn Sie Dash G nicht verwenden,können Sie dies nur innerhalb Ihres eigenen Projekts verwenden. Wenn Sie Dash G nicht verwenden, Wenn Sie ein neues Projekt erstellen, müssen Sie die Befehlszeilenschnittstelle neu installieren. Wenn Sie Dash G. verwenden sagen Sie, dass Ihr System dies überall installiert ist, so dass jede Anwendung es verwenden kann. Dashti bedeutet also global, und dann nehmen wir den Namen vom Paket ab. Jetzt ist der Notiz-Paketmanager clever genug zu wissen, wohin er gehen und den eckigen CLI erhalten soll . Also, wenn Sie Enter drücken, sollte das losgehen, verschwinden und es für uns abrufen. Ich hörte auf, dort aufzunehmen, weil ich es nur schneiden wollte, damit du es schneller machst. Aber ich habe es wieder eingeschaltet. Wells wurde installiert, weil du weißt, was ich gesehen habe? Ich habe es gesehen. Nun, wir haben jetzt genug Samaras. Aber wenn ich nach oben scrolle, haben wir diese Warnungen fehlen, richtigen Zugriff und eine ganze Menge Warnungen. Und wenn das passiert und Sie auch eine ganze Reihe von Fehlern bekommen, dann müssen Sie diesen Befehl wahrscheinlich als Superuser so pseudo ausführen und dann müssen Sie Ihr Passwort eingeben, wenn Sie das tun, was ich jetzt mache. Nun, wenn Sie unter Windows sind, sollten Sie dieses Problem nicht bekommen. Möglicherweise erhalten Sie ein Pop-up, das besagt, dass es Administratorzugriff benötigt. Aber wenn Sie dieses Problem bekommen, wenn Sie Ihre Befehlszeile rechts öffnen, klicken Sie darauf und klicken Sie auf Als Administrator ausführen und dann sollten Sie in Ordnung sein, richtig? Und wenn Sie fertig sind, sollten Sie keine Fehler haben. Sie haben vielleicht ein oder zwei Warnungen, aber im Allgemeinen ist das OK, also habe ich dort ein paar Warnungen bekommen, und es hilft manchmal, sie zu durchlaufen. Nur so, wenn Sie später Probleme haben, wissen Sie, dass diese Warnungen aufgetaucht sind, aber wir sollten in Ordnung sein, wie es ist. Sobald das installiert ist, müssen wir unsere neue, eckige App erstellen , anstatt durch all dieses Zeug laufen, die Dateien selbst erstellen, was vollkommen in Ordnung ist. Was wir tun werden, ist die eckige CLI zu benutzen, um n g nu zu gehen und der Name von UNEP und was ich fürchten werde , ist zuerst, ich werde einfach zu dem Projekt gehen, wie lassen Sie mich sehen, wo ich das tun werde, vielleicht in Dokumenten, also Seedy Dokumente, um in den Ordner zu gehen, in dem Sie diese speichern möchten, gehen, um zu sehen, was dort drin ist. Lassen Sie mich vielleicht ein Verzeichnis von N G zwei erstellen, und dann werde ich in das Verzeichnis Energie zu APS gehen, und das Verzeichnis sollte leer sein. Also, was ich getan habe, ist einfach nur schafft Regisseur. Natürlich könnten Sie dies manuell tun. Das ist vollkommen in Ordnung. Also werde ich zu ihrer späteren Nein gehen, wir können den Befehl und G verwenden, da diese Website bezieht sich auf N g Neu und wir können eine App erstellen. Also lassen Sie uns einfach diese erste Dash-App drei Hit Antwort nennen. Die Befehlszeilenschnittstelle wird alles einrichten, was wir brauchen. Sehen Sie, dass es alle diese Dateien erstellt, die wir brauchen. Also, wenn wir jetzt zu diesem Verzeichnis gehen, werde ich zeigen, dass wir im umschließenden Ordner jetzt unseren ersten APP-Ordner haben , der in der Energie Tuapse ist. Und wir haben alle diese Akten. Wir haben diese Paketdatei. Denken Sie daran, dass es uns gebeten hat zu schaffen und ein paar andere Dinge machen sich keine Sorgen darüber, was sie sind. Dies ist unser grundlegender Winkel zur Anwendung. Denken Sie daran, es ist alles Javascript und Typoskript. Also, um diese Dateien zu bearbeiten und aufhören, mit Sachen zu spielen, na ja, das hat noch nicht beendet. Manchmal tut es das, es wird ein wenig stecken oder während ich denke, es tut, ist tatsächlich Dinge für uns zu installieren . Lassen Sie mich einfach für eine Minute weg und lassen Sie es tun, was es tun muss. Okay, das ist fertig mit der Installation von Sachen. Also, wenn wir jetzt in unseren Ordner schauen, haben wir jetzt etwas namens Node Modules Ordner. Und was unsere eckige Befehlszeilenschnittstelle tat, war, dass sie all diese Abhängigkeiten bekam, all diese Javascript-Bits, die wir brauchen, um unseren Angler auszuführen. Es ging und hat sie automatisch für uns abgerufen, und sie sind alle innerhalb des Knotenmodule-Ordners gespeichert. Und wie Sie sehen können, beginnt es natürlichmit natürlich eckig. Wir haben die CLI. Wir haben Winkelwerkzeuge und wir haben eine Reihe von Sachen. Wir werden niemals in diesen Ordner gehen oder ihn benutzen, es sei denn, es ist ein Extremfall In diesem Fall müssen wir einen Fehler beheben. Aber ich verspreche dir, dass du das nie richtig machen musst. Das hat es also. Es ist wirklich unser Leben bei der Installation eines Knöchels nach oben vereinfacht. Es ist jetzt bereit zu gehen. Also, wie führen wir es aus? Nun, APS läuft normalerweise auf einem lokalen Server. Wenn wir uns auf unserer Maschine entwickeln und der lokale Server im Moment auf dem lokalen Host gespeichert ist , sagt es uns, dass es so etwas nicht gibt. Und das liegt daran, dass wir unseren lokalen Host mit diesem Befehl namens N G serve starten müssen. Also, zuerst müssen wir in unseren ersten APP-Ordner gehen und dann N G serve eingeben und angular oder die Befehlszeilenschnittstelle wird gehen und nach all unseren eckigen Sachen suchen. Kompilieren Sie es zusammen und servieren Sie es aus und sagen Sie unserem Computer, wenn Sie zu lokalen Host gehen, gehen Sie zu diesem Web-Server, den ich erstellt habe. So können Sie sehen, dass der Befehl Angular Live Dev-Server auf dieser Adresse läuft , auf Port 4200 läuft, so dass Ihr Port alles sein kann. Sie können das ändern, wenn Sie wollen, aber es gibt keine Notwendigkeit, an diesem Punkt, gehen wir zu lokalen Host 4200 drücken Enter und Walla. Unsere App funktioniert also dank der eckigen CLI mussten keinen manuellen Müll machen. Wir haben gerade unsere Winkelfolie erstellt. Wir haben es in unserem no Js-Server bereitgestellt , der derzeit läuft. So erstellen Sie einen Angler nach oben. Und das ist, wie Sie es auf einem Server ausführen. Jetzt, viel später in anderen Abschnitten, werde ich Ihnen zeigen, wie Sie dies auf einem echten Live-Server installieren. Aber der ganze Prozess, den Sie hier gesehen haben, den Server zu starten, ist ziemlich derselbe. Also alles funktioniert einfach, wie es in der letzten Vorlesung in dieser Nacht in diesem Abschnitt sollte, Ich werde Ihnen nur einige sehr, sehr grundlegende Möglichkeiten zeigen , ein paar Stücke und Stücke in Europa zu bearbeiten, nur damit wir einen Geschmack von Gefühl für wie es ist, tatsächlich einen Winkel zur Karte zu erstellen und zu erstellen. 4. Verwende eine Angular 2-App und bearbeite deinen ersten Code: Okay, im letzten Teil dieses Abschnitts werden wir nur ein wenig bearbeiten. Denken Sie daran, wir haben unsere Winkel-zu-App bereit und läuft auf lokalen Host und Port 4200. Unsere APP funktioniert. Es ist im Moment etwas Flugzeug, also lasst uns das ändern. Lassen Sie uns zu dem Ordner gehen, in dem unsere App gespeichert ist, und Sie werden feststellen, dass alle diese Dateien haben. Sie haben unendliche verschiedene Arten, aber im Grunde sind sie alle Textdateien, so dass Sie jeden Texteditor verwenden können, um sie zu bearbeiten. Ich habe hier einen ganzen Haufen installiert und du hast vielleicht deinen Favoriten. Und im nächsten Abschnitt zeige ich Ihnen, welche ich für Sie lieber verwenden würde, weil ich es benutze. Und ich denke, es ist großartig, und es hilft wirklich, die Fehler einzugrenzen, die Sie haben könnten. Aber im Moment werden wir nur jeden Texteditor verwenden, den Sie in Ihren APS-Ordner gehen und dann nach innen schauen Hier Wir haben die Ordner e zu E. Das klingt nicht so, als wäre es unsere App. Wir haben den Modulordner, erinnerst du dich? Ich sagte, Fass da drin nichts an. Wir haben das Paket Doc Jason Ordner , der alle Dinge enthält, die wir für unsere App benötigen. Und wir haben auch diese Ordnerquelle. Wenn du da reingehst,wirst du drei weitere Ordner sehen, vielleicht mehr, vielleicht weniger, abhängig von deiner Version. Wenn du da reingehst, wirst du drei weitere Ordner sehen, vielleicht mehr, vielleicht mehr, vielleicht weniger, Wir haben dieses Symbol und dieses Symbol. Wenn wir hier rüber gehen und wir in unserer Adressleiste oben oben kurz vor der Adresse klicken, können wir dieses Symbol sehen. Dies gibt uns also einen Hinweis, dass unsere APP aus diesem Abschnitt erstellt wird, weil dort das Bild ist. Grundsätzlich ist ein weiterer Hinweis darin, dass wir eine Indexpunkt-HTML-Datei haben und wenn ich diese Datei nur mit einem einfachen Texteditor öffne oder wir nicht, gibt es Laden. Vielleicht, wenn ich dies mit öffne, lassen Sie mich versuchen, Visual Studio-Code, Mal sehen, was das uns gibt. Uh, wir haben ein grundlegendes HTML-Denken und drinnen, wenn Sie eine ganze Reihe von Tags haben, die nur ein altes HTML sind, haben wir voraus. Sie haben das HTML haben wir den doc-Typ. Offensichtlich ist das keine ganze App, also werde ich das schließen. Schauen wir uns das jetzt an. Wenn er Wenn Sie über Web-Entwicklung wissen, wissen Sie, dass der Index immer zuerst geladen wird. Und wenn ich das tatsächlich wieder öffne und Ihnen etwas zeige, wird der Index geladen und unsere gesamte eckige App befindet sich nicht innerhalb dieses App-Routen-Tags . Also alles, was wir erschaffen werden, ist innen von Entwurzelung enthalten. Das ist nur etwas zu beachten. Also was, er ist eigentlich da drin drin? Nun, unsere App, das ist klicken. Und wir haben eine ganze Reihe seltsam benannter Dateien hier drin. Aber was ihre Namen sind nicht wirklich wichtig, weil ich möchte, dass Sie ein Benennungsmuster bemerken , das hier drin passiert. Wir haben eine App-Komponente, Doktor. Ja, Wir haben eine APP-Komponente dot html und eine App-Komponente Punkt C s. Nun, wenn Sie mit Web-Entwicklung vertraut sind, ist dies wie Javascript, aber es verwendet Typoskript. Daher ist die TS Endung HTML eine Art Layout-Hypertext-Markup-Sprache und CSS ist natürlich das Styling. So können Sie bereits beginnen, einige vertraute Elemente der Web-Entwicklung zu sehen. Wir haben eine Styling-Seite, wir haben eine Layout-Seite und wir haben den tatsächlichen Geschäftsteil von der Seite. Also lassen Sie uns diese Komponenten Dot Typoskript wieder öffnen. Wir schauen uns nur Dinge an, um zu sehen, was passiert. So können Sie zuerst jeden Texteditor verwenden. Wir haben all das seltsam aussehende Zeug. Und was haben wir hier oben? Nun, wenn Sie mit irgendeiner anderen Art von objektorientierter Programmierung vertraut sind, haben wir diese Importanweisung und dies bringt in die Komponentenklasse. Wenn Sie von eckig mögen und eine Komponente ist ein grundlegender Bestandteil von eckig, können Sie sich alles vorstellen, was wir als Komponenten machen werden. Sie sind wie Lego-Blöcke, und wir werden all diese Lego-Blöcke in den Anwendungen, die wir bauen, zusammensetzen. Nein, dies ist unsere allererste Komponente der App-Komponente und bemerken, dass wir etwas haben, das einen Selektor genannt wird, der die APP-Route ist. Wo haben wir das schon mal gesehen? Nun, wir haben das tatsächlich innerhalb dieser Indexpunkt-HTML-Datei gesehen. Angular verwendet also einen Selektor, um alles zu laden, was wir innerhalb des Angriffs erstellt haben . Und das Tag ist in diesem Fall am root, die in der Indexpunkt-HTML-Datei ist Dann natürlich benötigt jede Komponente natürlicheine Vorlage und diese Vorlage befindet sich in dieser Datei. Die App-Komponenten dot html und jede Vorlage benötigt einen Stil, der erstellt wird, der in der C. S entsprechenden Datei befindet . Alles zusammen, was wir hier gesagt haben, ist, dass wir eine Komponente haben. Auf diese Weise haben Sie die Komponenten mithilfe eines Tags namens „Uproot“ referenziert. Die Vorlage für diese Komponente befindet sich in der Komponente dot html Datei und der Stil für sie ist in der Komponente dot CSS enthalten. Dies ist nur eine Art Konvention und wir werden uns sehr daran gewöhnen, weil wir dieses Szenario für alle Komponenten, die wir erstellen, neu erstellen werden. Schließlich haben wir eine Exportklasse namens APP-Komponente mit einem Titel gleich App funktioniert. Wo hast du das schon mal gesehen? Nun, es ist unsere Hauptseite bei der Arbeit, also wenn ich ein kleines Bild für dich zeichne, was hier passiert? Unsere APP lädt diese HTML-Datei und die HTML-Datei. Komm schon, lade es nach der APP-Route sucht. Was es also tut, ist, dass es die App-Frucht findet, die diese App-Komponente ist. Also, wenn ich Ihnen nur zeigen, dass in der Dateistruktur, in der App und es ist Diese drei Dateien peitscht zu drei. Also geht es los und es findet es innerhalb der App-Komponente. Doktor. Ja, und sagt, Schau, ich habe die Entwurzelung. Dann fragt es nach einer Vorlage, die wir sie zur Verfügung stellen. Wir geben ihm die App-Komponenten dot html, die hier ist, und wir geben ihm etwas Styling, das optional ist. Das brauchst du nicht zu haben. Dann haben wir diesen sehr wichtigen Teil, den ich den Export nicht ansprechen werde. Und wenn wir sagen, Export und eckig waren alles sagen, dass dies für den Einsatz zur Verfügung steht. Wenn wir keinen Export haben, unsere Syntax weiterhin gültig. Aber die Anwendung wird nichts über unsere App-Komponente wissen, und es wird nichts über die apurate-Tags wissen, die einen Fehler erhalten. Und im Inneren von hier haben wir gerade etwas sehr Einfaches gemacht, das den Titel Equal App Works trägt. Nun, Sie fragen sich vielleicht, wie wird dieser Titel auf unsere Bewerbung übertragen? Nun, hier werden wir tatsächlich die HTML-Datei öffnen, die mit Visual Studio-Code geöffnet ist. Und sieh dir das von innen nach Curly Brace an. Es ist wichtig zu bemerken, dass es zwei gibt. Wir haben diesen Titel und das ist die Schönheit der eckigen. Es verknüpft diesen Variablentitel mit dem, was in der Klasse enthalten ist. Also innerhalb dieser Exportklasse kann ich zum BeispielVariable ein- und benennen zum Beispiel und nur Grant dienen, Speichern Sie das Und innerhalb von hier, unter H eins, kann ich ihm eine Absatz-Tag und was nicht Grant ist. Wir wollen einen Namen eintragen, und ich kann mein Absatz-Tag schließen. Jetzt werde ich das retten. Und dann werde ich zu meinem Terminal gehen und schauen, Unser Terminal nimmt auf, dass sich die Dinge geändert haben und es kompiliert für uns, die neu kompilieren und einen Browser erzählen sollte. Wir haben etwas Neues, und da haben wir es bei der Arbeit und Grant. Ok, herzlichen Glückwunsch. Sie haben Ihren ersten Winkel bearbeitet, um E. zu codieren . Jetzt kann ich schätzen Es gab eine Menge Informationen dort. Wenn Sie neu in diesem und eckig sind, funktioniert es nicht. Wie die meisten anderen Frameworks bin ich gestoßen. Aber sobald Sie sich daran gewöhnt haben, ist es ziemlich einfach, mit sehr schnell zu arbeiten. Also, nur um sicherzustellen, dass ich die Grundkonzepte in deinem Kopf habe, werde ich nur noch ein paar dieser Dinge durchlaufen. Ich gehe zu meinem Finder, und ich werde es einfach durchgehen und sagen, dass wir unsere Indexdatei haben. Und innerhalb dieser Indexdatei haben wir Es ist wie eine übliche HTML-Datei, weil dies die erste 1 ist , die geladen wird. Wir haben unsere Apfelroute, Tague, und das enthält alles in unserer App. Ich würde dir raten, das immer so zu lassen, wie es ist. So geht unser Winkelsystem los und sucht nach der App Frucht. Und wenn es losgeht und es in einer dieser Komponenten findet, die Bean exportiert hat, also wissen wir, dass es da ist und es diesen Selektor als Entwurzelung findet, lädt es dann eine Vorlage auf. Und diese Stile, wenn wir sie haben, lädt es alles, was wir brauchen, innerhalb der Klasse. Und wenn es muss, verknüpft es einige Variablen wie Titel und Name. Und dann kombiniert es all das und gibt etwas aus, das wir dann in unserem Browser lesen können . Das ist also eine sehr schnelle, sehr einfache Übersicht darüber, wie eckig zu tun ist, was es tut. Und kurz bevor ich das beende, wenn Sie sich in den alten Tagen aus der Web-Entwicklung erinnern und ich benutze das einfach. Schreib nicht in dein. Ich schreibe nur in meinen. In den alten Tagen müssten Sie tun, was das Dokumentobjektmodell durchlaufen wird. Also, wenn Sie so etwas wie ein H in den alten Tagen der Entwicklung hatten, würden Sie sagen, dass das I d gleich dem Titel war. Und dann irgendwo unten in Ihrer Javascript-Datei müssten Sie dann eine Art Funktion wie Ihre J-Abfrage funktional haben, was auch immer es war, zu gehen und zu finden, Sie wissen, Element namens title. Und diese Damen Gentleman ist extrem ineffizient, weil man diesen Baum der Elemente hinuntergehen muss. Sie müssten alles durchsuchen, bis Sie auf diesen Titel stoßen und dann würden Sie das gleich machen, was auch immer Ihre Variable waas ist und ich weiß, dass ich hier nicht die richtige Sprache verwendet habe , aber Sie bekommen die Idee, so dass das Durchlaufen der Dawn ist unglaublich teuer in Bezug auf die Verarbeitungsleistung zu tun und verlangsamt die Dinge. Und was eckig tut, ist hinter den Kulissen. Es registriert alle diese Variablen. All diese dom-Elemente, wenn wir brauchen, um sie registriert zu werden, und es macht sie frei für die Verwendung durch unser JavaScript oder Typoskript Programm, und das bedeutet, dass wir enorme enorme Vorteile in Bezug auf die Leistung. Winkel-APS sind also wirklich, wirklich schnell und eckig Tuapse noch mehr. Richtig, damit schließt dieses Modell. Ich hoffe, Sie werden mich auf das nächste Modul anschließen, wenn wir ein wenig tiefer tauchen und unsere eigene Komponente erstellen. Und wenn Sie das getan haben, werden Sie die sehr grundlegenden Bausteine haben, alles zu schaffen, was Sie sich im Web vorstellen können. 5. Wie du weiterhin lernen: 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.