Angular Kickstart: von 0 auf 100

Angular ist das aktuelle Single-Page-Framework von Google. Es vereinfacht die Implementierung selbst großer Webanwendungen, die nicht nur im Browser, sondern auch als App auf Ihrem Smartphone oder dem Desktop ausgeführt werden können.

Sie haben von Angular schon viel gehört und möchten wissen, wie damit entwickelt wird? Oder haben Sie Angular bereits bei Projekten im Einsatz und möchten die Grundkonzepte besser verstehen? Dann sind Sie bei diesem ganztägigen Workshop genau richtig. Sascha Lehmann rollt die Angular-Story komplett von vorne auf: Lernen Sie einige Tricks und Kniffe sowie den Unterschied zwischen Komponenten, Direktiven, Pipes und Services anhand einiger Aufgaben kennen.

Sie erfahren, wie Komponenten untereinander kommunizieren können, Benutzereingaben mithilfe von Formularen erfasst oder Anwendungssichten über das Routing gezielt adressiert und parametrisiert werden. Eben von 0 auf 100!

Transcript

1. Angular Kickstart
   von 0 auf 100
   

   View Slide

2. Angular Kickstart
   von 0 auf 100
   Developer Consultant @ Thinktecture AG
   Sascha Lehmann
   @derLehmann_S
   sascha.lehmann@thinktecture.com
   https://www.thinktecture.com/thinktects/sascha-lehmann/
   Spezialisierung: Angular und UI/UX
   

   View Slide

3. Angular Kickstart
   von 0 auf 100
   Consultant @ Thinktecture AG
   Christian Liebel
   @christianliebel
   christian.liebel@thinktecture.com
   https://www.thinktecture.com/thinktects/christian-liebel/
   Spezialisierung: Angular, PWA, Cross-Platform
   

   View Slide

4. 09:00–10:30 Part I
   10:30–11:00 Break
   11:00–12:30 Part II
   12:30–13:30 Lunch Break
   13:30–15:00 Part III
   15:00–15:30 Break
   15:30–17:00 Part IV
   Timetable
   von 0 auf 100
   Angular Kickstart
   

   View Slide

5. Expectations
   Angular Kickstart
   von 0 auf 100
   

   View Slide

6. Questions: anytime!
   Hands-on labs (everyone can participate)
   https://bit.ly/ngdkick
   Angular Kickstart
   von 0 auf 100
   Setup LAB #N
   

   View Slide

7. 1. What is Angular?
   2. Why SPA?
   3. Angular CLI
   4. Modules
   5. Bindings
   6. Pipes
   7. Components
   8. Input/Output
   9. Directives
   10.Dependency Injection
   Angular Kickstart
   von 0 auf 100
   Agenda
   

   View Slide

8. 11. Services
   12. Structural Directives
   13. Observables & RxJS
   14. HttpClient
   15. Lifecycle Hooks
   16. Async Pipe
   17. Routing
   18. Template-Driven Forms
   19. Debugging
   Angular Kickstart
   von 0 auf 100
   Agenda
   

   View Slide

9. The next best todo list app!
   Angular Kickstart
   von 0 auf 100
   Our Demo Use-Case
   

   View Slide

10. 1. What is Angular?
    von 0 auf 100
    Angular Kickstart
    

    View Slide

11. SPA
    Framework
    Cross-
    Platform
    Platform-
    agnostic
    Open-
    source
    What is Angular?
    von 0 auf 100
    Angular Kickstart
    

    View Slide

12. Technical Basis
    Angular Kickstart
    von 0 auf 100
    Angular
    

    View Slide

13. Release Schedule
    Time-based release schedule (6 months)
    • March/April: even version
    • September/October: odd version
    Deprecation Policy
    • Compatibility to previous major version (1 year)
    • Long-Term Supported Version (critical fixes/security patches only)
    • Current Version -> 15
    Angular
    von 0 auf 100
    Angular Kickstart
    

    View Slide

