Projekt Setup

Aufgabe 3.1

Erstelle ein neues Projekt mit dem Angular CLI

                
                    $> cd /path/to/your/workplace
                    $> ng new angular-workshop

Erstellt Verzeichnis ./angular-workshop und installiert alle Dependencies.

Was kriegen wir denn schönes?

tslint.json

  • zur Konfiguration der statischen Code Analyse
  • Enthält Codelyzer - ein Linting Plugin für Angular
  • TS Lint
  • Codelyzer

tsconfig.json

  • Konfiguration für den TypeScript compiler
  • Wo liegen Typ-Definitionen
  • Welche JavaScript Version soll als Kompilatsoutput verwendet werden?
  • tsconfig.json Doku
  • Liste möglicher Optionen
  • Kann pro Modul noch verfeinert / geändert werden

README.md

protractor.conf.js

  • Protractor ist ein Tool für E2E Tests in Angular
  • Konfiguration für Tests
  • z.B.
    • Namens-Pattern der Tests die ausgeführt werden sollen
    • Browser der verwendet wird
    • URLs

package.json

  • Ähnlich einer pom.xml
  • definiert Projekt-Version und Abhängigkeiten
  • eigene Skripte können hinzugefügt werden 
                    
                          "scripts": {
                              "clean": "npm run rimraf dist",
                              "build": "npm run clean && npm run ng build"
                          }

Versionen

  • Viele Libraries nutzen Semantic Versioning
  • 1.2.3: Nur diese Exakte Version
  • ~1.2.3: Nur Bugfixes (1.2.X)
  • ^1.2.3: Nur Minor changes (1.X.Y)
  • 1.2.x: Wie ~ (Bugfixes)
  • *: alle Versionen

Semantic Versioning Cheatsheet

package-lock.json

  • Speichert indirekte Abhängigkeiten
  • Stellt sicher, dass bei einer erneuten Installation (CI, Arbeitskollege) exakt die gleichen Abhängigkeiten verwendet werden.

Installation von Dependencies

  • Installation über Konsole: npm install jquery --save-exact
  • Zeile in package.json einfügen & npm install ausführen
                    
                        "jquery": "2.4.6",

Kurzformen

  • npm install: npm i
  • --save-dev: -D
  • --save-exact: -E
  • --save-dev-exact: -D -E
                    
                        npm i -E @angular/http

Lokales Repository

  • das lokale Projekt-Repo ist im "node_modules" Ordner
  • Bei Problemen: Ordner löschen und neu installieren hilft oftmals
  • Sämtliche Abhängigkeiten befinden sich im "node_modules" Ordner
  • Wird nicht ins Repository eingecheckt!

Globale Installation

Keine Projektabhängigkeiten global installieren!

  • Zugriff auf lokale Pakete einfach möglich
  • in der "scripts" section ist "node_modules/.bin" verfügbar

Lokale Module

                    
                        "devDependencies": {
                            "webpack": "2.2.1",
                            "karma": "0.12.1"
                        },
                        "scripts": {
                            "build": "webpack",
                            "test": "npm run build && npm run karma start"
                        }

Zugriff auf der Konsole per "npm run build"

karma.conf.js

  • Karma ist ein Unit-Test Runner
  • Konfiguration für Unit-Tests
  • Welcher Browser: Chrome, Firefox, PhantomJS
  • Welcher Port
  • Automatischer Re-Run wenn Dateien sich ändern

.editorconfig

  • Editorunabhängige Konfiguration für Codestyles
  • Mehr Infos unter editorconfig.org

angular-cli.json

  • Konfiguration für das Angular CLI
  • Links zu wichtigen Einstiegsdateien
  • Konfiguration für Build, Test, statische Codeanalyse
  • Wrapper um die Standardtools Karma, Webpack, TSLint

src Folder

typings.d.ts

  • Zusätzliche Typdefinitionen für TypeScript

tsconfig.*.json

  • app → Modulspezifische TypeScript-Compiler-Konfiguration
  • spec → TypeScript-Compiler-Konfiguration für Tests

test.ts

  • Konfiguration für das Angular Testing
  • Einstiegspunkt für Karma
  • Welche Dateien sind Test Specs?
  • Angular spezifische Test Umgebung starten
  • Startet Karma zum Ausführen der Tests

styles.css / styles.scss

  • Je nach gewählter Style-Sheet Sprache
  • Standard normales CSS
  • Empfehlung Sass (scss) verwenden
  • Hauptfile für globale Styles

polyfills.ts

  • Browserspezifische Implementationen werden ausgeglichen
  • Je nach Browser der unterstützt werden soll, sind zusätzliche Helper-Bibliotheken nötig
  • Bibliotheken werden hier geladen, werden als Abhängigkeit zuvor installiert

main.ts

  • Haupteinstiegspunkt der Angular App
  • "Platform Browser Dynamic" enthält den Code für das Verarbeiten von Angular spezifischem Code (Komponenten, Bindings etc.)
  • Nutzt Just-in-Time (JIT) Compiler
  • Fährt unser Einstiegsmodul hoch

index.html

  • Einstiegs HTML Seite
  • JavaScript und CSS-Dateien werden im Build Prozess automatisch hinzugefügt
    →Keine JS oder CSS-Dateien selbst hinzufügen!
  • Unsere App-Komponente wird hier inkludiert

environments

  • Variablen für unterschiedliche Umgebungen
  • Angular ist im Produktiv-Modus bspw. sehr viel weniger verbos auf der Konsole

app

  • Der Ordner in dem wir uns hauptsächlich bewegen werden
  • Hier lebt die eigentliche Applikation

Questions are coming