Architektur

Module

Jede Applikation besitzt mindestens ein Modul

                     
                        import {NgModule} from "@angular/core";
                        import {AppComponent} from "./app.component";
                        import {HttpModule} from "@angular/http";
                        import {CustomerService} from "./customer.service";
                        @NgModule({
                            declarations: [AppComponent],
                            imports: [HttpModule],
                            providers: [CustomerService],
                            bootstrap: [AppComponent]
                        })
                        export class AppModule {}
                     
                 

@NgModule Decorator

Eine Funktion die ein Objekt als Argument erwartet

• declarations - ALLE Komponenten, Direktiven und Pipes dieses Moduls
• exports - ein Subset der Declarations, das von anderen Modulen benutzt werden darf
• imports - andere Module die wir benötigen
• providers - global verfügbare Services die das Modul der Dependency Injection bereitstellt

Services

• werden mittels Dependency Injection zur Verfügung gestellt
• Sind einfach TypeScript Klassen
• werden über den Typ injected
• Benötigen den Decorator @Injectable()
• Sind im Normalfall Singletons (wenn sie auf dem Modul registriert werden)

Einfachster Aufbau eines Services

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

                        @Injectable()
                        export class MyAwesomeService {

                          constructor() { }

                        }
                     
                 

Data Binding

Binding in Templates

                 
                    
{{person.name}}
                    
                    

                 
               

• Interpolation: {{person.name}} - zeigt den Wert des person.name properties an
• Property Binding: [person] - übergibt den Wert von "selectedPerson" an die Person Komponente
• Event Binding: (click) - ruft selectPerson()