14. 2. Why SPA?
    von 0 auf 100
    Angular Kickstart
    

    View Slide

15. Properties
    • Fat clients (i.e., load everything they need to run during bootstrap)
    • A change of the view does not lead to a server-side page navigation
    Single-Page Web Applications (SPA)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

16. Advantages
    • Very performant
    • Works offline
    • No special server requirements
    (i.e., serving static files is
    sufficient)
    Disadvantages
    • Some logic (i.e., computation-
    intensive) can only be run on a
    server (connection required)
    • Logic is transfered to the
    client (code can’t be kept
    secret)
    Single-Page Web Applications (SPA)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

17. Architecture
    Single-Page Web Applications (SPA)
    Server-
    Logik
    Web API
    Push Service
    Web API
    DBs
    HTML, JS,
    CSS, Assets
    Webserver Webbrowser
    SPA
    Client-
    Logik
    View
    HTML/CSS
    View
    HTML/CSS
    View
    HTML/CSS
    HTTPS
    WebSockets
    HTTPS
    HTTPS
    von 0 auf 100
    Angular Kickstart
    

    View Slide

18. Cross-Platform Support
    Single-Page Web Applications (SPA)
    JS
    HTML
    CSS
    .ipa
    .exe .app ELF
    .apk .appx
    Single-Page Web
    Application
    Capacitor
    Electron
    von 0 auf 100
    Angular Kickstart
    

    View Slide

19. 3. Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

20. Features
    Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

21. Features
    Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

22. Features
    Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

23. Features
    Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

24. Features
    Angular CLI
    von 0 auf 100
    Angular Kickstart
    

    View Slide

25. Angular Kickstart
    von 0 auf 100
    Let’s try out StackBlitz LAB #0
    

    View Slide

26. 4. Modules
    von 0 auf 100
    Angular Kickstart
    

    View Slide

27. Application Segmentation
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    Modules
    von 0 auf 100
    Angular Kickstart
    

    View Slide

28. Angular Building Blocks
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    Modules
    Components
    Directives
    Pipes
    High-Level
    Services
    Low-Level
    Services
    von 0 auf 100
    Angular Kickstart
    

    View Slide

29. Modules
    Components Directives Pipes
    Modules
    Services
    von 0 auf 100
    Angular Kickstart
    

    View Slide

30. Dependency Tree
    AppModule
    TodoModule
    CommonModule
    BookModule
    CommonModule
    TicketModule
    ShopModule
    EditorModule
    Modules
    von 0 auf 100
    Angular Kickstart
    

    View Slide

31. For the future
    Modules
    von 0 auf 100
    Angular Kickstart
    Standalone
    Components
    Directives Pipes
    !
    

    View Slide

32. 5. Bindings
    von 0 auf 100
    Angular Kickstart
    

    View Slide

33. UI references a property on the component instance that should be
    interpolated
    Or: UI references a method on the component instance that should be
    called on a certain event
    Automatically updates UI when the model is updated
    Keeps presentation and model in sync
    Data Binding
    von 0 auf 100
    Angular Kickstart
    

    View Slide

34. btnCalc
    lblVal
    von 0 auf 100
    Angular Kickstart
    

    View Slide

