• Haupt / Computing

So erstellen Sie eine ganzseitige Website in Angular

Seite 1 von 4: Seite 1

• Seite 1
• Seite 2
• Seite 3
• Seite 4

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 die Quellcode mitmachen. Nicht auf Angular verkauft? Finde das Perfekte Webseitenersteller hier (und die besten Preise unten).

Die besten Angebote für Website-Builder von heute Wix Wix Connect Domain £ 3 / mth Deal anzeigen HostGator HostGator Dedicated Hosting 119 US-Dollar / mth Deal anzeigen Platz persönlich £ 10 / mth Deal anzeigen Wir prüfen täglich über 130 Millionen Produkte auf die besten Preise

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 der @ 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 @angular/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 von neuen mit dem Namen unseres Projekts. Dadurch wird ein gleichnamiger Ordner erstellt, in den wir nach Abschluss des Projekts navigieren.

cd ng new angular-animations-site cd angular-animations-site

Und das ist alles! Unsere Angular-Anwendung ist betriebsbereit. Sie können Ihre Bewerbung entweder mit starten über dem Meeresspiegel beginnen oder zu dienen . Ich benutze lieber über dem Meeresspiegel beginnen 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. Animationen und Winkelmaterial einschließen

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 @angular/material @angular/animations

Wir können Angular über diese Abhängigkeiten informieren, indem wir sie zu unseren hinzufügen app.module.ts Datei. Wir werden Angular Material Button, Karte und Symbolleiste verwenden, also werden wir ihre jeweiligen Module sowie die importieren BrowserAnimationsModule .

// app/app.module.ts ... import { MdButtonModule, MdCardModule, MdToolbarModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Wir können sie dann dem hinzufügen Importe Array mit unserem Modul Erklärung.

// app/app.module.ts ... import { MdButtonModule, MdCardModule, MdToolbarModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ ... 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 component page

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 Baumeister und ngOnit Methoden ausgeblendet.

// app/page/page.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css'] }) export class PageComponent implements OnInit { constructor() { } 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({ declarations: [ AppComponent, PageComponent ], ... })

Zur Überprüfung der geistigen Gesundheit können wir in unsere springen app.component.html Datei und hinzufügen zum Boden. Beachten Sie, dass das von uns verwendete Element-Tag dem entspricht Wähler Eigenschaft definiert in unserem @Komponente Metadaten.

{{title}}

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 export class PageComponent implements OnInit { page = { title: 'Home', subtitle: 'Welcome Home!', content: 'Some home content.', image: 'assets/bg00.jpg' }; constructor() { } 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 binden werden Seite Objekt zu.

{{page.title}}

{{page.subtitle}} {{page.content}}

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

• 1
• zwei
• 3
• 4

Aktuelle Seite: Seite 1

Nächste Seite Seite 2