Bootstrapping in Angular

Name: Bootstrapping in Angular
Author: Michaela Ochnich

In diesem Kapitel wird erklärt, wie das Angular-Framework eine Anwendung bootstrappt und sie im Browser zum Laufen bringt. Sie erfahren, wie Angular eine Anwendung standardmäßig automatisch bootstrapt und wie Sie manuelles Bootstrapping für Ihre Anwendung implementieren können.

Preview the first lesson free — get full access to all 3 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

In dieser Lektion werde ich vorstellen Angulars Bootstrapping-Prozess für Anwendungen. Bootstrapping ist der Prozess des Startens und Laden der Anwendung im Browser für den Benutzer Hier habe ich also eine Starter-Bewerbung die mit dem Angular CLI . erstellt wurde und es läuft derzeit und im Browser hier, Sie können sehen, dass die Startervorlage angezeigt wird. Ich klicke auf Inspizieren, Sie können alle HTML-DOM-Elemente sehen und alles, was hier wiedergegeben wird. Wenn Sie jedoch stattdessen die Quelldatei anzeigen, Sie werden sehen, dass dies eine viel kürzere Datei ist dass diese Seite gestartet wurde. Hier gibt es einige grundlegende Header-Informationen, und dann dieses Einzelkomponenten-Selektor-App-Root. Dies ist die Stammkomponente für die Anwendung. Die meisten Angular-Anwendungen haben eine Root-Komponente wie folgt, diese Komponente hat dann verschachtelte Komponenten, die dann verschachtelte Komponenten haben und eigene Abhängigkeiten, und das alles baut einen strukturellen Komponentenbaum auf das ist Ihre Angular-Anwendung. Hier gibt es auch fünf JavaScript-Dateien, Es gibt Laufzeit, Polyfills, Styles, Vendors und Main. Runtime ist eine Webpack-Datei, das ist Software, die Angular verwendet um beim Erstellen und Bündeln von Modulen zu helfen, die für den Browser bereitgestellt werden. Polyfills enthält Skripte um die verschiedenen Browsertypen zu unterstützen, und Stile werden globale Stile für die Anwendung kompiliert. Der Anbieter enthält dann Angular-Skripte sowie andere Bibliotheksabhängigkeitsskripte. Und main.js enthält den Code für Ihre eckige Anwendung, und diese Datei wird aus der Datei main.ts transpiliert im Quellcode Ihres Projekts. Also wechsle ich jetzt zum Visual Studio-Code und öffnen Sie die Datei main.ts, die sich im Quellordner befindet, und in dieser Datei Sie sehen, dass diese Zeile die Bootstrap-Modulmethode aufruft. Diese Zeile beginnt mit dem Bootstrapping der Anwendung für den Browser, beginnend mit dem Modul, das hier an die Methode übergeben wird. Dieses Modul ist das Routenmodul für die Anwendung, und es ist der Ausgangspunkt für Angular zum Laden alle anderen Module und Abhängigkeiten. Und dieses Modul enthält diese Root-Komponente das stand in der Quelldatei. Dann ist die Datei index.HTML die Datei, nach der Browser suchen und wird zuerst geladen, wenn ein Benutzer zu Ihrer Website navigiert. Dies war die Quelldatei, die im Browser angezeigt wurde. Die Bootstrapped-Anwendung wird über diesen Einstiegspunkt hier in das DOM eingefügt, der Selektor für die Routenkomponente. Und zu den Skripten, die am Ende der Quelldatei standen werden nach dem Build-Prozess von angle hinzugefügt. Es muss zuerst den gesamten TypeScript-Code transpilieren in JavaScript, bevor Sie es an den Browser senden. Das ist alles für diese Lektion, Einführung von Anwendungen, Bootstrapping, und schau dir die nächste Lektion an mehr darüber lernen Der automatische Bootstrapping-Prozess von Angular.

Mittelstufe Anbieter : Michaela Ochnich 3 Lektionen · 13m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Was Sie lernen werden

Verstehen Sie, wie das Angular-Framework eine Anwendung bootstrapped und sie im Browser ausführt
Erkunden Sie den gesamten Bootstrapping-Prozess in Angular
Erfahren Sie, wie Angular eine Anwendung standardmäßig automatisch bootstrapped
Implementieren Sie manuelles Bootstrapping für Ihre Angular-Anwendung

Wichtige Erkenntnisse

Dieses Kapitel erklärt, wie das Angular-Framework eine Anwendung bootstrapped und sie im Browser zum Laufen bringt.
Angular bootstrapped eine Anwendung standardmäßig automatisch.
Manuelles Bootstrapping kann implementiert werden, um zu steuern, wie Ihre Anwendung startet.
Das Kapitel behandelt einen Bootstrapping-Überblick sowie automatische und manuelle Bootstrapping-Ansätze.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er erklärt, wie das Angular-Framework eine Anwendung bootstrapped und sie im Browser zum Laufen bringt, einschließlich automatischen Bootstrapping standardmäßig und wie man manuelles Bootstrapping implementiert.

Welche Lektionen sind enthalten?

Der Kurs enthält drei Lektionen: Bootstrapping Overview, Automatic Bootstrapping und Manual Bootstrapping.

Welche Fähigkeiten werde ich aus diesem Kurs erwerben?

Sie werden mit Angular (Web Framework), Angular UI, Application Frameworks, Bootstrap (Front-End Framework), Bootstrap Protocol und Bootstrapping arbeiten.

Was ist der Unterschied zwischen automatischem und manuellem Bootstrapping in diesem Kurs?

Der Kurs zeigt, wie Angular eine Anwendung standardmäßig automatisch bootstrapped, sowie wie man eine Anwendung manuell bootstrapped.