35. {{
    Moustache Syntax
    von 0 auf 100
    Angular Kickstart
    

    View Slide

36. Handlebars
    von 0 auf 100
    Angular Kickstart
    

    View Slide

37. Interpolation
    Component view (HTML)
    {{ value }}
    Component logic (TS)
    @Component(/* … */)
    export class AppComponent {
    public value = 'Hello';
    }
    Bindings
    von 0 auf 100
    Angular Kickstart
    

    View Slide

38. Interpolation
    Component view (HTML)
    {{ value }}
    Component logic (TS)
    @Component(/* … */)
    export class AppComponent {
    public value = 'Hello';
    }
    Bindings
    von 0 auf 100
    Angular Kickstart
    

    View Slide

39. [ ] ( )
    More Bindings
    von 0 auf 100
    Angular Kickstart
    

    View Slide

40. Pass data in
    Bind to a certain property of a DOM node or
    component/directive
    Property Binding
    [ ]
    von 0 auf 100
    Angular Kickstart
    

    View Slide

41. More options
    Angular Kickstart
    von 0 auf 100
    Property Bindings
    

    View Slide

42. Get data out
    Bind to a certain event of a DOM node or
    component/directive
    Event Binding
    ( )
    von 0 auf 100
    Angular Kickstart
    

    View Slide

43. Event Binding
    von 0 auf 100
    Angular Kickstart
    

    View Slide

44. - Interpolations
    - Property Bindings
    - Event Bindings
    Angular Kickstart
    von 0 auf 100
    Bindings LAB #1
    

    View Slide

45. Magic value: $event
    Contains the event arguments
    Event Binding
    ( )
    von 0 auf 100
    Angular Kickstart
    

    View Slide

46. Event Binding LAB #2
    von 0 auf 100
    Angular Kickstart
    

    View Slide

47. 6. Pipes
    von 0 auf 100
    Angular Kickstart
    

    View Slide

48. UI-related
    Re-usable
    Manipulate binding values for the view
    without changing the underlying value (one-way)
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

49. Principle
    Pipes
    Value Pipe Transformed Value
    von 0 auf 100
    Angular Kickstart
    

    View Slide

50. Principle
    Pipes
    Hello UppercasePipe HELLO
    von 0 auf 100
    Angular Kickstart
    

    View Slide

51. Built-in Pipes
    • uppercase
    • lowercase
    • date
    • number
    • percent
    • currency
    • json
    Pipes
    von 0 auf 100
    Angular Kickstart
    

    View Slide

52. Parameters
    Pipes can also have parameters delimited by a colon
    Pipes
    von 0 auf 100
    Angular Kickstart
    

    View Slide

53. Built-in Pipes
    Pipes
    von 0 auf 100
    Angular Kickstart
    

    View Slide

54. Custom Pipes
    Pipes
    von 0 auf 100
    Angular Kickstart
    

    View Slide

55. - Interpolation
    - Built-in pipes
    - Create a new pipe
    Angular Kickstart
    von 0 auf 100
    Pipes LAB #3
    

    View Slide

56. 7. Components
    von 0 auf 100
    Angular Kickstart
    

    View Slide

57. UI-related
    Re-usable
    Custom DOM element
    HTML Template
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

58. Principle
    Components
    Input 1
    Component
    Output A
    Input 2 Output B
    Input 1
    Component
    von 0 auf 100
    Angular Kickstart
    

    View Slide

59. Components
    von 0 auf 100
    Angular Kickstart
    

    View Slide

60. Usage
    
    @Component({
    selector: 'app-todo',
    templateUrl: './todo.component.html',
    styleUrls: ['./todo.component.css']
    })
    export class AppComponent {
    }
    Components
    von 0 auf 100
    Angular Kickstart
    

    View Slide

61. - Create a new component
    - Use the new component in your AppComponent’s template
    Components LAB #4
    von 0 auf 100
    Angular Kickstart
    

    View Slide

62. 8. Input/Output
    von 0 auf 100
    Angular Kickstart
    

    View Slide

63. Bindings for component state/events
    [ ] ( )
    Input/Output
    von 0 auf 100
    Angular Kickstart
    

    View Slide

64. We want to pass arbitrary data to components:
    Input
    von 0 auf 100
    Angular Kickstart
    

    View Slide

65. Component Perspective
    Input
    von 0 auf 100
    Angular Kickstart
    

    View Slide

66. Property Bindings
    If you want to bind a static string to a property, you can use a simplified
    form by leaving out the square brackets.
    Angular Kickstart
    von 0 auf 100
    Input
    

    View Slide

67. Property Bindings
    If you want to react to changes (i.e. new value or updated reference) of
    the property binding, use TypeScript field setters:
    Angular Kickstart
    von 0 auf 100
    Input
    

    View Slide

68. We want to get informed about custom events:
    Output
    von 0 auf 100
    Angular Kickstart
    

    View Slide

69. Component Perspective
    Output
    von 0 auf 100
    Angular Kickstart
    

    View Slide

70. - Input
    - Output
    Input/Output LAB #5
    von 0 auf 100
    Angular Kickstart
    

    View Slide

71. 9. Directives
    von 0 auf 100
    Angular Kickstart
    

    View Slide

72. UI-related
    Re-usable
    Manipulate styling or behaviour of a DOM element
    Or: Manipulate DOM structure (not covered here)
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

73. Angular Kickstart
    von 0 auf 100
    Directives
    

    View Slide

74. Angular Kickstart
    von 0 auf 100
    HostBinding
    

    View Slide

75. Angular Kickstart
    von 0 auf 100
    HostListener
    

    View Slide

76. - Create a color directive
    - Create a click directive
    Angular Kickstart
    von 0 auf 100
    Directives LAB #6
    

    View Slide

77. 10. Dependency Injection
    von 0 auf 100
    Angular Kickstart
    

    View Slide

78. Motivation
    - Low Coupling, High Cohesion
    - In a unit test, a developer is not interested in arranging a test setup
    for a complete tax calculation or even performing it.
    - A developer might be interested in switching between different
    strategies (e.g. a different tax calculation for Germany and Austria)
    - Thus: A component should not arrange its dependencies on its own
    (Inversion of Control, IoC) but rely on an external party instead
    (dependency injection container/IoC container)
    Angular Kickstart
    von 0 auf 100
    Dependency Injection
    

    View Slide

79. Goal
    - DI container is aware of
    environment
    - Sets up dependencies
    accordingly
    - Low Coupling,
    High Cohesion
    Angular Kickstart
    von 0 auf 100
    Dependency Injection
    DI Container
    My
    Calculation
    Mock
    TaxCalc
    Germany
    TaxCalc
    ELSTER
    

    View Slide

80. Dependency Tree
    Angular Kickstart
    von 0 auf 100
    Angular DI
    RootInjector
    Module
    Component
    Module
    Component
    Module
    Component
    Component
    

    View Slide

81. Dependency Tree
    - Angular Dependency Injection is type-based
    - Only classes can be used as providers and injectables, as interfaces
    vanish during TypeScript transpilation
    - Alternative for non-class dependencies: InjectionTokens
    - Classes have to be marked as @Injectable() if they want to request
    dependencies
    - Dependencies can be requested by simply using them as a
    constructor parameter
    Angular Kickstart
    von 0 auf 100
    Angular DI
    

    View Slide

82. Self-Register as an Application-wide Singleton
    @Injectable({
    providedIn: 'root'
    })
    export class TaxCalculation {}
    Angular Kickstart
    von 0 auf 100
    Angular DI RootInjector
    Module
    Component
    Module
    Component
    Module
    Component
    Component
    

    View Slide

83. Providing Dependencies
    Angular Kickstart
    von 0 auf 100
    Angular DI RootInjector
    Module
    Component
    Module
    Component
    Module
    Component
    Component
    

    View Slide

84. Consuming Dependencies
    @Injectable()
    }
    Throws an error if dependency cannot be resolved!
    Angular Kickstart
    von 0 auf 100
    Angular DI
    

    View Slide

85. Consuming Dependencies
    @Injectable()
    }
    Angular Kickstart
    von 0 auf 100
    Angular DI
    

    View Slide

