Share
Angular ist ein beliebtes Framework zum Erstellen von Frontends für Web- und mobile Anwendungen. Angefangen hat alles mit AngularJS 1.x und dann mit AngularJS 2, und jetzt ist es endlich Angular, mit den neuesten Updates und Fehlerkorrekturen, die vom Angular-Team bearbeitet werden.
Komponenten sind ein wichtiger Bestandteil einer Angular-Webanwendung. In diesem Lernprogramm erfahren Sie, wie Sie mit Angular eine Webanwendung erstellen können. Außerdem lernen Sie Komponenten kennen.
Beginnen Sie mit der Installation von Angular CLI mit dem Node Package Manager (npm)..
npm install -g @ angle / cli
Wenn Sie die Angular-CLI installiert haben, erstellen Sie eine neue Angular-App mit der CLI.
Neue Winkel-App
Navigieren Sie zum Anwendungsordner und starten Sie den Server.
CD-Winkel-App ng dienen
Richten Sie Ihren Browser auf http: // localhost: 4200 /, und Sie sollten die Standard-App ausführen.
Navigieren Sie zu Winkel-App Projektordner und werfen Sie einen Blick auf die Projektstruktur. So sieht es aus:
Jede Angular-App verfügt über ein Wurzelmodul, in dem Sie die zu ladende Hauptkomponente definieren. In der standardmäßigen Angular-App ist das Wurzelmodul in der definiert app.module.ts. Wenn der AppModule lädt, prüft, welche Komponente bootstrapped ist, und lädt dieses Modul. Wie im gesehen app.module.ts, Das Modul, das bootet wird, ist AppComponent. Das AppComponent Komponente ist in der Datei definiert app.component.ts.
Eine Komponente wird mit definiert @Komponente Dekorateur. In der @Komponente Dekorateur können Sie die Komponente definieren Wähler, die Komponente Vorlage, und das verwandte Stil.
Komponenten sind wie der Grundbaustein einer Angular-Anwendung. Komponenten werden mit definiert @Komponente Dekorateur. Eine Komponente hat eine Wähler, Vorlage, Stil und andere Eigenschaften, mit denen die für die Verarbeitung der Komponente erforderlichen Metadaten angegeben werden.
Aus den offiziellen Dokumenten:
Komponenten sind der grundlegendste Baustein einer Benutzeroberfläche in einer Angular-Anwendung. Eine Angular-Anwendung ist ein Baum aus Angular-Komponenten. Winkelkomponenten sind eine Teilmenge von Anweisungen. Im Gegensatz zu Direktiven haben Komponenten immer eine Vorlage, und pro Element in einer Vorlage kann nur eine Komponente instanziiert werden.
Der beste Weg, etwas zu verstehen, das mit der Programmierung zusammenhängt, ist das Tun. Beginnen wir mit der Erstellung einer Angular-Komponente zum Hinzufügen von zwei Zahlen. Nennen wir es mal Rechnerkomponente.
Beginnen wir mit der Erstellung einer Komponente für unseren Rechner. In der src / app Erstellen Sie einen Ordner mit dem Namen calc. Hier ist unser calc Komponente wird residieren. In der calc Erstellen Sie eine Datei mit dem Namen calc.component.html. Dies ist die Vorlage für unsere Taschenrechnerkomponente. So sieht es aus:
Rechnerkomponente
Erstellen Sie eine Datei mit dem Namen calc.component.ts. Hier definieren Sie die calc Komponente und geben Sie die zugehörigen Metadaten an. Sie definieren die Komponente mit der @Komponente Dekorateur. Um die Komponente zu definieren, müssen Sie die importieren Komponente Modul aus Winkelkern.
Component aus '@ angle / core' importieren;
Definieren Sie die Komponente durch Angabe von Vorlage, Stil, und Wähler. Sie definieren auch eine Klasse zum Verwalten der durch die @Komponente Dekorateur. So sieht es aus:
Component aus '@ angle / core' importieren; @Component (Selector: 'calc', templateUrl: 'calc.component.html', styleUrls: ['calc.component.css']) Exportklasse CalcComponent
Alle mit der Komponentenvorlage verknüpften Stile sollten in der im Komponentendekorator angegebenen Datei definiert werden. Erstellen Sie also eine Datei namens calc.component.css in der calc Mappe. Sie legen den Stil für die Rechnerkomponente in diese Datei.
Jetzt, da Sie Ihre Komponente bereit haben, definieren wir die Komponente innerhalb des Wurzelmoduls app.module.ts.
Importieren Sie zuerst die Komponente im app.module.ts -Datei und dann in das einfügen Erklärungen Sektion. So sieht es nach dem Hinzufügen aus CalcComponent:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; CalcComponent aus './calc/calc.component' importieren @NgModule (Deklarationen: [AppComponent, CalcComponent]), importiert: [BrowserModule], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Wie man im Wurzelmodul sehen kann app.module.ts, das AppComponent ist das Bootstrap-Modul und wird daher standardmäßig gerendert. Um unsere Rechnerkomponente anzuzeigen, definieren Sie sie in der app.component.html. Hier ist wie das app.component.html Datei sieht:
Speichern Sie die obigen Änderungen und starten Sie den Server. Der HTML-Inhalt der Taschenrechnerkomponente sollte angezeigt werden.
Beginnen wir mit dem Hinzufügen einer Vorlage für unseren Winkelrechner. Fügen Sie dem folgenden Code hinzu calc.component.html Datei:
Rechnerkomponente
Ergebnis
Fügen Sie den folgenden Stil hinzu calc.component.css Datei.
.gitter width: 100% .row width: 100%; Anzeige: Flex; .col-1 Breite: 8,33%; .col-2 Breite: 16,66%; .col-3 Breite: 25%; .col-4 Breite: 33,33%; .col-5 Breite: 41,66%; .col-6 Breite: 50%; .col-7 Breite: 58,33%; .col-8 Breite: 66,66%; .col-9 Breite: 75%; .col-10 Breite: 83,33%; .col-11 Breite: 91,66%; .col-12 Breite: 100%; .header Breite: 100%; Hintergrundfarbe: # 003A60; Höhe: 100px; .header h2 Zeilenhöhe: 100px; Farbe: #fff; .button Hintergrundfarbe: # 4CAF50; / * Grüne * / Grenze: keine; Farbe weiß; Polsterung: 15px 32px; Text ausrichten: Mitte; Textdekoration: keine; Anzeige: Inline-Block; Schriftgröße: 16px; Marge: 4px 2px; Cursor: Zeiger; input border: none; Rand unten: 1px durchgehend grau; Breite: 80%; Marge: 0% 10%; Polsterung: 5%; .result Hintergrundfarbe: #ddffff; Breite: 80%; Marge: 20px 10px 10px 10px; Höhe: 100px; Rahmen links: 3px fest # 2196F3; .result span Zeilenhöhe: 100px;
Speichern Sie die obigen Änderungen und Sie sollten die folgende Benutzeroberfläche anzeigen können.
Fügen wir das hinzu ngModel Direktive zu den oben angezeigten Eingabetextfeldern. Modifiziere den calc.component.html Code wie unten gezeigt:
Wie Sie oben sehen, haben Sie das eingestellt ngModel für die Eingabetextfelder zu den Variablen Nummer 1 und Nummer 2.
Definieren wir die Variablen im CalcComponent in dem calc.component.ts Datei.
Exportklasse CalcComponent public number1: number; öffentliche Nummer2: Nummer;
Wenn der Benutzer nun in die Textfelder eingibt, wird das entsprechende Feld angezeigt ngModel Variable wird aktualisiert. Sie können dies überprüfen, indem Sie die Variable in der Vorlagendatei der Komponente anzeigen.
Nummer 1: number1 Nummer 2: number2
Speichern Sie die Änderungen und geben Sie die Werte in die Eingabefelder ein. Die Daten sollten innerhalb des Bereichs aktualisiert werden.
Fügen wir einen Button-Klick zum hinzu Hinzufügen Taste, die die Summe der berechnet Nummer 1 und Nummer 2 Wenn Sie auf die Schaltfläche klicken.
Ändern Sie den HTML-Code wie gezeigt, um die Click-Direktive einzuschließen.
Definiere das hinzufügen Funktion innerhalb der CalcComponent wie gezeigt:
Component aus '@ angle / core' importieren; @Component (Selector: 'calc', templateUrl: 'calc.component.html', styleUrls: ['calc.component.css']) Exportklasse CalcComponent public number1: number; öffentliche Nummer2: Nummer; öffentliches Ergebnis: Nummer; public add () this.result = this.number1 + this.number2
Wie im obigen Code zu sehen ist, wird das Ergebnis der Addition in einer aufgerufenen Variablen abgelegt Ergebnis.
Ändern Sie die HTML-Vorlage, um das Ergebnis anzuzeigen, sobald die Variable festgelegt ist.
Ergebnis: Ergebnis
Speichern Sie die obigen Änderungen und fügen Sie zwei Nummern hinzu, indem Sie auf die Schaltfläche klicken Hinzufügen Taste. Das Ergebnis wird in der Benutzeroberfläche angezeigt.
In diesem Lernprogramm haben Sie erfahren, wie Sie mit dem Erstellen einer Web-App mit Angular 4 beginnen können. Sie haben Angular-Komponenten und deren Erstellung kennen gelernt. Sie haben eine einfache Winkelkomponente erstellt, um zwei Zahlen hinzuzufügen.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, informieren Sie sich über das Angebot von Envato Market.
Teilen Sie uns Ihre Gedanken, Vorschläge oder Korrekturen in den Kommentaren unten mit.
Accentsconagua