Angular

Recap

1
Environment setup: install (node and npm)

• Node.js:
− open source server framework
− run JavaScript outside the browser, in the JavaScript engine of Node.js itself
− contains a built-in HTTP server => possible to run a web server without Apache
− download: https://nodejs.org/en/download/

• NPM:
− Node.js Package Manager
− Package or module = JavaScript library
− with NPM: install necessary packages

2
Environment setup: install angular CLI

• In cmder enter the following command:

npm install –g
@angular/cli
• This will install the Angular CLI (may take a while)
• "-g" stands for "global mode" and ensures that it is
not installed in the local directory
• at least one global version of Angular CLI is needed

3
Environment setup: create new project

• In cmder enter the following commands:

creates a new project named
cd [ToWorkingDir] angular-demo
ng new angular- !! during creation process, choose following settings:
- stylesheet: your choice
demo - enable SSR and SSG: No

launches a webserver, watches

cd angular-demo your files and rebuilds the app as
you make changes to those files
ng serve

Now surf to http://localhost:4200

4
Project structure

• node_modules: all locally installed node modules (using npm)

• app: contains all custom code

• assets: extra parts of the website such as images, css,

javascript, ...

• index.html: start page of the app, does not need to be changed

• main.ts: main entry point for the application

• styles.css: used for global styles

• package.json: contains versions for all packages used in the

project

5
Environment setup: add bootstrap
• In cmder enter the following command:

cd [ToWorkingDir]
npm install @popperjs/core bootstrap -- package.json
save

• This will install bootstrap and popper.js

(some parts of bootstrap use popper.js)
• The --save option will include bootstrap and
popper.js as a dependency of this project in
package.json
• The modules themselves will be located in
the node_modules folder

6
Environment setup: add bootstrap
• define bootstrap module path in angular.json (root project)
• @styles: "./node_modules/bootstrap/dist/css/bootstrap.min.css",

Order!!

• @scripts:
"./node_modules/@popperjs/core/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js" "

Order!!

• restart ng serve to make sure the changes are taken into account

7
app starting files: MAIN.TS
• bootstrapApplication:
− starting instance of application (AppComponent)
− extra options (appConfig), needed for DI (see later)

• Import statements needed for typescript

GUI design
8
app starting files: app.config.ts

• providers:
− contains an array of services
− app.routes.ts => contains routing

GUI design
9
Architecture angular app
app module

app
component

Navbar Courses Sidebar

• Pages are made up of components

Course
• Reusable
• Can be nested

10
Component

component ng generate component

[name]
ng g c [name]

Template Style logic Output Data

HTML CSS TypeScript
String Interpolation: {{data}}
TypeScript Property binding: [property]="data" HTML
(logic) (Template)
React to (user) events

Event Binding: (event)="expression"

Combination: Two-Way-Binding: [(ngModel)]="data"

11
Lifecycle hooks

Called before ngOnInit if the component has bound inputs and after a bound input
ngOnChanges property changes

ngOnInit Called once the component is initialized (only after first ngOnChanges if any!)

ngDoCheck Called during every change detection run (warning!)

ngAfterContentInit Called after content (ng-content) has been projected into view (only once)

ngAfterContentChecked Called every time the projected content has been checked

ngAfterViewInit Called after the component’s view (and child views) has been initialized

ngAfterViewChecked Called every time the view (and child views) have been checked

ngOnDestroy Called once the component is about to be destroyed

12
Parent – child communication

• @Input() => property binding

<child [inputProperty]="value" …
></child>

• @Output() => event binding

<child (outputEvent)="function()" …
></child>

• local reference + @ViewChild

• ng-content + @contentchild

13
Services

• Communication between: component component

− siblings
− components in different hierarchies component
− with backend

• Create new service:

ng g s
[ServiceName]

14
 Hierarchical Injector

• Instantiation of service determined by location where

service is provided.

Provide in component Provide in parent

Parent Parent
(no service) (service A)

Child 1 Child 2 Child 1 Child 2

(service A) (service B) (service A) (service A)

Child 1 van 1 Child 1 van 2 Child 1 van 1 Child 1 van 2

(service A) (service B) (service A) (service A)

Child 1 and 2 both create the same service via DI but Parent now creates the service via DI. Child 1 and 2
receive different instances of this service (A and B) via now receive the same instance of the service from the
the injector. injector (A only) as well as the grandchildren.
Routes

= link between path in URL and component to be

displayed.

H
om
A

e
bo
ut

C
on
ta
tc
16
Define and register routes, render
component
app.routes.ts: app.config.ts:
Define routes: Register routes:
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component:
AboutComponent },
{ path: 'contact', component:
ContactComponent }
];

• HTML (render component):

<router-outlet></router-outlet>

17
Navigation

• Via links
<li routerLinkActive="active">
<a routerLink="/servers">Servers</a>
</li>

• Programmatic
this.router.navigate(['/servers']);

18
Routes with parameters
{path: 'books/:isbn', component: ServerCompon
⋮ ent}
import { ActivatedRoute, Params } from '@angular/router';
⋮
isbn = '';
constructor(private route: ActivatedRoute) { }
ngOnInit(): void { Observable
this.route.params
ES6 arrow function:
.subscribe((params: Params) => {
"inline" function with
this.isbn = params['isbn']; what to do when there is
} an event of the
); Observable
}
⋮ "subscribe" to events of the Observable

19
Routes with query parameters

routerLink read query parameters

20
Child routes

in parent component:
<router-outlet></router-
outlet>

21
Wildcard and Redirect routes

22