86. Sample
    ElementRef allows accessing the native rendering host element of the
    directive or component
    Retrieved via Dependency Injection
    constructor(elRef: ElementRef) {}
    Dependency Injection
    von 0 auf 100
    Angular Kickstart
    

    View Slide

87. Storing Dependencies
    Angular Kickstart
    von 0 auf 100
    Angular DI
    

    View Slide

88. Storing Dependencies
    }
    Useful TypeScript feature: Constructor parameter + access modifier
    automatically creates a field with the same name and type
    Angular Kickstart
    von 0 auf 100
    Angular DI
    

    View Slide

89. 11. Services
    von 0 auf 100
    Angular Kickstart
    

    View Slide

90. Not UI-related
    Re-usable
    Contain common (domain-specific) logic
    Contain infrastructure (non-domain-specific) code
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

91. Angular Kickstart
    von 0 auf 100
    Service
    

    View Slide

92. - Injecting ElementRef
    - Injection Tokens
    - Create a new service
    Dependency Injection/Services LAB #7
    von 0 auf 100
    Angular Kickstart
    

    View Slide

93. 12. Structural Directives
    von 0 auf 100
    Angular Kickstart
    

    View Slide

94. UI-related
    Re-usable
    Manipulate DOM structure
    UI-related
    components
    (BookModule)
    UI-related
    components
    (TodoModule)
    Logic/
    infrastructure
    components
    (BookModule)
    Logic/
    infrastructure
    components
    (TodoModule)
    von 0 auf 100
    Angular Kickstart
    

    View Slide

