Angular 2 Tutorial
Erste Schritte mit Angular 2

Bemerkungen

Versionen

Installieren Sie angle2 mit dem Winkelcli

Dieses Beispiel dient zum schnellen Einrichten von Angular 2 und zum Erstellen eines schnellen Beispielprojekts.

Voraussetzungen:

• Node.js v4 oder höher.
• npm v3 oder höher oder garn .

Öffnen Sie ein Terminal und führen Sie die Befehle nacheinander aus:

npm install -g @angular/cli

oder

yarn global add @angular/cli

abhängig von Ihrer Wahl des Paketmanagers.

Mit dem vorherigen Befehl wird @ angle / cli global installiert, wobei die ausführbare Datei ng PATH hinzugefügt wird.

Ein neues Projekt einrichten

Navigieren Sie mit dem Terminal zu einem Ordner, in dem Sie das neue Projekt einrichten möchten.

Führen Sie die Befehle aus:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Nun haben Sie ein einfaches Beispielprojekt, das mit Angular 2 erstellt wurde. Sie können jetzt zu dem in Terminal angezeigten Link navigieren und sehen, was läuft.

Hinzufügen zu einem vorhandenen Projekt

Navigieren Sie zum Stammverzeichnis Ihres aktuellen Projekts.

Führen Sie den Befehl aus:

ng init

Damit fügen Sie Ihrem Projekt das erforderliche Gerüst hinzu. Die Dateien werden im aktuellen Verzeichnis erstellt. Stellen Sie daher sicher, dass Sie diese in einem leeren Verzeichnis ausführen.

Projekt lokal ausführen

Um Ihre Anwendung während der Ausführung im Browser anzuzeigen und mit ihr zu interagieren, müssen Sie einen lokalen Entwicklungsserver starten, der die Dateien für Ihr Projekt hostet.

ng serve

Wenn der Server erfolgreich gestartet wurde, sollte eine Adresse angezeigt werden, unter der der Server ausgeführt wird. Normalerweise ist dies:

http://localhost:4200

Standardmäßig ist dieser lokale Entwicklungsserver mit Hot Module Reloading verbunden. Änderungen an HTML, Typoscript oder css führen dazu, dass der Browser automatisch neu geladen wird (kann aber bei Bedarf deaktiviert werden).

Komponenten, Richtlinien, Pipes und Services generieren

Mit dem Befehl ng generate <scaffold-type> <name> (oder einfach ng g <scaffold-type> <name> ) können Sie automatisch Angular-Komponenten generieren:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Es gibt verschiedene Arten von Gerüsten, die eckige Kli erzeugen können:

Sie können den Typnamen auch durch den ersten Buchstaben ersetzen. Zum Beispiel:

ng gm my-new-module zum Erzeugen eines neuen Moduls oder ng gc my-new-component zum Erstellen einer Komponente.

Gebäude / Bündelung

Wenn Sie mit dem Erstellen der Angular 2-Web-App fertig sind und die Installation auf einem Webserver wie Apache Tomcat durchführen möchten, müssen Sie nur den Build-Befehl mit oder ohne Produktionsflag ausführen. Die Produktion minimiert den Code und optimiert für eine Produktionseinstellung.

ng build

oder

ng build --prod

Suchen Sie dann im Stammverzeichnis des Projekts nach einem Ordner /dist , der den Build enthält.

Wenn Sie die Vorteile eines kleineren Produktionspakets wünschen, können Sie auch die Ahead-of-Time-Vorlagenkompilierung verwenden, die den Vorlagen-Compiler aus dem endgültigen Build entfernt:

ng build --prod --aot

Unit Testing

Angular 2 bietet integrierte Unit-Tests, und jedes von angle-cli erstellte Element generiert einen grundlegenden Unit-Test, der erweitert werden kann. Die Unit-Tests werden mit Jasmin geschrieben und mit Karma ausgeführt. Um den Test zu starten, führen Sie den folgenden Befehl aus:

ng test

Dieser Befehl führt alle Tests im Projekt aus und führt sie jedes Mal erneut aus, wenn sich eine Quelldatei ändert, unabhängig davon, ob es sich um einen Test oder Code aus der Anwendung handelt.

Weitere Informationen finden Sie auch auf der Website von angle-cli github

Erste Schritte mit Angular 2 ohne eckige Kli.

Winkel 2.0.0-rc.4

In diesem Beispiel erstellen wir eine "Hallo Welt!" App mit nur einer Wurzelkomponente ( AppComponent ) der Einfachheit halber.

Voraussetzungen:

• Node.js v5 oder höher
• npm v3 oder höher

Anmerkung: Sie können die Versionen überprüfen, indem Sie in der Konsole / im Terminal node -v und npm -v .

