Angular Solid Foundations

Angular Solid Foundations Markus Ende & Gregor Woiwode

@GregOnNet Hello @_der_markusende

Schedule From: Now Until: 17:00 (17:30 max) ☕ 11:00 Coffee
Break 13:00 Lunch Break ☕ 16:00 Coffee Break

What is Angular?

SPA Framework Angular is a Web Framework for SPAs SPA:
Single Page Application Framework: ”reusable set of libraries or classes for a software system or subsystem” “provides a standard way to build and deploy applications.” https://en.wikipedia.org/wiki/Software_framework

History Angular v0.9.0 2010 v1.7.0 2018 v1.7.x LTS until 2021
v1.6.0 2016 complete rewrite v2.0.0 2016 v4.0.0 2016 v3 skipped v8.0.0 2019

Overview cli router i18n animations pwa components (formerly known as
material) testing forms core … and more! http

Release Cycle https://angular.io/guide/releases In general, you can expect the following
release cycle: • A major release every 6 months • 1-3 minor releases for each major release • A patch release almost every week

Mission Apps that users ♥ to use Apps that developers
♥ to build Community where everyone feels welcome

Community And all over the https://angular.io/events

Angular@Google Firebase Google Cloud Platform Google Express Google Analytics +600
more …

Hands on Meet Angular http://bit.do/ngde19-sf-tasks

‍ Hands on npm start -- --open opens your browser
Meet Angular

automatic application reload

Components

Think in small building blocks Toggle All Prepare Workshop Hold
the Workshop ToDo App

Group wisely Toggle All Prepare Workshop Hold the Workshop ToDo
App

Think in features Toggle All Prepare Workshop Hold the Workshop
ToDo App

What is a Component? Toggle All Prepare Workshop Hold the
Workshop ToDo App Representation & Interaction ⚡

What is a Component? Template & Styling

What is a Component? Interaction

