Slide 1
Slide 1 text
Angular Kickstart
von 0 auf 100
Slide 2
Slide 2 text
Angular Kickstart
von 0 auf 100
Developer Consultant @ Thinktecture AG
Sascha Lehmann
@derLehmann_S
[email protected]
https://www.thinktecture.com/thinktects/sascha-lehmann/
Spezialisierung: Angular und UI/UX
Slide 3
Slide 3 text
Angular Kickstart
von 0 auf 100
Consultant @ Thinktecture AG
Christian Liebel
@christianliebel
[email protected]
https://www.thinktecture.com/thinktects/christian-liebel/
Spezialisierung: Angular, PWA, Cross-Platform
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Expectations
Angular Kickstart
von 0 auf 100
Slide 6
Slide 6 text
Questions: anytime!
Hands-on labs (everyone can participate)
https://bit.ly/ngdkick
Angular Kickstart
von 0 auf 100
Setup LAB #N
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
The next best todo list app!
Angular Kickstart
von 0 auf 100
Our Demo Use-Case
Slide 10
Slide 10 text
1. What is Angular?
von 0 auf 100
Angular Kickstart
Slide 11
Slide 11 text
SPA
Framework
Cross-
Platform
Platform-
agnostic
Open-
source
What is Angular?
von 0 auf 100
Angular Kickstart
Slide 12
Slide 12 text
Technical Basis
Angular Kickstart
von 0 auf 100
Angular
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
2. Why SPA?
von 0 auf 100
Angular Kickstart
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
3. Angular CLI
von 0 auf 100
Angular Kickstart
Slide 20
Slide 20 text
Features
Angular CLI
von 0 auf 100
Angular Kickstart
Slide 21
Slide 21 text
Features
Angular CLI
von 0 auf 100
Angular Kickstart
Slide 22
Slide 22 text
Features
Angular CLI
von 0 auf 100
Angular Kickstart
Slide 23
Slide 23 text
Features
Angular CLI
von 0 auf 100
Angular Kickstart
Slide 24
Slide 24 text
Features
Angular CLI
von 0 auf 100
Angular Kickstart
Slide 25
Slide 25 text
Angular Kickstart
von 0 auf 100
Let’s try out StackBlitz LAB #0
Slide 26
Slide 26 text
4. Modules
von 0 auf 100
Angular Kickstart
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Modules
Components Directives Pipes
Modules
Services
von 0 auf 100
Angular Kickstart
Slide 30
Slide 30 text
Dependency Tree
AppModule
TodoModule
CommonModule
BookModule
CommonModule
TicketModule
ShopModule
EditorModule
Modules
von 0 auf 100
Angular Kickstart
Slide 31
Slide 31 text
For the future
Modules
von 0 auf 100
Angular Kickstart
Standalone
Components
Directives Pipes
!
Slide 32
Slide 32 text
5. Bindings
von 0 auf 100
Angular Kickstart
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
btnCalc
lblVal
von 0 auf 100
Angular Kickstart
Slide 35
Slide 35 text
{{
Moustache Syntax
von 0 auf 100
Angular Kickstart
Slide 36
Slide 36 text
Handlebars
von 0 auf 100
Angular Kickstart
Slide 37
Slide 37 text
Interpolation
Component view (HTML)
{{ value }}
Component logic (TS)
@Component(/* … */)
export class AppComponent {
public value = 'Hello';
}
Bindings
von 0 auf 100
Angular Kickstart
Slide 38
Slide 38 text
Interpolation
Component view (HTML)
{{ value }}
Component logic (TS)
@Component(/* … */)
export class AppComponent {
public value = 'Hello';
}
Bindings
von 0 auf 100
Angular Kickstart
Slide 39
Slide 39 text
[ ] ( )
More Bindings
von 0 auf 100
Angular Kickstart
Slide 40
Slide 40 text
Pass data in
Bind to a certain property of a DOM node or
component/directive
Property Binding
[ ]
von 0 auf 100
Angular Kickstart
Slide 41
Slide 41 text
More options
Angular Kickstart
von 0 auf 100
Property Bindings
Slide 42
Slide 42 text
Get data out
Bind to a certain event of a DOM node or
component/directive
Event Binding
( )
von 0 auf 100
Angular Kickstart
Slide 43
Slide 43 text
Event Binding
von 0 auf 100
Angular Kickstart
Slide 44
Slide 44 text
- Interpolations
- Property Bindings
- Event Bindings
Angular Kickstart
von 0 auf 100
Bindings LAB #1
Slide 45
Slide 45 text
Magic value: $event
Contains the event arguments
Event Binding
( )
von 0 auf 100
Angular Kickstart
Slide 46
Slide 46 text
Event Binding LAB #2
von 0 auf 100
Angular Kickstart
Slide 47
Slide 47 text
6. Pipes
von 0 auf 100
Angular Kickstart
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
Principle
Pipes
Value Pipe Transformed Value
von 0 auf 100
Angular Kickstart
Slide 50
Slide 50 text
Principle
Pipes
Hello UppercasePipe HELLO
von 0 auf 100
Angular Kickstart
Slide 51
Slide 51 text
Built-in Pipes
• uppercase
• lowercase
• date
• number
• percent
• currency
• json
Pipes
von 0 auf 100
Angular Kickstart
Slide 52
Slide 52 text
Parameters
Pipes can also have parameters delimited by a colon
Pipes
von 0 auf 100
Angular Kickstart
Slide 53
Slide 53 text
Built-in Pipes
Pipes
von 0 auf 100
Angular Kickstart
Slide 54
Slide 54 text
Custom Pipes
Pipes
von 0 auf 100
Angular Kickstart
Slide 55
Slide 55 text
- Interpolation
- Built-in pipes
- Create a new pipe
Angular Kickstart
von 0 auf 100
Pipes LAB #3
Slide 56
Slide 56 text
7. Components
von 0 auf 100
Angular Kickstart
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
Principle
Components
Input 1
Component
Output A
Input 2 Output B
Input 1
Component
von 0 auf 100
Angular Kickstart
Slide 59
Slide 59 text
Components
von 0 auf 100
Angular Kickstart
Slide 60
Slide 60 text
Usage
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class AppComponent {
}
Components
von 0 auf 100
Angular Kickstart
Slide 61
Slide 61 text
- Create a new component
- Use the new component in your AppComponent’s template
Components LAB #4
von 0 auf 100
Angular Kickstart
Slide 62
Slide 62 text
8. Input/Output
von 0 auf 100
Angular Kickstart
Slide 63
Slide 63 text
Bindings for component state/events
[ ] ( )
Input/Output
von 0 auf 100
Angular Kickstart
Slide 64
Slide 64 text
We want to pass arbitrary data to components:
Input
von 0 auf 100
Angular Kickstart
Slide 65
Slide 65 text
Component Perspective
Input
von 0 auf 100
Angular Kickstart
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
We want to get informed about custom events:
Output
von 0 auf 100
Angular Kickstart
Slide 69
Slide 69 text
Component Perspective
Output
von 0 auf 100
Angular Kickstart
Slide 70
Slide 70 text
- Input
- Output
Input/Output LAB #5
von 0 auf 100
Angular Kickstart
Slide 71
Slide 71 text
9. Directives
von 0 auf 100
Angular Kickstart
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
Angular Kickstart
von 0 auf 100
Directives
Slide 74
Slide 74 text
Angular Kickstart
von 0 auf 100
HostBinding
Slide 75
Slide 75 text
Angular Kickstart
von 0 auf 100
HostListener
Slide 76
Slide 76 text
- Create a color directive
- Create a click directive
Angular Kickstart
von 0 auf 100
Directives LAB #6
Slide 77
Slide 77 text
10. Dependency Injection
von 0 auf 100
Angular Kickstart
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
Dependency Tree
Angular Kickstart
von 0 auf 100
Angular DI
RootInjector
Module
Component
Module
Component
Module
Component
Component
Slide 81
Slide 81 text
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
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
Providing Dependencies
Angular Kickstart
von 0 auf 100
Angular DI RootInjector
Module
Component
Module
Component
Module
Component
Component
Slide 84
Slide 84 text
Consuming Dependencies
@Injectable()
}
Throws an error if dependency cannot be resolved!
Angular Kickstart
von 0 auf 100
Angular DI
Slide 85
Slide 85 text
Consuming Dependencies
@Injectable()
}
Angular Kickstart
von 0 auf 100
Angular DI
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
Storing Dependencies
Angular Kickstart
von 0 auf 100
Angular DI
Slide 88
Slide 88 text
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
Slide 89
Slide 89 text
11. Services
von 0 auf 100
Angular Kickstart
Slide 90
Slide 90 text
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
Slide 91
Slide 91 text
Angular Kickstart
von 0 auf 100
Service
Slide 92
Slide 92 text
- Injecting ElementRef
- Injection Tokens
- Create a new service
Dependency Injection/Services LAB #7
von 0 auf 100
Angular Kickstart
Slide 93
Slide 93 text
12. Structural Directives
von 0 auf 100
Angular Kickstart
Slide 94
Slide 94 text
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
Slide 95
Slide 95 text
Conditionally Include Node in DOM
Angular Kickstart
von 0 auf 100
*ngIf
Slide 96
Slide 96 text
Multiple conditions
Angular Kickstart
von 0 auf 100
*ngSwitchCase
Slide 97
Slide 97 text
Repeat DOM Node
Angular Kickstart
von 0 auf 100
*ngFor
Slide 98
Slide 98 text
Repeat DOM Node
- Wash my clothes
- Tidy up the room
- Mine bitcoin
Slide 99
Slide 99 text
- *ngIf
- *ngFor
Angular Kickstart
von 0 auf 100
*ngFor LAB #8
Slide 100
Slide 100 text
13. Observables & RxJS
von 0 auf 100
Angular Kickstart
Slide 101
Slide 101 text
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
Slide 102
Slide 102 text
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
Slide 103
Slide 103 text
“Data over Time”
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018)
Angular Kickstart
von 0 auf 100
Observables
Slide 104
Slide 104 text
Reactive
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018)
Angular Kickstart
von 0 auf 100
Observables
Slide 105
Slide 105 text
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
Slide 106
Slide 106 text
Upgrade Synchronous Values to an Observable
of(value) à Promise.resolve(value)
throwError(err) à Promise.reject(err)
Angular Kickstart
von 0 auf 100
Observables
Slide 107
Slide 107 text
Subscribe
Angular Kickstart
von 0 auf 100
Observables
Slide 108
Slide 108 text
Unsubscribe
Angular Kickstart
von 0 auf 100
Observables
Slide 109
Slide 109 text
Future in Angular
Angular Kickstart
von 0 auf 100
Observables
Signals
!
Slide 110
Slide 110 text
14. HttpClient
von 0 auf 100
Angular Kickstart
Slide 111
Slide 111 text
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
Slide 112
Slide 112 text
Service API
- Adjust service
- Use HttpClient
Observables LAB #9
von 0 auf 100
Angular Kickstart
Slide 113
Slide 113 text
15. Lifecycle Hooks
Angular Kickstart
von 0 auf 100
Slide 114
Slide 114 text
- “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
Slide 115
Slide 115 text
- 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
Slide 116
Slide 116 text
- 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
Slide 117
Slide 117 text
- 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
Slide 118
Slide 118 text
- 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
Slide 119
Slide 119 text
- 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
Slide 120
Slide 120 text
- 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
Slide 121
Slide 121 text
- 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
Slide 122
Slide 122 text
- 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
Slide 123
Slide 123 text
16. Async Pipe
von 0 auf 100
Angular Kickstart
Slide 124
Slide 124 text
Unsubscribe
Angular Kickstart
von 0 auf 100
Observables
Slide 125
Slide 125 text
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
Slide 126
Slide 126 text
Step 1: Use Observable fields
Angular Kickstart
von 0 auf 100
Async Pipe
Slide 127
Slide 127 text
Step 2: Adjust binding
Angular Kickstart
von 0 auf 100
Async Pipe
Slide 128
Slide 128 text
- Using the async pipe
Async Pipe LAB #10
von 0 auf 100
Angular Kickstart
Slide 129
Slide 129 text
17. Routing
von 0 auf 100
Angular Kickstart
Slide 130
Slide 130 text
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
Slide 131
Slide 131 text
Angular Kickstart
von 0 auf 100
Routing
Slide 132
Slide 132 text
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
Slide 133
Slide 133 text
Root module
Angular Kickstart
von 0 auf 100
Routing
Optional,
default: false
Slide 134
Slide 134 text
Child module
@NgModule({
declarations: [
],
imports: [
RouterModule.forChild([ /* Routes */ ])
],
providers: []
})
export class OtherModule { }
Angular Kickstart
von 0 auf 100
Routing
Slide 135
Slide 135 text
Routes
{
path: 'home',
component: HomeComponent
}
Maps a static path to a component
http://localhost:4200/home --> HomeComponent
Angular Kickstart
von 0 auf 100
Routing
Slide 136
Slide 136 text
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
Slide 137
Slide 137 text
Route Redirects
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
}
Angular Kickstart
von 0 auf 100
Routing
Slide 138
Slide 138 text
Wildcard Route
{
path: '**',
component: NotFoundComponent
}
The wildcard route matches everything and must be the last route.
Angular Kickstart
von 0 auf 100
Routing
Slide 139
Slide 139 text
RouterOutlet
Angular Kickstart
von 0 auf 100
Routing
Slide 140
Slide 140 text
Mind the route order
Angular Kickstart
von 0 auf 100
Routing
“new” matches :id
this route never applies
Slide 141
Slide 141 text
Creating Links
My link
Problem: How to assign a dynamic route?
Angular Kickstart
von 0 auf 100
Routing
Slide 143
Slide 143 text
RouterLink
Angular Kickstart
von 0 auf 100
Routing
Slide 144
Slide 144 text
Advanced RouterLink
Angular Kickstart
von 0 auf 100
Routing
Slide 145
Slide 145 text
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
Slide 146
Slide 146 text
Accessing Route Parameters
Angular Kickstart
von 0 auf 100
Routing
Slide 147
Slide 147 text
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
Slide 148
Slide 148 text
Programmatic Routing
Angular Kickstart
von 0 auf 100
Routing
Slide 149
Slide 149 text
Child Routes
{
path: 'todos',
component: TodoComponent,
children: [{
path: '',
component: TodoListComponent
}, {
path: ':id',
component: TodoDetailComponent
}]
}
Angular Kickstart
von 0 auf 100
Routing
Slide 150
Slide 150 text
Child Routes
{
Angular Kickstart
von 0 auf 100
Routing
app.component.ts
todo.component.ts
todo-list.component.ts
http://localhost:4200/todos
Slide 151
Slide 151 text
Not Covered Here
- Lazy Loading
- Preloading Strategies
- Aux Routes
- Guards
- Resolvers
- Router Events
Angular Kickstart
von 0 auf 100
Routing
Slide 152
Slide 152 text
18. Template-Driven Forms
von 0 auf 100
Angular Kickstart
Slide 153
Slide 153 text
Module Import
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 154
Slide 154 text
Two-Way Binding
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 155
Slide 155 text
Two-Way Binding
[ ] ( )
Template-Driven Forms
von 0 auf 100
Angular Kickstart
Slide 156
Slide 156 text
Two-Way Binding
[( )]
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 157
Slide 157 text
Field Definition
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 158
Slide 158 text
Validation
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 159
Slide 159 text
Validators
- required
- maxlength
- minlength
- min
- max
- pattern
- email
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 160
Slide 160 text
Template Reference Variables
Angular Kickstart
von 0 auf 100
Template-Driven Forms
Slide 161
Slide 161 text
- Use a form
- Validation
Angular Kickstart
von 0 auf 100
Template-Driven Forms LAB #12
Slide 162
Slide 162 text
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
Slide 163
Slide 163 text
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
Slide 164
Slide 164 text
ngFormOptions
Default update method can also be set on form level:
Slide 165
Slide 165 text
19. Debugging
von 0 auf 100
Angular Kickstart
Slide 166
Slide 166 text
Angular Kickstart
von 0 auf 100
Chrome DevTools
Slide 167
Slide 167 text
ng.probe
Angular Kickstart
von 0 auf 100
Debugging
Slide 168
Slide 168 text
Angular DevTools
Chrome DevTools Extension
https://angular.io/guide/devtools
Angular Kickstart
von 0 auf 100
Debugging
Slide 169
Slide 169 text
Tour of Heroes
https://angular.io/tutorial
Bonus Material
von 0 auf 100
Angular Kickstart
Slide 170
Slide 170 text
Thank you
for your kind attention.