Schritt 1

Erstellen Sie einen neuen Ordner für Ihr Projekt und geben Sie ihn ein. Nennen wir es als angular2-example .

mkdir angular2-example
cd angular2-example

Schritt 2

Bevor wir mit dem Schreiben des App-Codes beginnen, fügen wir die vier folgenden Dateien hinzu: package.json , tsconfig.json , typings.json und systemjs.config.js .

Haftungsausschluss: Die gleichen Dateien finden Sie im offiziellen 5-Minuten-Schnellstart .

package.json - Ermöglicht das Herunterladen aller Abhängigkeiten mit npm und bietet eine einfache Skriptausführung, um das Leben einfacher Projekte zu erleichtern. (Sie sollten in Betracht ziehen, in Zukunft Gulp zu verwenden, um Aufgaben zu automatisieren.)

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - Konfiguriert den TypeScript-Transpiler.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json - typings.json TypeScript die von uns verwendeten Bibliotheken erkennen.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

systemjs.config.js - Konfiguriert SystemJS (Sie können auch Webpack verwenden ).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Schritt 3

Installieren wir die Abhängigkeiten durch Eingabe

npm install

in der Konsole / im Terminal.

Schritt 4

Erstellen Sie die angular2-example index.html im Ordner angular2-example .

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

Ihre Anwendung wird zwischen den my-app Tags gerendert.

Allerdings weiß Angular immer noch nicht, was gerendert werden soll. Um das zu sagen, definieren wir AppComponent .

Schritt 5

Erstellen Sie einen Unterordner mit dem Namen app in dem wir die Komponenten und Dienste definieren können, aus denen sich unsere App zusammensetzt. (In diesem Fall enthält es nur den AppComponent Code und main.ts )

mkdir app

Schritt 6

Erstellen Sie die Datei app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

Was ist los? Zunächst importieren wir den @Component Dekorator, mit dem wir Angular das HTML-Tag und die Vorlage für diese Komponente @Component . Dann erstellen wir die Klasse AppComponent mit den Variablen title und messages , die wir in der Vorlage verwenden können.

Nun sehen wir uns diese Vorlage an:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

Wir zeigen die title Variable in einem h1 Tag an und *ngFor dann eine Liste, die jedes Element des messages Arrays mithilfe der Direktive *ngFor . Für jedes Element im Array erstellt *ngFor eine message , die wir im li Element verwenden. Das Ergebnis wird sein:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

Schritt 7

Jetzt erstellen wir eine main.ts Datei, die die erste Datei ist, die Angular betrachtet.

Erstellen Sie die Datei app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Wir importieren die bootstrap Funktion und die AppComponent Klasse und verwenden dann bootstrap , um Angular mitzuteilen, welche Komponente als Root verwendet werden soll.

Schritt 8

Es ist Zeit, deine erste App zu starten. Art

npm start

in Ihrer Konsole / Terminal. Dies wird ein bereits erstelltes Skript aus ausführen package.json die lite-Server startet, öffnet die App in einem Browser - Fenster, und betreibt das Typoskript Transpiler im Watch - Modus (so .ts Dateien transpiled werden und der Browser aktualisiert werden, wenn Sie die Änderungen speichern) .

Was jetzt?

Lesen Sie das offizielle Angular 2-Handbuch und die anderen Themen in der Dokumentation zu StackOverflow .

Sie können AppComponent auch bearbeiten, um externe Vorlagen, Stile zu verwenden oder Komponentenvariablen hinzuzufügen / zu bearbeiten. Sie sollten Ihre Änderungen sofort nach dem Speichern der Dateien sehen.

Synchronisierung von Visual Studios mit NPM- und NODE-Updates

Schritt 1: Suchen Sie nach dem Download von Node.js, der normalerweise unter C: / program files / nodejs installiert ist

Schritt 2: Öffnen Sie Visual Studios und navigieren Sie zu "Extras> Optionen".

Schritt 3: Navigieren Sie im Optionsfenster zu "Projekte und Lösungen> Externe Webtools".

Schritt 4: Fügen Sie einen neuen Eintrag für Ihre Node.js-Dateiposition hinzu (C: / program files / nodejs). WICHTIG Verwenden Sie die Pfeiltasten im Menü, um Ihre Referenz an den Anfang der Liste zu verschieben.

Schritt 5: Starten Sie Visual Studios neu und führen Sie eine npm-Installation für Ihr Projekt über das npm-Befehlsfenster aus

Durchkommen dieses lästigen Firmenvertreters

Wenn Sie versuchen, eine Angular2-Site auf Ihrem Windows-Arbeitscomputer bei XYZ MegaCorp zum Laufen zu bringen, besteht die Möglichkeit, dass Sie Probleme mit dem Proxy des Unternehmens haben.

