So führen Sie das Angular-Projekt aus [Schritt-für-Schritt-Erklärung]

AngularJS ist ein Muss für jeden Full-Stack-Entwickler. Es ist entscheidend für die Frontend-Entwicklung, da es die Verwendung von HTML-Anweisungen vereinfacht. Die Entwicklung einer Web-App wird viel einfacher, wenn Sie Angular verwenden. In diesem Artikel werden wir also besprechen, wie Sie mit Angular beginnen können. Wir besprechen, wie man Angular installiert und wie man ein Angular-Projekt ausführt.

Angular CLI: Eine kurze Einführung

Wenn Sie an Angular-Projekten arbeiten möchten, sollten Sie Angular CLI haben. Es ist das offizielle Tool von Angular, um an Angular-Projekten zu arbeiten und sie zu initialisieren. Angular CLI reduziert viele Probleme beim Initialisierungsprozess. Sie müssen nicht mehrere Konfigurationen durchführen und Tools erstellen, um ein Projekt zu starten, wenn Sie Angular CLI verwenden.

Mit Angular CLI können Sie ein Projekt mit nur einem Befehl starten. Mit einem anderen Befehl können Sie das Projekt über einen lokalen Entwicklungsserver bedienen. Angular CLI funktioniert auf Node.js. Um Angular CLI auf Ihrem System auszuführen, sollten Sie also zuerst Node.js in Ihrem System haben.

Node.js ist für Server und zur Entwicklung serverseitiger Anwendungen gedacht, während Angular eine Frontend-Lösung ist. Node.js hilft Ihnen nur mit Angular CLI.

Wie installiere ich Angular?

Erster Schritt

Bevor Sie Angular in Ihrem System installieren, sollten Sie Node und npm in Ihrem System haben. Sie können den Node Version Manager verwenden, um es zu installieren, oder Sie können den offiziellen Paketmanager Ihres Betriebssystems verwenden. Sie haben auch die Möglichkeit, Node von seiner Website zu installieren. Wir empfehlen die Installation von der Website, da es schnell und unkompliziert ist. Sie müssen nur zur Download-Seite von node.js gehen .

Zweiter Schritt

Sobald Sie sich auf der Download-Seite von node.js befinden, wählen Sie die Version aus, die Sie entsprechend Ihrem Betriebssystem benötigen, und folgen Sie dann den im Installationsassistenten angegebenen Schritten. Wenn Sie bereits node.js in Ihrem System installiert haben, können Sie diesen Schritt (und den vorherigen) überspringen.

Dritter Schritt:

Um zu überprüfen, ob Node auf Ihrem Gerät installiert ist oder nicht, öffnen Sie die Eingabeaufforderung und führen Sie den folgenden Befehl aus:

$ Knoten -v

Es würde die aktuell installierte Version von Node in Ihrem System anzeigen.

Dritter Schritt

Nachdem Sie überprüft haben, ob Sie Node in Ihrem System installiert haben, können Sie Angular auf Ihrem Gerät installieren, indem Sie den folgenden Befehl der Eingabeaufforderung ausführen:

$ npm installiere @angular/cli

Nachdem Sie den obigen Befehl ausgeführt haben, wird Angular CLI auf Ihrem Gerät installiert. Sie haben den Teil „So installieren Sie Angular“ abgeschlossen.

Lernen: Angular-Entwicklergehalt in Indien: Für Neulinge und Erfahrene

Wie führe ich ein Angular-Projekt aus?

Da wir Angular in unserem System installiert haben, konzentrieren wir uns jetzt darauf, ein neues Projekt zu starten.

Erster Schritt

Wir würden einen Arbeitsbereich und die Starter-App erstellen, indem wir den folgenden Befehl ausführen:

ng neue Winkel-Tour-of-Helden

Wir haben eckig-Tour-der-Helden als Namen für unseren Arbeitsbereich hinzugefügt. Der Befehl „ng new“ fragt Sie nach den Funktionen, die Sie in der Starter-App hinzufügen möchten. Da es sich um ein Tutorial handelt, wählen wir die Standardeinstellungen aus und fahren fort, indem wir die Eingabetaste oder die Eingabetaste drücken.

Zweiter Schritt