95. Conditionally Include Node in DOM
    Angular Kickstart
    von 0 auf 100
    *ngIf
    

    View Slide

96. Multiple conditions
    
    Angular Kickstart
    von 0 auf 100
    *ngSwitchCase
    

    View Slide

97. Repeat DOM Node
    Angular Kickstart
    von 0 auf 100
    *ngFor
    

    View Slide

98. Repeat DOM Node
    
    Wash my clothes
    Tidy up the room
    Mine bitcoin
    
    Angular Kickstart
    von 0 auf 100
    *ngFor
    [
    "Wash my clothes"
    "Tidy up the room"
    "Mine bitcoin"
    ]
    

    View Slide

99. - *ngIf
    - *ngFor
    Angular Kickstart
    von 0 auf 100
    *ngFor LAB #8
    

    View Slide

100. 13. Observables & RxJS
     von 0 auf 100
     Angular Kickstart
     

     View Slide

101. Motivation
     Obviously, not all use cases can be solved synchronously
     When we are using our to-do API, this will be an asynchronous task (due
     to network roundtrip)
     For a fast and fluid user experience, everything that could potentially
     take longer than 16ms (=> 60 fps) should be done asynchronously!
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

102. Motivation
     Callback Promise Observable
     Execution Eager Eager Lazy
     Values Multiple Single Multiple
     Cancelable No No* Yes
     Composable No Yes Yes
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

103. “Data over Time”
     https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018)
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

104. Reactive
     https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018)
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

105. Originally known as Reactive Extensions for .NET
     Open-Source
     Published for JavaScript, Java, …
     High-Level Flow Composition
     Provides an Observable implementation
     Provides operators (map, throttle, …)
     Angular Kickstart
     von 0 auf 100
     RxJS
     

     View Slide

106. Upgrade Synchronous Values to an Observable
     of(value) à Promise.resolve(value)
     throwError(err) à Promise.reject(err)
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

107. Subscribe
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

108. Unsubscribe
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

109. Future in Angular
     Angular Kickstart
     von 0 auf 100
     Observables
     Signals
     !
     

     View Slide

110. 14. HttpClient
     von 0 auf 100
     Angular Kickstart
     

     View Slide

111. Infrastructure service provided by Angular’s @angular/common/http
     package.
     Allows setting up HTTP Requests using a TypeScript-friendly interface:
     - get(url)
     - post(url, data)
     - put(url, data)
     - delete(url)
     Angular Kickstart
     von 0 auf 100
     HttpClient
     

     View Slide

112. Service API
     - Adjust service
     - Use HttpClient
     Observables LAB #9
     von 0 auf 100
     Angular Kickstart
     

     View Slide