Es gibt (mindestens) zwei Paketmanager, die den Proxy durchlaufen müssen:

1. NPM
2. Typisierungen

Für NPM müssen Sie der .npmrc Datei die folgenden Zeilen .npmrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

Für Typings müssen Sie der .typingsrc Datei die folgenden Zeilen .typingsrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

Diese Dateien sind wahrscheinlich noch nicht vorhanden, sodass Sie sie als leere Textdateien erstellen können. Sie können der Projektwurzel hinzugefügt werden (dieselbe Stelle wie package.json oder Sie können sie in %HOMEPATH% und stehen für alle Ihre Projekte zur Verfügung.

Das etwas, das nicht offensichtlich ist und der Hauptgrund ist, warum die Proxy-Einstellungen nicht funktionieren, ist der %5C der die URL-Kodierung des \ , um die Domänen- und Benutzernamen zu trennen. Vielen Dank an Steve Roberts für diesen Einsatz: Verwenden von npm hinter dem Firmenproxy .pac

Erste Schritte mit Angular 2 mit node.js / expressjs Backend (http-Beispiel enthalten)

Wir erstellen ein einfaches "Hallo Welt!" App mit Angular2 2.4.1 ( @NgModule Änderung) mit einem node.js (expressjs) -Backend.

Voraussetzungen

• Node.js v4.xx oder höher
• npm v3.xx oder höher oder Garn

Führen Sie dann npm install -g typescript oder yarn global add typescript , um TypScript global zu installieren

Roadmap

Schritt 1

Erstellen Sie einen neuen Ordner (und das Stammverzeichnis unseres Back-End) für unsere App. Nennen wir es Angular2-express .

Befehlszeile :

mkdir Angular2-express
cd Angular2-express

Schritt 2

Erstellen Sie die package.json (für Abhängigkeiten) und app.js (für das Bootstrapping) für unsere node.js App.

package.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

Führen Sie dann eine npm install oder ein yarn , um die Abhängigkeiten zu installieren.

Nun ist unsere Backend-Struktur abgeschlossen. Lasst uns zum Front-End gehen.

Schritt 3

Unser Frontend sollte sich in einem Ordner namens front innerhalb unseres Angular2-express Ordners befinden.

Befehlszeile:

mkdir front
cd front

Genau wie wir es mit unserem Backend getan haben, benötigt auch unser Frontend die Abhängigkeitsdateien. Lassen Sie uns die folgenden Dateien erstellen: package.json , systemjs.config.js , tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

Führen Sie dann eine npm install oder ein yarn , um die Abhängigkeiten zu installieren.

Nun, da unsere Abhängigkeitsdateien vollständig sind. Gehen wir weiter zu unserem index.html :

index.html:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Jetzt können wir unsere erste Komponente erstellen. Erstellen Sie einen Ordner namens app in unserem front Ordner.

Befehlszeile:

mkdir app
cd app

Lassen Sie uns die folgenden Dateien mit dem Namen main.ts , app.module.ts , app.component.ts

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

Danach kompilieren Sie die Typoscript-Dateien in Javascript-Dateien. Gehen Sie vom aktuellen Verzeichnis (innerhalb des Ordners Angular2-Express) aus um 2 Stufen und führen Sie den folgenden Befehl aus.

Befehlszeile:

cd ..
cd ..
tsc -p front

Unsere Ordnerstruktur sollte folgendermaßen aussehen:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

Führen Sie schließlich im Ordner Angular2-Express den Befehl node app.js in der Befehlszeile aus. Öffnen Sie Ihren bevorzugten Browser und überprüfen Sie localhost:9999 , um Ihre App anzuzeigen.

Lassen Sie uns in Angular 4 eintauchen!

Winkel 4 ist jetzt verfügbar! Tatsächlich verwendet Angular seit Angular 2 Semver, was erfordert, dass die Hauptzahl erhöht wird, wenn brechende Änderungen eingeführt wurden. Das Angular-Team hat Funktionen verschoben, die zu brechenden Änderungen führen. Diese werden mit Angular 4 veröffentlicht. Angular 3 wurde übersprungen, um die Versionsnummern der Kernmodule anzugleichen, da der Router bereits Version 3 hatte.

Laut Angular-Team werden Angular 4-Anwendungen weniger Platz benötigen und schneller als zuvor sein. Sie haben das Animationspaket vom @ eckig / Kernpaket getrennt. Wenn jemand kein Animationspaket verwendet, wird zusätzlicher Code nicht in der Produktion enden. Die Vorlagenbindungssyntax unterstützt jetzt die if / else-Stilsyntax. Angular 4 ist jetzt mit der neuesten Version von Typescript 2.1 und 2.2 kompatibel. Angular 4 wird also aufregender.

Jetzt zeige ich Ihnen, wie Sie Angular 4 in Ihrem Projekt einrichten.

Beginnen wir mit dem Angular-Setup auf drei verschiedene Arten:

Sie können Angular-CLI (Command Line Interface) verwenden. Es installiert alle Abhängigkeiten für Sie.

• Sie können von Winkel 2 zu Winkel 4 wechseln.

• Sie können github verwenden und die Angular4-Boilerplate klonen. (Es ist das einfachste.)

• Winkeleinrichtung mit Winkelschnittstelle (Command Line Interface).

Vergewissern Sie sich vor der Verwendung von Angular-CLI, dass auf Ihrem Computer ein Knoten installiert ist. Hier verwende ich Knoten v7.8.0. Öffnen Sie nun Ihr Terminal und geben Sie den folgenden Befehl für Angular-CLI ein.

npm install -g @angular/cli

oder

yarn global add @angular/cli

abhängig vom verwendeten Paketmanager.

Installieren wir Angular 4 mithilfe von Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-boilerplate Wir sind alle auf Angular 4 eingestellt. Seine recht einfache und unkomplizierte Methode.😌

Winkeleinrichtung durch Migration von Winkel 2 zu Winkel 4

Nun sehen wir den zweiten Ansatz. Ich zeige Ihnen, wie Sie Angular 2 nach Angular 4 migrieren. Dazu müssen Sie ein Angular 2-Projekt klonen und die Angular 2-Abhängigkeiten mit der Angular 4-Abhängigkeit in Ihrem package.json wie folgt aktualisieren:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

Dies sind die Hauptabhängigkeiten für Angular 4. Jetzt können Sie npm installieren und dann starten, um die Anwendung auszuführen. Zur Referenz meine package.json.

Winkeleinrichtung aus dem Github-Projekt

Bevor Sie mit diesem Schritt beginnen, vergewissern Sie sich, dass git in Ihrem Computer installiert ist. Öffnen Sie Ihr Terminal und klonen Sie die angle4-boilerplate mit dem folgenden Befehl:

[email protected]:CypherTree/angular4-boilerplate.git

Installieren Sie dann alle Abhängigkeiten und führen Sie sie aus.

npm install

npm start

Und Sie sind mit dem Setup von Angular 4 fertig. Alle Schritte sind sehr unkompliziert, so dass Sie sich für jeden entscheiden können.

Verzeichnisstruktur der angle4-boilerplate

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

Grundlegendes Verständnis für die Verzeichnisstruktur:

Der gesamte Code befindet sich im src-Ordner.

Der Ordner "Mocks" ist für Modelldaten, die zu Testzwecken verwendet werden.

Der Modellordner enthält die Klasse und die Schnittstelle, die in der Komponente verwendet werden.

Der Ordner "modules" enthält eine Liste von Komponenten wie App, Login, Widget usw. Alle Komponenten enthalten Typoscript-, HTML- und CSS-Dateien. index.ts dient zum Exportieren der gesamten Klasse.

Der Ordner Dienste enthält eine Liste der in der Anwendung verwendeten Dienste. Ich habe Rest-Service und andere Komponentenservice getrennt. Im Ruhezustand enthält der Dienst verschiedene http-Methoden. Der Anmeldedienst dient als Vermittler zwischen der Anmeldekomponente und dem Ruhezustandsdienst.

Die Datei app.routing.ts beschreibt alle möglichen Routen für die Anwendung.

app.module.ts beschreibt das App-Modul als Root-Komponente.

bootstrap.ts führt die gesamte Anwendung aus.

Der Webpack-Ordner enthält die Webpack-Konfigurationsdatei.

package.json-Datei ist für alle Abhängigkeiten.

Karma enthält die Karma-Konfiguration für den Komponententest.

node_modules enthält eine Liste von Paketpaketen.

Beginnen wir mit der Login-Komponente. In login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

In login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

Wir müssen diese Komponente in index.ts exportieren.

export * from './login/login.component';

Wir müssen Routen für die Anmeldung in app.routes.ts festlegen

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

In der Wurzelkomponente app.module.ts müssen Sie nur diese Komponente importieren.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

und danach npm installieren und npm starten. Bitte schön! Sie können den Anmeldebildschirm in Ihrem localhost überprüfen. Bei Schwierigkeiten können Sie sich auf die angle4-Boilerplate beziehen.

Grundsätzlich kann ich mit der Anwendung Angular 4 weniger Gebäudepakete und schnelleres Ansprechen spüren und obwohl ich in der Codierung genau Angular 2 gefunden habe.