Wie es funktioniert… | Wie man anfängt…

Wenn Sie Teil 2 dieser Serie nicht behandelt haben , empfehle ich Ihnen, diesen Link zu überprüfen → Was ist Angular? | Teil 2

Beginnen wir mit dem Aufbau eines Angular-Projekts.

Öffnen Sie die Datei 👉 app.component.tsim src/appOrdner und ändern Sie den Titel, indem Sie die Zeichenfolge von 'app' in 'Angular App' ersetzen .

Schauen Sie sich Zeile Nr. 9

Zurück zur Eingabeaufforderung oder zum Terminal und ausführen:

ng serve

Angular CLI verwendet also ein Tool namens Webpack, ein Tool zur Build-Automatisierung, mit dem alle unsere Skripte und Stylesheets in einem Bundle zusammengefasst und minimiert werden. Dieses Bundle dient der Optimierung.

Hier sehen wir einige Bundles wie polyfills.bundle.js, die alle Skripte enthalten, um die Lücke zwischen der von Angular benötigten Javascript-Version und der von den meisten Browsern unterstützten Javascript-Version zu schließen.

Hier sehen wir ein weiteres Bundle, das main.bundle.js ist und den gesamten Quellcode unserer Anwendung enthält.

Hier sehen wir ein weiteres Bundle, ein styles.bundle.js, das alle unsere Stylesheets enthält. Hier werden Stylesheets in einem Javascript-Bundle gespeichert.

Hier sehen wir ein weiteres Bundle, das eine vendor.bundle.js ist und alle Bibliotheken von Drittanbietern enthält.

Hinweis : Wenn wir Änderungen an einer unserer HTML-Dateien, Typ-Skripten oder Stilen vornehmen , kompiliert das Webpack unsere Anwendung automatisch neu und aktualisiert unsere Bundles. Jetzt hier unten können wir sehen👇

webpack: Compiled successfully.

      

       webpack: Compiled successfully.
      

Ausgabe👇 Jetzt haben wir den neuen Titel Willkommen in der Angular App! 👏👏

Klicken Sie auf dieser Browser-Registerkarte mit der rechten Maustaste und gehen Sie zu Seitenquelle anzeigen.

Schau👇

Die Quellseite wird nach dem Klicken auf View Source Source👇 angezeigt

Hinweis : Wir haben keine Verweise auf unsere Stylesheets oder eine Skriptdatei in unserem Code in index.html. Das Wepack generiert automatisch Stylesheets und Skriptdateien und integriert sie zur Laufzeit dynamisch in index.html (siehe oben 👆).

Schauen Sie in unserem Code unter index.html ohne Stylesheets und Skriptdateien nach.

Alle Bundles, die Webpack generiert hat, haben sie auch in index.html eingefügt - alles geschieht dynamisch zur Laufzeit.

Also, was haben wir in diesen Bündeln? 👇👇

👨‍⚖️ Nochmals daran erinnern…

Führen Sie 👉 aus ng serve

Browser mit URL 👉 öffnen http://localhost:4200/- dies sollte eine Homepage unserer Angular-Anwendung öffnen.

Danach 👉 Klicken Sie mit der rechten Maustaste auf diese Seite und dann auf 'Seitenquelle anzeigen' - Auf einer neuen Registerkarte wird ein Link geöffnet (das ist der Quellcode der Seite) 👉 view-source:http://localhost:4200/

styles.bundle.jsSuchen Sie dann schließlich danach und klicken Sie darauf, um erneut einen neuen Link in einem neuen Tab zu öffnen. 👉 http://localhost:4200/styles.bundle.js- enthält den tatsächlichen Quellcode von styles.bundle.js- Diese Datei enthält tatsächlich Javascript-Code und in der Mitte dieses Javascript-Codes finden Sie die verwendeten Stile unsere Bewerbung. Schau👇

⭐️ Der wichtige Punkt hierbei ist, dass alle unsere Stile zu einem Javascript-Bundle kompiliert werden. Und Webpack ist im Rückstand, um diese Bundles beim Kompilieren automatisch zu generieren. Außerdem wurden sie zur Laufzeit in index.html eingefügt.

Das ist also für diesen Teil - wir sehen uns im nächsten Teil 👋👋

Wenn Sie Teil 2 dieser Serie nicht behandelt haben , empfehle ich Ihnen, diesen Link zu überprüfen → Was ist Angular? | Teil 2

Weiter Klicken Sie hier👇 für Teil - 4
https://medium.com/@AnkitMaheshwariIn/angular-template-syntax-directive-interpolation-property-binding-event-binding-part-4-547e2512d8fe

Wenn es Ihnen nichts ausmacht, ein paar Klatschen zu machen, da es geholfen hat, würde ich es sehr schätzen :) Helfen Sie anderen, den Artikel zu finden, damit er ihnen helfen kann!

Immer klatschen ...