marko-knoebl/angular-cheatsheet.md

## angular-cheatsheet.md

      
    Raw
  

              angular-cheatsheet.md
            
          
    Resourcen

https://angular.io
Grundlagen

Setup für Angular Entwicklung

siehe https://angular.io/guide/quickstart step 1
Angular CLI

ng new $projectname - neues Angular Projekt erstellen (siehe https://github.com/angular/angular-cli/wiki/new für Optionen)
ng serve (--open) - Testserver starten
ng generate component $componentname
ng generate service $servicename
ng build --prod
siehe https://github.com/angular/angular-cli#usage
Standard Projektstruktur


node_modules: Großer Ordner, der Abhängigkeiten enthält


package.json: npm-Konfiguration


karma.conf, protractor.conf: Tests


tsconfig.json: Typescript Konfiguration


src/index.html: Einstiegsseite


src/main.ts: Einstiegspunkt ("Startet" die app-Komponente)


src/polyfills.ts: polyfills für "ältere" Browser


src/app: die eigentliche Angular Anwendung


Polyfills und Browserunterstützung


siehe https://angular.io/guide/browser-support
Zeilen in src/polyfills.ts if "Einkommentieren", um "ältere" Browser zu unterstützen

Template Syntax

Templates können auf alle Properties der zugehörigen TypeScript-Komponente zugreifen.
Interpolation

Hello, {{ name }}
Properties

<img [src]="getImageSource()">
Events

<button (click)="onClick($event)">Hello
<input (keyup.enter)="onSubmit()">
Liste von Browser-Events: https://www.w3schools.com/jsref/dom_obj_event.asp
Two-way binding

<input [(ngModel)]="firstName">
Achtung: FormsModule muss dazu in app.module.ts importiert sein
if

<span *ngIf="hasError()">We encountered an error
for


  {{ i }}: {{ todo }}

Klassen

...
oder
...
oder

  
Forms: ngForm

ngForm: gleiches Konzept wie ngModel (nur für Forms statt Inputs)

  
f.value beinhaltet ein Objekt der Struktur: {'firstName': 'John', 'lastName': 'Smith'}
Forms: Beispiel


  Enter your first name!
  
  At least 3 characters!
  Submit

Services

Service erstellen

ng generate service $servicename
Services verwenden (dependency injection)

class MyComponent {
constructor(private bankaccountService: BankaccountService) {}
}
Eine Instanz von BankaccountService wird als private Property zur Verfügung stehen
HTTP (mit observables)

// app.module.ts
import { HttpClientModule } from '@angular/common/http';
[...]
imports: [..., HttpClientModule]
// app.component.ts
import { HttpClient } from '@angular/common/http';
[...]
constructor(private myHttp: HttpClient)
ngOnInit() {
this.myHttp.get('https://jsonplaceholder.typicode.com/todos')
.subscribe(
(response) => {
this.todos = response;
}
)
}
siehe: https://angular.io/guide/http
Routing

Grundlagen

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
...,
RouterModule.forRoot([
{ path: '000', component: BlackComponent },
{ path: 'fff', compoennt: WhiteComponent }
])
]


--> Komponente erscheint hier <--
Redirects und Wildcards

{ path: 'black', redirectTo: '000' },
{ path: 'white', redirectTo: 'fff' },
{ path: '**', redirectTo: 'fff' }
Links

white

<a routerLink="/fff" [routerLinkActive]="'active'">white
Routing-Parameter

{ path: ':color', component: ColorComponent }
import { ActivatedRouter } from '@angular/router';
class ColorComponent {
constructor(private route: ActivatedRoute) {
// we'll observe the route parameters; when the color parameter changes
// we update this.color
route.params.subscribe( (params) => { this.color = params.color; })
}
}
Weitere Informationen

siehe: https://angular.io/guide/router
Material Design Komponenten

Setup

https://material.angular.io - Schritte 1-6