Hinweise zum Programmierbeispiel

Juergen.Zimmermann@HS-Karlsruhe.de

Diese Datei ist in Markdown geschrieben und kann mit <Strg><Shift>v in Visual Studio Code leicht gelesen werden.

Näheres zu Markdown gibt es in einem Wiki

Das Beispiel in einem Pfad auspacken, der weder Leerzeichen noch Umlaute enthält noch im Desktop liegt.

Vor der ersten Übung zu Angular müsseen Installationsprobleme behoben sein.

Installation, falls es das Unterverzeichnis node_modules nicht gibt

• Bei GitHub registrieren, falls man dort noch nicht registriert ist.

• [Nur an der Hochschule] Proxy für die Installation in einer Eingabeaufforderung konfigurieren:

  • USERNAME ist der Platzhalter für die Benutzerkennung für die Poolrechner,
  • PASSWORD für das zugehörige Passwort

    npm c set proxy http://USERNAME:PASSWORD@proxy.hs-karlsruhe.de:8888
    npm c set https-proxy http://USERNAME:PASSWORD@proxy.hs-karlsruhe.de:8888
    git config --global http.proxy http://USERNAME:PASSWORD@proxy.hs-karlsruhe.de:8888
    git config --global https.proxy http://USERNAME:PASSWORD@proxy.hs-karlsruhe.de:8888
    git config --global url."http://".insteadOf git://

• Installation der Fremdsoftware in einer Eingabeaufforderung:

    npm i
    npm link @types\chart.js

Kopieren der benötigten Fremdsoftware für die künftige Distribution

    gulp initdist

Distribution des eigenen Codes als bundle.js im Verzeichnis dist erstellen

    gulp bundle

• Codequalität mit tslint und clang-format prüfen,
• TypeScript durch tsc in das Verzeichnis ts2js übersetzen,
• Bundle bundle.js im Verzeichnis dist erstellen,
• CSS-Dateien durch Sass und clean-css im Verzeichnis dist erstellen,
• usw.

Falls es in Zusammenhang mit Sass den Fehler Error: Missing binding gibt, dann muss man in einer Eingabeaufforderung folgendes Kommando eingeben:

    npm rebuild node-sass

Künftige Routineaufgaben

Webserver browser-sync oder nginx starten

    gulp browsersync
    gulp nginx

Falls nginx verwendet werden soll, muss vor dem ersten Start einmalig gulp nginxinit aufgerufen werden.

Jetzt kann das Beispiel in Chrome mit der Basis-URI https://localhost aufgerufen werden. Für Chrome sind außerdem folgende Erweiterungen empfehlenswert:

• Augury
• Recx Security Analyzer

bundle.js mit neuen/geänderten Dateien im Verzeichnis dist erstellen

    gulp bundle

Dabei werden auch

• TypeScript-Dateien in das Unterverzeichnis tmp übersetzt
• neue/geänderte HTML-Dateien kopiert
• neue/geänderte Sass-Dateien in CSS übersetzt
• neue/geänderte Bilder kopiert

Evtl. Fehler bzgl. Sass

Falls es in Zusammenhang mit Sass den Fehler Error: Missing binding gibt, dann muss man in einer Eingabeaufforderung folgendes Kommando eingeben:

    npm rebuild node-sass

Typische Imports für Angular

    import {
        Component,
        NgModule,
        Input,
        Output,
        EventEmitter,
        Inject,
        Injectable,
        OnInit,
        trigger,
        transition,
        ElementRef,
        ViewChild
    } from '@angular/core';
    import {
        RadioButtonState,
        CommonModule
    } from '@angular/common';
    import {
        FormGroup,
        FormBuilder,
        FormControl,
        Validators
    } from '@angular/forms';
    import {
        Routes,
        Router,
        ActivatedRoute,
        CanDeactivate,
        ActivatedRouteSnapshot,
        RouterStateSnapshot
    } from '@angular/router';
    import {
        Http,
        RequestOptions,
        Headers,
        Request,
        RequestMethod
    } from '@angular/http'
    import {Title} from '@angular/platform-browser';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

Empfohlene Code-Konventionen

In Anlehnung an den Styleguide von Angular und an den Styleguide von TypeScript

• "Feature Filenames": feature.type.ext, z.B.
  • app.module.ts oder
  • create-kunde.component.ts oder
  • kunden.service.ts oder
  • create-kunde.component.html
• Barrel für häufige Imports, z.B.
  • shared\index.ts erstellen:

    export * from './bar';
    export * from './foo';

  • künftig:

    import {Foo, Bar} from 'shared';

• Klassennamen und Enums mit PascalCase
• Attribute und Funktionen mit camelCase,
• private Properties nicht mit vorangestelltem _
• Interfaces nicht mit vorangestelltem I
• [...].forEach() und [...].filter() statt for-Schleife
• Arrow-Functions statt anonyme Funktionen
• undefined verwenden, nicht: null
• Geschweifte Klammern bei if-Anweisungen
• Präfix für eigene Tags, z.B.
  • s-suche-artikel oder
  • shop-suche-artikel
• Maximale Dateigröße: 400 Zeilen
• Maximale Funktionsgröße: 75 Zeilen

Sonstige Hinweise

Dokumentation zu Chrome DevTools

Homepage

Firefox Developer Edition als Alternative zu Chrome

Homepage

Projekt-Dokumentation generieren

    gulp doc

Proxy-Einstellung künftig ein-/ausschalten

    gulp proxy
    gulp noproxy

Umformatieren einer einzelnen Datei mit clang-format

Beispiel:

  .\node_modules\clang-format\bin\win32\clang-format -i -style="file" src\...\myfile.ts

Internationalisierung

Das Package i18n innerhalb von Angular 2 ist noch nicht fertig. Bei Bedarf kann ng2-translate benutzt werden.