Was ist neu in Angular 4?

Seite 1 von 2: Schritte 1-10

Im März veröffentlichte das Angular-Team Version 4 und damit einige aufregende neue Funktionen, die es zu entdecken gilt. In diesem Tutorial zeigen wir es Ihnen wie man eine App macht Verwenden Sie einige dieser neuen Funktionen und demonstrieren Sie einige der leistungsstarken, leistungssteigernden Änderungen unter der Haube.

Was gibt's Neues?

Wo ist der Zauberstab in Photoshop CC?

Das Angular-Team nennt es eine 'unsichtbare Überarbeitung', da die meisten Änderungen eher im Hintergrund als mit der Kerncodierungsfunktionalität erfolgen. Eine wichtige Änderung ist die Umstellung auf eine vorzeitige Kompilierung als Standard, die bei korrekter Verwendung die Leistung drastisch verbessern kann. TypeScript 2.1+ wird jetzt ebenfalls unterstützt, wodurch wir auf alle neuen Funktionen von ES2015 zugreifen können.



Das heißt nicht, dass es auch keine nennenswerten Änderungen an den Grundlagen gibt. Beispielsweise gibt es eine nützliche neue Syntax für die Vorlagenbindung, mit der wir unseren Code durch Hinzufügen eines vereinfachen können sonst Option zu ngIf und die Fähigkeit, lokale Variablen innerhalb eines zuzuweisen ngFür .

Habe ich 3.0 verpasst?

Angular 4 ist die erste Hauptversion des Frameworks für die semantische Versionierung. Keine Sorge, Sie haben 3.0 nicht verpasst - es gab zwei wichtige Updates, und beide wurden in Version 4.0 integriert.

Beachten Sie auch, dass Angular 1.x jetzt als AngularJS bekannt ist und Angular 2+ einfach als Angular bezeichnet wird. Seien Sie vorsichtig, da einige Tutorials und Bibliotheken von Drittanbietern die Verwendung dieser Begriffe möglicherweise nicht aktualisiert haben.

Holen Sie sich die Tutorial-Dateien

In diesem Tutorial arbeiten wir mit einer Flower Shop App. Um die Beispiel-App herunterzuladen, gehen Sie zu FileSilo Wählen Sie neben dem Lernprogramm Free Stuff und Free Content aus. Hinweis: Erstmalige Benutzer müssen sich registrieren, um FileSilo verwenden zu können. Sobald Sie angemeldet sind, können Sie die Beispiel-App herunterladen Hier .

Lass uns anfangen!

01. Beginnen Sie mit Node

Laden Sie Node.js herunter und installieren Sie es, indem Sie den Anweisungen des Assistenten folgen

wie man eine Form in Photoshop umdreht
Laden Sie Node.js herunter und installieren Sie es, indem Sie den Anweisungen des Assistenten folgen

Beginnen wir bei Null und verwenden die Angular-CLI, um eine Hello World-App zu erstellen. Wenn Sie eine vorhandene App aktualisieren möchten, fahren Sie mit Schritt 4 fort. Wenn Sie dies noch nicht getan haben, Knoten herunterladen , die mit npm vorverpackt geliefert wird. Wenn Sie bereits über Node verfügen, überprüfen Sie in der Befehlszeile, ob es sich mindestens um Node 6.9.x und npm 3.x.x handelt.

$ node -v v6.10.2 $ npm -v 3.10.10

02. Richten Sie ein neues Projekt ein

Erstellen Sie eine einfache Hello World-App in der Angular CLI

Erstellen Sie eine einfache Hello World-App in der Angular CLI

Jetzt haben wir einen Paketmanager, mit dem wir Angular und die Angular-CLI installieren können. Mit der CLI können Sie unter anderem auf einfache Weise neue Projekte und Komponenten generieren.

$ npm install -g @angular/cli $ ng new my-first-angular4-app # Angular CLI commands use 'ng' $ ng serve -open # This command will bootstrap your app and launch it in the browser

03. Überprüfen Sie die Versionierung

Wenn Sie noch kein Angular-Projekt gesehen haben, nehmen Sie sich Zeit, um sich mit der von der CLI generierten Dateistruktur vertraut zu machen. Für unser neues Projekt, unser package.json sollte Version 4.0.0 Angular-Pakete auflisten.