Jetzt hat Angular CLI die erforderlichen npm-Pakete und Abhängigkeiten installiert. Sie hätten eine einsatzbereite „Willkommens-App“ und einen neuen Arbeitsbereich. Sie hätten auch einen Stammordner mit demselben Namen wie die App (Angular-Tour-of-Heroes) und ein Skeleton-App-Projekt.

In diesem Schritt müssen wir den Antrag bedienen. Dazu gehen wir zum Workspace-Verzeichnis und starten die App:

cd angle-tour-of-heroes

ng dienen – öffnen

Der Befehl „ng serve“ würde die App erstellen, den Entwicklungsserver starten, sich um die Quelldateien Ihres Projekts kümmern und Ihre App neu erstellen, während Sie die erforderlichen Dateien ändern.

Dritter Schritt

Wenn Sie die App ändern möchten, müssen Sie in Ihrer IDE oder Ihrem Editor zum Ordner src/app gehen. Wir werden unsere App bearbeiten, indem wir die Komponenten dieses Projekts ändern. Komponenten sind die Bausteine ​​von Angular-Apps. Sie übernehmen fast alle grundlegenden Funktionen eines Angular-Projekts, wie z. B. das Anzeigen von Daten, das Reagieren auf Eingaben usw.

Öffnen Sie in diesem Schritt Ihre IDE und gehen Sie zum Projektverzeichnis und suchen Sie die Komponentendateien Ihres Projekts:

• app.component.ts
• app.component.html
• app.component.css

Die erste Datei ist der Klassencode und basiert auf TypeScript, die zweite Datei ist die Vorlage in HTML und die letzte enthält die privaten CSS-Stile.

Vierter Schritt

Unser Projekt ist eingerichtet und wir haben alle Dateien bereit. In diesem Schritt personalisieren wir es, indem wir ihm einen Titel hinzufügen. Um den Titel Ihres Angular-Projekts zu ändern, gehen Sie zur Datei app.component.ts und löschen Sie die vorhandene Standardvorlage. Angular CLI generiert automatisch eine Generate-Vorlage. Sie können es durch Folgendes ersetzen:

<h1>{{Ihr Titel}}</h1>

Die geschweiften Klammern sind die Interpolationsbindungssyntax. Sie können „Ihren Titel“ durch Ihren gewünschten Titel ersetzen. Sobald Sie den gewünschten Titel eingegeben haben, aktualisieren Sie den Browser, und Ihre Anwendung hat den neuen Titel.

Fünfter Schritt

Die Personalisierung der App wäre ohne jegliches Styling unvollständig. In diesem Schritt ändern wir also den Stil unserer Angular-App. Angular CLI generiert eine leere styles.css für Ihre Anwendung, wenn Sie ein neues Projekt erstellen. Hier können Sie Ihre Wunschstile eingeben.

Öffnen Sie die Datei src/styles.css in Ihrer IDE und beginnen Sie, den Stil der Anwendung zu ändern. Ändern Sie die Stile der App und speichern Sie die Änderungen. Wenn Sie den Browser aktualisieren, sehen Sie die Änderungen in Ihrer App.

Checkout: Wie implementiert man Paginierung in Angular JS?

Erfahren Sie mehr über die Angular- und Full-Stack-Entwicklung

Jetzt wissen Sie, wie Sie Angular in Ihrem System installieren und ein Angular-Projekt ausführen. Sobald Sie den Dreh raus haben, werden Sie sehen, dass die Arbeit mit Angular viel einfacher ist, als Sie dachten. Mit ein wenig Erfahrung können Sie mit Angular an Front-End-Webentwicklungsprojekten arbeiten.

Wenn Sie mehr über Angular und Front-End-Webentwicklung erfahren möchten, finden Sie hier einige zusätzliche Ressourcen:

• Lebenslauf-Leitfaden für Front-End-Entwickler
• Top 10 Fähigkeiten, um ein Front-End-Entwickler zu werden
• Front-End-Projektideen

Auf der anderen Seite können Sie einen Full-Stack-Entwicklungskurs belegen und durch Videos, Projekte und Quiz von Branchenexperten lernen.

Wenn Sie mehr über Full-Stack-Softwareentwicklung erfahren möchten, schauen Sie sich das PG-Diplom in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training, mehr als 9 Projekte und Aufgaben bietet , IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.