113. 15. Lifecycle Hooks
     Angular Kickstart
     von 0 auf 100
     

     View Slide

114. - “Technical” lifecycle hook
     - Called on object construction
     - Assign fields synchronously
     - Called once
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

115. - Called when bound properties
     (Input/Output) change
     - Event parameters: SimpleChanges
     (contains previous and current
     values)
     - Purpose: React to changes of
     bound properties
     - Called repeatedly
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

116. - Called after constructor and first
     ngOnChanges call
     - Purpose: Launch asynchronous
     tasks/offload complex
     initialization from constructor
     - No parameters
     - Called once
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

117. - Called whenever change detection
     is executed (“check”)
     - Purpose: React to any change in
     general
     - No parameters
     - Called repeatedly
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

118. - Called after the content (i.e.
     components/directives and
     subcomponents/subdirectives)
     has been initialized
     - Purpose: Access directives in the
     component’s content
     - No parameters
     - Called once
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

119. - Called whenever change
     detection has been executed on
     the content
     - Purpose: React to any changes in
     the content
     - No parameters
     - Called repeatedly
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

120. - Called after the view (i.e.
     components/directives and
     subcomponents/subdirectives)
     has been initialized
     - Purpose: Access directives in the
     component’s view
     - No parameters
     - Called once
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

121. - Called whenever change
     detection has been executed on
     the view
     - Purpose: React to any changes in
     the view
     - No parameters
     - Called repeatedly
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

122. - Called before the
     component/directive is destroyed
     - Purpose: Clean-up (unsubscribe
     from observables, unregister from
     events, …)
     - No parameters
     - Called once
     Angular Kickstart
     von 0 auf 100
     Lifecycle Hooks 1. constructor
     2. ngOnChanges
     3. ngOnInit
     4. ngDoCheck
     5. ngAfterContentInit
     6. ngAfterContentChecked
     7. ngAfterViewInit
     8. ngAfterViewChecked
     9. ngOnDestroy
     

     View Slide

123. 16. Async Pipe
     von 0 auf 100
     Angular Kickstart
     

     View Slide

124. Unsubscribe
     Angular Kickstart
     von 0 auf 100
     Observables
     

     View Slide

125. Let Angular handle subscribing and unsubscribing for you!
     Makes handling observables as easy as handling synchronous values.
     Angular Kickstart
     von 0 auf 100
     Async Pipe
     

     View Slide

126. Step 1: Use Observable fields
     Angular Kickstart
     von 0 auf 100
     Async Pipe
     

     View Slide

127. Step 2: Adjust binding
     Angular Kickstart
     von 0 auf 100
     Async Pipe
     

     View Slide

128. - Using the async pipe
     Async Pipe LAB #10
     von 0 auf 100
     Angular Kickstart
     

     View Slide

129. 17. Routing
     von 0 auf 100
     Angular Kickstart
     

     View Slide

130. We want to map an application state to a certain URL
     Problem: There’s no server-side roundtrip
     So we need a different method to map app states to a URL
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

131. Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

132. Strategies
     PathLocationStrategy: Use HTML5-based history routing (default)
     https://localhost:4200/home/users/peter
     Note: Requires server-side rewriting!
     HashLocationStrategy: Use classic hash-based routing
     https://localhost:4200/#/home/users/peter
     Typically used for cross-platform builds (Electron, Cordova)
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

133. Root module
     Angular Kickstart
     von 0 auf 100
     Routing
     Optional,
     default: false
     

     View Slide

134. Child module
     @NgModule({
     declarations: [
     ],
     imports: [
     RouterModule.forChild([ /* Routes */ ])
     ],
     providers: []
     })
     export class OtherModule { }
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

135. Routes
     {
     path: 'home',
     component: HomeComponent
     }
     Maps a static path to a component
     http://localhost:4200/home --> HomeComponent
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

