Inhalt
- 01. Erstellen Sie ein Projekt
- 02. Fügen Sie Animationen und Winkelmaterial hinzu
- 03. Führen Sie eine Seitenkomponente ein
- 04. Bauen Sie Ihre Seitenkomponente aus
Die neueste Version von Angular wird oft als ein Framework angesehen, das von der Unternehmensseite der Tracks stammt und im Allgemeinen die Gesellschaft von Branchenanwendungen genießt. Zwar hat sich Angular tatsächlich von einem Framework zu einer Plattform entwickelt, die alle Arten von Anwendungen unterstützt, aber es gibt viele wirklich erstaunliche Funktionen, mit denen Entwickler ihren Benutzern beeindruckende Erlebnisse bieten können.
Dies ist der erste Teil einer Reihe zum Erstellen einer ganzseitigen animierten Website in Angular. Wir beginnen mit dem Aufbau einer ganzseitigen Website und animieren sie dann in der folgenden Folge.
In diesem Tutorial konzentrieren wir uns hauptsächlich auf die Angular-Teile und verzichten auf die HTML- und CSS-Teile, die sich nicht direkt auf die Konstruktion der Anwendung beziehen. Bitte laden Sie den Quellcode herunter, um mitzumachen. Nicht auf Angular verkauft? Hier finden Sie den perfekten Website-Builder (und die besten Preise unten). Unabhängig davon, wie Sie Ihre Website erstellen, benötigen Sie ein anständiges Webhosting und Cloud-Speicher.
01. Erstellen Sie ein Projekt
Es gibt viele bewegliche Teile, die in eine nicht triviale Webanwendung eingehen. Welche Abhängigkeiten hat Ihre Anwendung? Wie werden Sie es lokal ausführen? Wie wirst du es testen? Wie werden Sie Ihr Vermögen bündeln?
Zum Glück wird der komplexe Prozess des Zusammensetzens dieser Elemente in den USA außer Sichtweite behandelt @ eckig / cli. Mit nur wenigen Befehlen von unserem Terminal aus können wir eine voll funktionsfähige Angular-Anwendung bereitstellen, mit der wir arbeiten können.
Der erste Schritt zur Arbeit mit der CLI besteht darin, sie zu installieren. Verwenden Sie dazu den folgenden Befehl:
npm install -g @ angle / cli
Sobald die CLI installiert ist, können wir über die Befehlszeile zu dem Ordner navigieren, in dem wir unser Projekt installieren möchten. Von dort aus werden wir ausgeführt ng neu mit dem Namen unseres Projekts. Dadurch wird ein gleichnamiger Ordner erstellt, in den wir nach Abschluss des Projekts navigieren.
cd your-projects-folder> ng neue eckanimations-site cd eckanimations-site
Und das ist alles! Unsere Angular-Anwendung ist betriebsbereit. Sie können Ihre Bewerbung entweder mit starten npm starten oder ng dienen. Ich bevorzuge zu verwenden npm starten weil es konventioneller ist und es mir ermöglicht, zusätzliche Befehle hinzuzufügen. Sie können dann zu navigieren http: // localhost: 4200 um zu sehen, wie die Anwendung ausgeführt wird.
02. Fügen Sie Animationen und Winkelmaterial hinzu
Da wir schöne Dinge mögen, werden wir einige kleine Ergänzungen zu unserer Anwendung vornehmen, indem wir die hinzufügen und installieren @ eckig / animationen und @ eckig / material Pakete:
npm i --save @ angle / material @ angle / animations
Wir können Angular über diese Abhängigkeiten informieren, indem wir sie zu unseren hinzufügen app.module.ts Datei. Wir werden die Angular Material-Schaltfläche, die Karte und die Symbolleiste verwenden, also werden wir die jeweiligen Module sowie die importieren BrowserAnimationsModule.
// app / app.module.ts ... {MdButtonModule, MdCardModule, MdToolbarModule} aus ’@ angle / material’ importieren; {BrowserAnimationsModule} aus ’@ angle / platform-browser / animations’ importieren;
Wir können sie dann dem hinzufügen Importe Array mit unserem NgModule Erklärung.
// app / app.module.ts ... {MdButtonModule, MdCardModule, MdToolbarModule} aus ’@ angle / material’ importieren; {BrowserAnimationsModule} aus ’@ angle / platform-browser / animations’ importieren; @NgModule ({... importiert: [... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule], ...})
Und für eine letzte Ergänzung werden wir das indigorosa Thema in unser importieren styles.css Datei.
/ * styles.css * / @import ’~@angular/material/prebuilt-themes/indigo-pink.css’;
Bis zu diesem Punkt haben wir uns ganz auf die Einrichtung der Anwendung konzentriert, damit wir mit der Entwicklung beginnen können. Diese Befehle mögen sich zunächst klobig anfühlen, aber sobald Sie sich an sie gewöhnt haben, werden Sie feststellen, dass es nur ein paar Minuten dauert, bis eine vollständig ausgebaute Umgebung mit allen Schnickschnack vorhanden ist, die wir zum Erstellen einer süßen Website benötigen.
03. Führen Sie eine Seitenkomponente ein
Da wir eine Website mit Angular erstellen, müssen wir einen Mechanismus zur Anzeige unserer Seiten einführen. In Angular ist der atomare Baustein einer Anwendung die Komponente. Durch die Architektur unserer Anwendung mit genau definierten, gekapselten Komponenten können wir Funktionen problemlos wiederverwenden und neue Funktionen erstellen, indem wir neue Komponenten einführen.
Die CLI wird sofort mit Generatorunterstützung geliefert. Mit dieser Funktion erstellen wir unsere Seitenkomponente. Wir können unsere Seitenkomponente generieren, indem wir den folgenden Befehl ausführen (the G Befehl ist eine Abkürzung für generieren).
ng g Komponentenseite
Hinweis: Ich empfehle, sich die Zeit zu nehmen, um zu lernen, wie man die wichtigsten Winkelstücke von Hand baut, bis Sie Ihr Muskelgedächtnis aufgebaut haben. Nur wenn Sie wirklich verstehen, was passiert, sollten Sie Ihren Workflow mit Generatoren optimieren.
Die CLI generiert einen Ordner in der src Verzeichnis mit dem Namen Seite mit einer HTML-, CSS- und Typescript-Datei sowie einer Spezifikationsdatei. In unserer page.component.ts Datei haben wir die Grundstruktur einer Komponente. Unsere Komponente verweist auf unsere Vorlagen- und Stildateien in der @Komponente Metadaten und hat unsere Konstrukteur und ngOnit Methoden ausgeblasen.
// app / page / page.component.ts importiere {Component, OnInit} von ’@ angle / core’; @Component ({Selektor: 'App-Seite', TemplateUrl: './page.component.html', StyleUrls: ['./page.component.css']}) Exportklasse PageComponent implementiert OnInit {Konstruktor () {} ngOnInit () {}}
Neben der Generierung unserer Komponente wird die CLI auch unsere ändern app.module.ts einschließen PageComponent Eintrag in unserem Erklärungen Array. Dies bedeutet, dass unsere Seitenkomponente jetzt im gesamten Modul verfügbar ist.
// app / app.module.ts @NgModule ({Deklarationen: [AppComponent, PageComponent], ...})
Zur Überprüfung der geistigen Gesundheit können wir in unsere springen app.component.html Datei und hinzufügen App-Seite> / App-Seite> zum Boden. Beachten Sie, dass das von uns verwendete Element-Tag dem entspricht Wähler Eigenschaft definiert in unserem @Komponente Metadaten.
! - app / app.component.html -> h1> {{title}} / h1> app-Seite> / app-Seite>
04. Bauen Sie Ihre Seitenkomponente aus
Wenn unsere Seitenkomponente lebendig und gut ist, können wir sie so ausbauen, dass sie wie eine tatsächliche Webseite aussieht.Wir werden eine vorstellen Seite Objekt mit Titel, Untertitel, Inhalt, und Bild Eigenschaften.
// app / page / page.component.ts Exportklasse PageComponent implementiert OnInit {page = {title: 'Home', Untertitel: 'Welcome Home!', Inhalt: 'Some home content.', Bild: 'assets / bg00. jpg '}; Konstruktor () {} ngOnInit () {}}
Wir werden unsere Vorlage aktualisieren, um sie an die zu binden Seite Objekt. Es gibt ein Bildelement, das eventuell erweitert wird, um das gesamte Browserfenster auszufüllen. Wir werden auch eine Angular Material-Kartenkomponente hinzufügen, die wir den Rest unserer Karte binden werden Seite Objekt zu.
! - app / page / page.component.html -> img [src] = "page.image"> md-card> md-card-header> md-card-title> h1> {{page.title} } / h1> / md-card-title> md-card-subtitle> {{page.subtitle}} / md-card-subtitle> / md-card-header> md-card-content> {{page.content} } / md-card-content> / md-card>
Unsere Seitenkomponente sieht jetzt viel besser aus! Unser nächster Schritt besteht darin, die Möglichkeit hinzuzufügen, mehrere Seiten zu haben und zwischen ihnen zu navigieren.
Seite 2: So erstellen Sie mehrere Seiten