beste Grafikkarte für After Effects 2018
'dependencies': { '@angular/common': '^4.0.0', '@angular/compiler': '^4.0.0', '@angular/core': '^4.0.0', '@angular/forms': '^4.0.0', '@angular/http': '^4.0.0', '@angular/platform-browser': '^4.0.0', '@angular/platform-browser-dynamic': '^4.0.0', '@angular/router': '^4.0.0' [...]}

04. Upgrade auf Angular 4

Wenn Sie eine vorhandene Angular-App mit 2.x-Versionen haben, ist es in den meisten Fällen sehr einfach, auf Version 4 zu aktualisieren. Wir müssen nur die relevanten Pakete über die Befehlszeile installieren und aktualisieren. Mac:

$ npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Windows:

> npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

05. Laden Sie die Tutorial-App herunter

Ab sofort arbeiten wir mit einer Angular 2-Beispiel-App, die Sie herunterladen können FileSilo (Ausführliche Hinweise dazu finden Sie im Intro oben). Beachten Sie, dass diese App nur zur Veranschaulichung erstellt wurde. Nachdem Sie die Flow Shop-App in Ihr Stammverzeichnis heruntergeladen haben, installieren Sie die Abhängigkeiten und starten Sie sie im Browser.

$ npm install $ ng serve --open

06. Rüste Flower Shop auf 4.0 auf

Unser benutzerdefiniertes Modalmodul muss umbenannt werden [zum Vergrößern auf das Symbol klicken]

Unser benutzerdefiniertes Modalmodul muss umbenannt werden [zum Vergrößern auf das Symbol klicken]

Innerhalb der Blumengeschäft Verzeichnis, Upgrade auf 4.0. Wir haben einige UNMET PEER DEPENDENCY Fehler nach dem Upgrade.

07. Peer-Abhängigkeiten korrigieren

Peer-Abhängigkeiten dienen zum Verwalten von Projekten mit Paketen, die auf unterschiedlichen Versionen derselben Abhängigkeiten basieren. Sie müssen diese manuell zu Ihrem hinzufügen package.json Datei. Zu den Peer-Abhängigkeiten, die wir für Flower Shop benötigen, gehören ältere Versionen von @ Angular / {Core, http} , rxjs und zone.js .

Überprüfen Sie die Fehler in der Terminalausgabe und fügen Sie jede fehlende Abhängigkeit hinzu package.json .

'peerDependencies': { '@angular/core': '>= 2.0.0', '@angular/http': '>= 2.0.0', 'rxjs': '^5.0.0', 'zone.js': '0.7.8' },

08. Achten Sie auf Namensänderungen

Unsere Flower Shop-App verwendet eine Open-Source-Komponente namens ng2-modal . Der Autor hat jedoch inzwischen seine Namenskonvention auf aktualisiert ngx-modal . Wir müssen unseren Abhängigkeitsnamen und ändern ng-Modul Importe entsprechend.

package.json: 'dependencies': { [...] 'ngx-modal': '0.0.25', [...] }, app/app.module.ts: import { ModalModule } from 'ngx-modal';

09. Versionen prüfen

Unsere benutzerdefinierte modale Komponente muss auch auf eine neuere Version aktualisiert werden. Aktualisieren Sie sie daher unbedingt mit npm.

wie man gif in photoshop bearbeitet
$ npm install ngx-modal@latest --save

10. Überprüfen Sie Ihre Arbeit

Jetzt haben wir unsere Abhängigkeiten gepatcht. Es ist eine gute Idee, sie zu löschen Knotenmodule und baue es wieder aus unserem package.json . Wenn alles gut geht, sollten Sie einen sauberen Build haben! Wenn Sie dies nicht tun, fehlt möglicherweise noch etwas in Ihren Abhängigkeitsversionen. Schau noch einmal hin.

$ rm -rf node_modules/ $ npm cache clean $ npm install $ ng serve --open

Nächste Seite: Schritte 11-20

  • 1
  • zwei

Aktuelle Seite: Schritte 1-10

Nächste Seite Schritte 11-20