136. Routes with Parameters
     {
     path: 'todos/:id',
     component: DetailComponent
     }
     Route parameter matches any string
     http://localhost:4200/todos/123 --> DetailComponent
     http://localhost:4200/todos/abc --> DetailComponent
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

137. Route Redirects
     {
     path: '',
     pathMatch: 'full',
     redirectTo: 'home'
     }
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

138. Wildcard Route
     {
     path: '**',
     component: NotFoundComponent
     }
     The wildcard route matches everything and must be the last route.
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

139. RouterOutlet
     
     
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

140. Mind the route order
     Angular Kickstart
     von 0 auf 100
     Routing
     “new” matches :id
     this route never applies
     

     View Slide

141. Creating Links
     My link
     Problem: How to assign a dynamic route?
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

142. Creating Links
     My link
     Problem: How to switch between hash and path-based routing?
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

143. RouterLink
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

144. Advanced RouterLink
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

145. Accessing Route Parameters
     }
     Note: There’s also an activated route snapshot. This snapshot isn’t
     updated when a route parameter changes. Hence, you should avoid
     using the snapshot.
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

146. Accessing Route Parameters
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

147. Accessing Route Parameters
     - Generate components
     - Define routes
     - Router outlet
     - Router links
     - Active router links
     - Activated route
     Angular Kickstart
     von 0 auf 100
     Routing LAB #11
     

     View Slide

148. Programmatic Routing
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

149. Child Routes
     {
     path: 'todos',
     component: TodoComponent,
     children: [{
     path: '',
     component: TodoListComponent
     }, {
     path: ':id',
     component: TodoDetailComponent
     }]
     }
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

150. Child Routes
     {
     Angular Kickstart
     von 0 auf 100
     Routing
     app.component.ts
     
     todo.component.ts
     
     todo-list.component.ts
     http://localhost:4200/todos
     

     View Slide

151. Not Covered Here
     - Lazy Loading
     - Preloading Strategies
     - Aux Routes
     - Guards
     - Resolvers
     - Router Events
     Angular Kickstart
     von 0 auf 100
     Routing
     

     View Slide

152. 18. Template-Driven Forms
     von 0 auf 100
     Angular Kickstart
     

     View Slide

153. Module Import
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

154. Two-Way Binding
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

155. Two-Way Binding
     [ ] ( )
     Template-Driven Forms
     von 0 auf 100
     Angular Kickstart
     

     View Slide

156. Two-Way Binding
     [( )]
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

157. Field Definition
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

158. Validation
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

159. Validators
     - required
     - maxlength
     - minlength
     - min
     - max
     - pattern
     - email
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

160. Template Reference Variables
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

161. - Use a form
     - Validation
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms LAB #12
     

     View Slide

162. Form States
     State Opposite Description
     ng-touched ng-untouched Control had focus
     ng-dirty ng-pristine Control value was changed
     ng-valid ng-invalid Control value is valid
     ng-pending Async validation is pending
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

163. ngModelOptions
     Update bound value on submit
     [ngModelOptions]="{ updateOn: 'submit' }"
     Update bound value on change (default)
     [ngModelOptions]="{ updateOn: 'change' }"
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

164. ngFormOptions
     Default update method can also be set on form level:
     Angular Kickstart
     von 0 auf 100
     Template-Driven Forms
     

     View Slide

165. 19. Debugging
     von 0 auf 100
     Angular Kickstart
     

     View Slide

166. Angular Kickstart
     von 0 auf 100
     Chrome DevTools
     

     View Slide

167. ng.probe
     Angular Kickstart
     von 0 auf 100
     Debugging
     

     View Slide

168. Angular DevTools
     Chrome DevTools Extension
     https://angular.io/guide/devtools
     Angular Kickstart
     von 0 auf 100
     Debugging
     

     View Slide

169. Tour of Heroes
     https://angular.io/tutorial
     Bonus Material
     von 0 auf 100
     Angular Kickstart
     

     View Slide

170. Thank you
     for your kind attention.
     

     View Slide