app.component.ts Component Declaration import { Component } from '@angular/core'; @Component({
selector: 'nde-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Your'; }

Component Declaration app.component.ts index.html import { Component } from '@angular/core';
@Component({ selector: 'nde-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Your'; } <body> <nde-root></nde-root> </body> Look, an Angular Component In the wild.

app.component.ts Component Declaration import { Component } from '@angular/core'; @Component({
selector: 'nde-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Your'; }

app.component.ts app.component.html Bind component-values <span> {{ title }} app is
running! </span> /* imports */ @Component(/* … */) export class AppComponent { title = 'Your'; } It’s a match!

app.component.ts app.component.html Bind component-values <span> {{ title }} app is
running! </span> /* imports */ @Component(/* … */) export class AppComponent { title = 'Your'; } Bind values of a component with double curly braces to the template.

http://bit.do/ngde19-sf-tasks Hands on Enhance AppComponent

Beyond AppComponent AppComponent We are here! index.html <body> <nde-root></nde-root> </body>

Beyond AppComponent AppComponent TodoCheckerComponent Next! app.component.html <nde-todo-checker></nde-todo-checker>

Beyond AppComponent AppComponent TodosComponent TodoCheckerComponent Finally! TodoCheckerComponent TodoCheckerComponent

Beyond AppComponent child of A component can have one child...

Beyond AppComponent child of child of child of child of
… A component can have multiple children.

Beyond AppComponent You build a Component tree .

Hands on Create your 1st component http://bit.do/ngde19-sf-tasks

todo-checker.component.ts todo-checker.component.html Property-Binding {{ todo.text }} <input type="checkbox" [checked]="todo.isDone" />
@Component(/* … */) export class TodoCheckerComponent { todo = { text: 'Buy ', isDone: true }; }

todo-checker.component.ts todo-checker.component.html Event-Binding {{ todo.text }} <input type="checkbox" [checked]="todo.isDone" (change)="emitToggle()"
/> @Component(/* … */) export class TodoCheckerComponent { // todo = ... emitToggle() { alert( `${this.todo.text} clicked.` ); } When change is fired emitToggle gets executed.

Hands on Simple bindings http://bit.do/ngde19-sf-tasks

Beyond AppComponent AppComponent TodoCheckerComponent app.component.html <nde-todo-checker></nde-todo-checker>

app.component.html Feed your component with some data AppComponent <nde-todo-checker [todo]="someTodo"
></nde-todo-checker> @Input Define your own property binding. TodoCheckerComponent

todo-checker.component.ts Accept data through @Input todo-checker.component.ts todo-checker.component.html import { Input
} from '@angular/core'; @Component(/* … */) export class TodoCheckerComponent { // <nde-todo-checker [todo]=""> @Input() todo; // ... {{ todo.text }} <input type="checkbox" [checked]="todo.isDone" (change)="emitToggle()" />

React to events of a child component AppComponent TodoComponent app.component.html
<nde-todo [todo]="someTodo" (toggle)="doSomething()" ></nde-todo> @Output Create your own event binding.

Emit custom events using @Output todo-checker.component.ts import { Output, EventEmitter
} from '@angular/core'; @Component(/* … */) export class TodoCheckerComponent { // … // <nde-todo-checker (toggle)=""> @Output() toggle = new EventEmitter(); emitToggle() { this.toggle.emit(this.todo); } }

app.component.ts React to events of a child component AppComponent TodoComponent
app.component.html <nde-todo [todo]="someTodo" (toggle)="notify($event)" ></nde-todo> @Output notify(todo): void { alert(`${todo.text} clicked.`); } $event transports the todo.

Hands on Dataﬂow http://bit.do/ngde19-sf-tasks

Handle collections with *ngFor

Render components with *ngFor todo-checker.component.ts @Component({ /* … */ })
export class TodoCheckerComponent { todos = [ { text: 'Buy ', isDone: true }, { text: 'Plant ', isDone: false } ]; } todo-checker.component.html <nde-todo-checker [todo]="todos[0]"> </nde-todo-checker> <nde-todo-checker [todo]="todos[1]"> </nde-todo-checker> Imagine you need to render a collection of data.

todo-checker.component.html Render components with *ngFor <nde-todo-checker [todo]="todo" *ngFor="let todo of
todos" ></nde-todo-checker> todo-checker.component.ts @Component({ /* … */ }) export class TodoCheckerComponent { todos = [ { text: 'Buy ', isDone: true }, { text: 'Plant ', isDone: false } ]; } Use the built-in directive *ngFor rendering a collection of data.

todo-checker.component.html Render components with *ngFor <nde-todo-checker [todo]="todo" *ngFor="let todo of
todos" ></nde-todo-checker> todo-checker.component.ts @Component({ /* … */ }) export class TodoCheckerComponent { todos = [ { text: 'Buy ', isDone: true }, { text: 'Plant ', isDone: false } ]; }

http://bit.do/ngde19-sf-tasks Hands on Multiply your components

TypeScript Interfaces

Secure your coding with types app.component.ts notify(todo) { alert(`${todo.text} clicked.`);
} No information about the passed parameter.

Secure your coding with types app.component.ts notify(todo): void { alert(`${todo.txt}
clicked.`); } ⚠ produces error at runtime hard to identify at development-time

todo.ts Introducing the Interface export interface Todo { text: string;
isDone: boolean; } A blueprint for your type

todo-checker.component.ts Using an Interface import { Todo } from '../models';
@Component(/* … */) export class TodoCheckerComponent { @Input() todo: Todo; @Output() toggle = new EventEmitter<Todo>(); // ... }

Autocompletion for

Autocompletion for You need to have -Language-Service installed.

http://bit.do/ngde19-sf-tasks Hands on Secure your coding with types

Template Reference Variables

Interact with template elements Template <input type="text" class="fancy-class" placeholder="Type something
in" /> What if you need to - … read attribute values? - … change attribute values?

Simple HTML-Element Interaction Template <input #myInput /> Define a template
reference by using the #-sign + a freely chosen name.

Simple HTML-Element Interaction Template <input #myInput (change)="doSomething(myInput)" /> Pass the
template reference to your component by using your freely chosen name without #.

Simple HTML-Element Interaction Component Template <input #myInput (change)="doSomething(myInput)" /> @Component(/*
… */) export class MyComponent { doSomething( myInput: HTMLInputElement ) { // ... myInput.value = ''; } }

Simple HTML-Element Interaction Component Template <input #myInput (change)="doSomething(myInput)" /> @Component(/*
… */) export class MyComponent { doSomething( myInput: HTMLInputElement ) { } } Please don’t miss the type annotation giving you ‍♀ more safety while you are coding,.

http://bit.do/ngde19-sf-tasks Hands on Create your 1st form

Modules

Think in Features Angular applications are organized in features. Features
are bundled in modules.

Think in Modules Basic bricks Module Images from wikimedia commons
by Semevent from Pixabay by brickresort from ﬂickr (CC BY-ND 2.0) by wiredforlego from ﬂickr (CC BY-SA 2.0) Lego city Module Car Module Figures Module

2 Diﬀerent Types of Modules TypeScript (or JavaScript) Module Abstraction
level: ﬁles Angular Module (NgModule) Abstraction level: app aspects VS

TypeScript Modules main.ts Organize source code in different ﬁles: import
{MyClass} from ’../sub-folder/my-class.ts’; import {LibClass} from ’@npmscope/external-lib’; my-class.ts export class MyClass {}; lib.js export class LibClass {}; own source folder node_modules

Angular Modules Organize aspects (or features) of an Angular app:
HttpClientModule interaction with APIs AppModule the app SharedModule Reusable components LoginModule Login services and ui TodosModule Todo list own modules built-in modules

todos.module.ts Module Declaration import { NgModule } from '@angular/core'; @NgModule({
declarations: [ TodosComponent, TodoCheckerComponent, // ... ] exports: [ TodosComponent ] }) export class TodosModule { } Use @NgModule directive

todos.module.ts Module Declaration import { NgModule } from '@angular/core'; @NgModule({
declarations: [ TodosComponent, TodoCheckerComponent, // ... ] exports: [ TodosComponent ] }) export class TodosModule { } Declare all internal components Use @NgModule directive

Module Declaration Declare externally usable components Declare all internal components
Use @NgModule directive todos.module.ts import { NgModule } from '@angular/core'; @NgModule({ declarations: [ TodosComponent, TodoCheckerComponent, // ... ] exports: [ TodosComponent ] }) export class TodosModule { }

Module Declaration app.module.ts @NgModule({ declarations: [ // ... ] imports:
[ TodosModule ] }) export class AppModule { } Import other modules to use exported components todos.module.ts import { NgModule } from '@angular/core'; @NgModule({ declarations: [ TodosComponent, TodoCheckerComponent, // ... ] exports: [ TodosComponent ] }) export class TodosModule { }

Beyond AppComponent AppComponent TodosComponent TodoCheckerComponent Now! TodoCheckerComponent TodoCheckerComponent Todos Feature
/ Module

http://bit.do/ngde19-sf-tasks Hands on Extract a feature module

Services

Business Logic Component @Component(/* … */) export class MyFirstComponent {
doBusinessLogic() { // step 1 // step 2 // step 3 // ... } } Component @Component(/* … */) export class MySecondComponent { doBusinessLogic() { // step 1 // step 2 // step 3 // ... } } Don’t repeat yourself (DRY)!

Extract Service Class Component @Component(/* … */) export class MyFirstComponent
{ private service = new MyService(); doBusinessLogic() { this.service.doBusinessLogic() } } Service Class export class MyService { doBusinessLogic() { // step 1 // step 2 // step 3 // ... } } Code can be reused

Extract Service Class Component @Component(/* … */) export class MyFirstComponent
{ private service = new MyService(); doBusinessLogic() { this.service.doBusinessLogic() } } Service Class export class MyService { doBusinessLogic() { // step 1 // step 2 // step 3 // ... } } But the component creates the Service. Should not be its responsibility!

Angular provides Dependency Injection functionality. ⚙ We deﬁne the service
and where to use it. Angular controls the instantiation of it. ➡ Inversion of control pattern Dependency Injection

todos.service.ts Injectable Service Declaration import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class TodosService { } Define class to be injectable

todos.service.ts Injectable Service Declaration import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class TodosService { } Define class to be injectable globally*) *) There are other possibilities https://www.youtube.com/watch?v=begyTCrjj1g

Use Injectable Services Component @Component(/* … */) export class MyFirstComponent
{ private service: MyService; constructor(service: MyService) { this.service = service; } doBusinessLogic() { this.service.doBusinessLogic() } } Injectable Service @Injectable({ providedIn: 'root' }) export class MyService { doBusinessLogic() { // ... } } Constructor Injection by type

TypeScript’s parameter properties Component @Component(/* … */) export class MyFirstComponent
{ private service: MyService; constructor(service: MyService) { this.service = service; } // ... } Component @Component(/* … */) export class MyFirstComponent { constructor( private service: MyService ) { } // ... } Syntactic sugar with equivalent meaning! Also possible with: - public - protected - readonly

Component Service doing initialization work @Component(/* … */) export class
NewlyGeneratedComponent implements OnInit { constructor() { } ngOnInit() { } } Ever wondered about the generated ngOnInit() method? It is a life-cycle hook that gets called When component is ready for rendering!

Component Service doing initialization work @Component(/* … */) export class
NewlyGeneratedComponent implements OnInit { data: Data[]; constructor(private service: MyService) { } ngOnInit() { this.data = this.service.getData(); } } Use ngOnInit() for initialization work!

http://bit.do/ngde19-sf-tasks Hands on Create your 1st service

Communicate with HTTP APIs

CRUD operations via HTTP HTTP Create Read Update Delete

Plug & Play | Setting up HTTP AppComponent TodosComponent HttpClientModule
TodosModule AppModule imports HttpClient

Register of HttpClientModule import { HttpClientModule } from '@angular/common/http'; //
... @NgModule({ imports: [ CommonModule, HttpClientModule ], //... }) export class TodosModule {}

http://bit.do/ngde19-sf-tasks Hands on Set up Http

HttpClient API of HttpClient class HttpClient { get (/* various
overloads */) {} post (/* various overloads */) {} put (/* various overloads */) {} delete (/* various overloads */) {} options (/* various overloads */) {} head (/* various overloads */) {} patch (/* various overloads */) {} jsonp (/* various overloads */) {} request (/* various overloads */) {} }

HttpClient API of HttpClient class HttpClient { get<T> (/* various
overloads */) {} post<T> (/* various overloads */) {} put<T> (/* various overloads */) {} delete<T> (/* various overloads */) {} } <T> represents the shape of data you receive from your API.

HttpClient API of HttpClient class HttpClient { get<T> (/* various
overloads */): Observable<T> {} post<T> (/* various overloads */): Observable<T> {} put<T> (/* various overloads */): Observable<T> {} delete<T> (/* various overloads */): Observable<T> {} } The data structure supporting you handling asynchronous operations.

Http GET API Demonstration httpClient.get<SomeData>('api.com/data') .subscribe(data => /* do something
*/); An Observable provides the subscribe-method. Once the request is complete you can process the loaded data.

Observable The callbacks of subscribe class Observable<T> { subscribe( (value:
T) => {}, (error: any) => {}, () => {}, ) // ... // see https://rxjs.dev/api/index/class/Observable for more details }

API Demo Understanding subscribe HTTP Response subscribe( (value: T) =>
{}, (error: any) => {}, () => {}, )

API Demo Understanding subscribe HTTP Error subscribe( (value: T) =>
{}, (error: any) => {}, () => {}, )

API Demo Understanding subscribe HTTP Response subscribe( (value: T) =>
{}, (error: any) => {}, () => { /* complete */ }, )

API Demo Lifecycle of a successful request subscribe send request
receive response ⏱ next complete subscribe( (value: T) => {}, (error: any) => {}, () => {}, )

API Demo Lifecycle of a failing request subscribe send request
error ⏱ subscribe( (value: T) => {}, (error: any) => {}, () => {}, )

Component Inject of HttpClient @Injectable({ providedIn: 'root' }) export class
TodosService { constructor( private http: HttpClient ) {} query(): Observable<Todo[]> { return this.http.get<Todo[]>( 'api.com/data' ); } } HttpClient is provided by HttpClientModule

Component Use of HttpClient @Injectable({ providedIn: 'root' }) export class
TodosService { constructor( private http: HttpClient ) {} query(): Observable<Todo[]> { return this.http.get<Todo[]>( 'api.com/data' ); } } Please note that an Observable is returned. You want to avoid subscribe in the service.

todos.service.ts todos.component.ts Put everything together @Injectable({ providedIn: 'root' }) export
class TodosService { constructor( private http: HttpClient ) {} query(): Observable<Todo[]> { return this.http.get<Todo[]>( 'api.com/data' ); } } @Component({ /* ... */ }) export class TodosComponent implements OnInit { todos: Todo[] = []; constructor( private service: TodosService) {} ngOnInit(): void { this.service.query().subscribe( todos => this.todos = todos ); } } inject

class TodosService { constructor( private http: HttpClient ) {} query(): Observable<Todo[]> { return this.http.get<Todo[]>( 'api.com/data' ); } } @Component({ /* ... */ }) export class TodosComponent implements OnInit { // ... constructor( private service: TodosService) {} ngOnInit(): void { this.service.query().subscribe( todos => this.todos = todos ); } } Subscribe to the Observable.

class TodosService { constructor( private http: HttpClient ) {} query(): Observable<Todo[]> { return this.http.get<Todo[]>( 'api.com/data' ); } } @Component({ /* ... */ }) export class TodosComponent implements OnInit { todos: Todo[] = []; // ... ngOnInit(): void { this.service.query().subscribe( todos => this.todos = todos ); } } Assign todos

http://bit.do/ngde19-sf-tasks Hands on Load todos from API

Observables are part of the RxJS framework.

Learn RxJS and you can master every Angular module.

Checkout http:/ /bit.do/ngde19-rxjs to learn more about RxJS operators.

RxJS’ Impact on Angular Http Forms Animations Routing State Management

Http POST API Demonstration httpClient.post<SomeData>('api.com/data', body) .subscribe(data => /* do
something */); A post-Request expects a 2nd parameter containing the body that should be passed to the API.

Http Put API Demonstration httpClient.put<SomeData>('api.com/data', body) .subscribe(data => /* do
something */); A put-Request expects a 2nd parameter containing the body that should be passed to the API.

http://bit.do/ngde19-sf-tasks Hands on Persist new todos

… After creating a todo ⚡ click DB Saves todo
to database ⚠ List is out of sync

… After creating a todo Automatically reload todos after todo
creation HTTP 201 CREATED POST GET 200 OK switch

todos.component.ts Hook into the stream createTodo(newTodo: Todo) { this.todosService .create(newTodo)
.pipe(/* do something with the resonse */) .subscribe(todos => (this.todos = todos)) }

todos.component.ts Switching from one Request to another import { switchMap
} from 'rxjs/operators'; createTodo(newTodo: Todo) { this.todosService .create(newTodo) .pipe(switchMap(() => this.todosService.query())) .subscribe(todos => (this.todos = todos)) }

http://bit.do/ngde19-sf-tasks Hands on Auto refresh todos

One last thing about subscribe subscribe next complete ... An
Observable represents a stream. ☝ We are lucky that Http completes the stream automatically.

One last thing about subscribe … Lots of streams do
not complete automatically. (e.g. WebSockets, Store, ...) ☝ We need to unsubscribe from each stream to avoid Memory Leaks. subscribe complete next

Unsubscribe from an Observable todo-checker.component.ts import { Subscription } from
'rxjs'; @Component({ /* ... */}) export class TodosComponent implements OnInit { private createTodoSubscription = new Subscription(); // ... } A save place storing subscriptions.

Unsubscribe from an Observable todo-checker.component.ts @Component({ /* ... */}) export
class TodosComponent implements OnInit { private createTodoSubscription = new Subscription(); // ... addTodo(newTodo: Todo) { this.createTodoSubscription = this.todosService .create(newTodo) .pipe(switchMap(() => this.todosService.query())) .subscribe(todos => (this.todos = todos)); } } Saving a subscription

class TodosComponent implements OnInit, OnDestroy { private createTodoSubscription = new Subscription(); // ... ngOnDestroy(): void { this.createTodoSubscription.unsubscribe(); } } Unsubscribe from the stream once component gets destroyed.

class TodosComponent implements OnInit { private loadTodosSubscription = new Subscription(); private createTodoSubscription = new Subscription(); // ... ngOnInit(): void { this.loadTodosSubscription = ... } addTodo(newTodo: Todo) { this.createTodoSubscription = ... } } Does not scale that well For multiple subscriptions...

class TodosComponent implements OnInit, OnDestroy { private loadTodosSubscription = new Subscription(); private createTodoSubscription = new Subscription(); // ... ngOnDestroy(): void { this.loadTodosSubscription.unsubscribe(); this.createTodoSubscription.unsubscribe(); } } Multiple code parts need to be touched for a single subscription.

Use one Subscription collecting all streams todo-checker.component.ts @Component({ /* ...
*/}) export class TodosComponent implements OnInit { private sink = new Subscription(); // ... addTodo(newTodo: Todo) { this.sink.add(this.todosService .create(newTodo) .pipe(switchMap(() => this.todosService.query())) .subscribe(todos => (this.todos = todos)); ); } }

class TodosComponent implements OnInit { private sink = new Subscription(); // ... ngOnInit(): void { this.sink.add(...); } addTodo(newTodo: Todo) { this.sink.add(...); } } A single Subscription can collect multiple subscribtions.

class TodosComponent implements OnInit, OnDestroy { private sink = new Subscription(); // ... ngOnDestroy(): void { this.sink.unsubscribe(); } } The code looks cleaner now. #cleanCodePolice

Alternative: async pipe Let Angular handle the subscribe/unsubscribe with the
async pipe! Read this blog post for a comparison: https://blog.angularindepth.com/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8 c0c794

http://bit.do/ngde19-sf-tasks Hands on Clean up subscriptions

Navigate between Views

Navigation SPAs need a way to navigate between views: View
1 Link 1 Link 2 Link 3 View 2 Link 1 Link 2 Link 3 View 3 Link 1 Link 2 Link 3 But without refreshing the page!

Routing http://localhost/todos Maps URLs to components ‘/todos’ TodosComponent ‘/about’ AboutComponent
http://localhost/about Todos About

Routing Can replace only parts of a view ‘/todos’ TodosComponent
‘/about’ AboutComponent http://localhost/todos http://localhost/about Navigation Navigation Todos About ‘/’ AppComponent NavigationComponent Child component

Use RouterModule app-routing.module.ts import { Routes, RouterModule } from '@angular/router';
const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } Routing functionality is provided by RouterModule

Use RouterModule app-routing.module.ts import { Routes, RouterModule } from '@angular/router';
const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } ☝ Routing is an own aspect of our app → Routing Module

Use RouterModule Import RouterModule import { Routes, RouterModule } from
'@angular/router'; const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } We import RouterModule and configure it with Routes

Routing Modules app-routing.module.ts import { Routes, RouterModule } from '@angular/router';
const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } You can export whole modules

@NgModule({ // ... imports: [AppRoutingModule], // ... }) export class
AppModule {} app.module.ts Routing Modules app-routing.module.ts import { Routes, RouterModule } from ... const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } You can export whole modules We do this, so we don’t need to import RouterModule in AppModule

app-routing.module.ts Routes const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)]
}) export class AppRoutingModule { } Route mapping goes here

app-routing.module.ts Routes const routes: Routes = [ { path: '',
redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: TodosComponent }, { path: 'about', component: AboutComponent }, // ... ]; @NgModule({ imports: [RouterModule.forRoot(routes)] }) export class AppRoutingModule { } Default redirect when user enters empty path

Show Routed Component  app.component.html Finally: Use router-outlet as placeholder for activated views

http://bit.do/ngde19-sf-tasks Hands on Set up Routing

Dynamic Routes routes const routes: Routes = [ { path:
'todos/all', component: TodosComponent }, { path: 'todos/active', component: TodosComponent }, { path: 'todos/complete, component: TodosComponent } ]; const routes: Routes = [ { path: 'todos/:query', component: TodosComponent } ]; ‘:query’ Will match all sub-paths! Access :query via ActivatedRoute service

ActivatedRoute todos.component.ts import { ActivatedRoute } from '@angular/router'; // ...
constructor(private route: ActivatedRoute) {} this.route.paramMap .subscribe(paramMap => console.log(paramMap.get('query'))); // routes: [{ path: 'todos/:query', component: TodosComponent }] Will return ‘all’ when todos/all is active

Decentralized Route Conﬁguration RouterModules can be loaded from other Modules:
AppRoutingModule: .forRoot() Todos .forChild() About .forChild() ... .forChild()

Decentralized Route Conﬁguration app-routing.module.ts const routes: Routes = [{ path:
'', redirectTo: 'todos/all', pathMatch: 'full' }]; @NgModule({ imports: [RouterModule.forRoot(routes)] }) export class AppRoutingModule { } todos-routing.module.ts const routes: Routes = [{ path: 'todos/:query', component: TodosComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)] }) export class TodosRoutingModule { }

Router Link To link to an Angular route use RouterLink:
<a routerLink="../active” routerLinkActive="link-active"> Link 1 </a> navigation Relative to the current route Add CSS class “link-active” when route is active

Router Link To link to an Angular route use RouterLink:
<a routerLink="../active” routerLinkActive="link-active"> Link 1 </a> navigation http://localhost/todos/all http://localhost/todos/active Link 1 click

http://bit.do/ngde19-sf-tasks Hands on Create Todo Navigation

Lazy Loading TodoModule is loaded at Startup. If you have
many modules this is not desired! → Lazy Loading for the rescue

Lazy Loading Modules are bundled in different JavaScript chunks Chunks
are loaded at runtime when needed

Routes for Lazy Loaded TodosModule app-routing.module.ts const routes: Routes =
[{ path: '', pathMatch: 'full', redirectTo: 'todos' }, { path: 'todos', loadChildren: () => import('./todos/todos.module') .then(m => m.TodosModule) }]; app-routing.module.ts const routes: Routes = [{ path: '', pathMath: 'full', redirectTo: 'todos/all' }]; We load on demand → Remove imported TodosModule from AppModule!

Routes for Lazy Loaded TodosModule todos-routing.module.ts app-routing.module.ts const routes: Routes
= [{ path: '', pathMatch: 'full', redirectTo: 'todos' }, { path: 'todos', loadChildren: () => import('./todos/todos.module') .then(m => m.TodosModule) }]; const routes: Routes = [{ path: '', redirectTo: 'all' }, { path: ':query', component: TodosComponent }];

http://bit.do/ngde19-sf-tasks Hands on Lazy Loading

Thank you @GregOnNet @_der_markusende Congratulations you mastered... ~150 Slides &
20 Hands on lessons

Angular Solid Foundations

Angular Solid Foundations

Other Decks in Programming

Featured

Transcript