Angular Lecture Notes

* {
  font-family: "Times New Roman", Times, serif;
}

import {Component, OnInit} from '@angular/core';

import { Component, OnInit } from '@angular/core';

...
"typedef": [
  false,
  "call-signature"
],
...

npm run build

npm run build -- --prod

<h1>
  Welcome to {{ title }}
</h1>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-great-app';

  constructor() {
    setInterval(() => this.title += '!', 250);
  }
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-great-app';

  constructor() {
  }

  public onClicked(): void { (1)
    this.title += '!!';
  }
}

<h1>
  Welcome to {{ title }}
</h1>

<button type="button" (click)="onClicked()">  (1)
  Click me!
</button>

<h1>
  Welcome to {{ title }}
</h1>

<button type="button"
  (click)="title = title + '!'">  (1)
  Click me!
</button>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-great-app';
  myNumber = 41;   (1)

  constructor() {
  }

  public onClicked(): void {
    this.title += '!!';
  }
}

<h1>
  Welcome to {{ title }}
</h1>

<button type="button" (click)="onClicked()">
  Click me!
</button>

<h2>{{ myNumber + 1 }}</h2> (1)

...
<input type="text" value="asdf" />

...
<input type="text" value="title" />

...
<input type="input" [value]="title" />

...
<input type="input" [(ngModel)]="title" />

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-great-app';
  myNumber = 41;
  todos = [   (1)
    'Shopping',
    'Homework',
    'Listen to music'
  ];

  constructor() {
  }

  public onClicked(): void {
    this.title += '!!';
  }
}

<h1>
  Welcome to {{ title }}
</h1>

<button type="button" (click)="onClicked()">
  Click me!
</button>

<h2>{{ myNumber + 1 }}</h2>

<input type="input" [(ngModel)]="title" />

<p>{{ todos }}</p>  (1)

...
<ul>
  <li *ngFor="let item of todos">
    {{item}}
  </li>
</ul>

...
<button type="button" (click)="addItem()">
  Add item
</button>

public addItem(): void {
this.todos.push('something');
}

public removeItem(item: string): void {
    this.todos.splice(this.todos.indexOf(item),1);
}

<ul>
  <li *ngFor="let item of todos">
    {{item}}
    <button type="button"
            (click)="removeItem(item)">X
    </button>
  </li>
</ul>

...
<p *ngIf="alert">
  We have a critical alert!!!
</p>

@Component({   (1)
  selector: 'app-root', (2)
  templateUrl: './app.component.html',  (3)
  styleUrls: ['./app.component.css'] (4)
})
export class AppComponent {
...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [  (1)
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

curl -L https://github.com/htl-leonding-example/demo-api/releases/download/1.0.0/demo-api.jar -o demo-api.jar

java -jar demo-api.jar

{
  "dev": {
    "host": "http://localhost:8080/api"
  }
}

// Get a list of people
GET {{host}}/people

###
// Get a list of todo items
GET {{host}}/todos

###
// Add a todo item
POST {{host}}/todos
Content-Type: application/json

{
  "description": "Shopping",
  "assignedTo": "Eve"
}

###
// Add a todo item with unknown person
POST {{host}}/todos
Content-Type: application/json

{
  "description": "Shopping",
  "assignedTo": "Nobody"
}

###
// Get first todo item
GET {{host}}/todos/0

###
// Update todo item
PATCH {{host}}/todos/0
Content-Type: application/json

{
  "description": "Homework"
}

###
// Update todo item to unknown person
PATCH {{host}}/todos/0
Content-Type: application/json

{
  "assignedTo": "Nobody"
}

###
GET {{host}}/todos

###
// Update todo item
PATCH {{host}}/todos/0
Content-Type: application/json

{
  "done": true
}

###
GET {{host}}/todos

###
// Delete todo item
DELETE {{host}}/todos/0

###
GET {{host}}/todos

import {HttpClient} from '@angular/common/http';

@Component({ ...
})
export class MyComponent {

  constructor(private http: HttpClient) { ... }
  ...
}

ng new todo-rest
cd todo-rest
webstorm .

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http'; (2)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, HttpClientModule (1)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http'; (2)

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'todo-rest';

  constructor(private http: HttpClient) { (1)
  }
}

ng new router-demo --routing

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; (1)
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule  (2)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';  (1)

const routes: Routes = []; (2)

@NgModule({
  imports: [RouterModule.forRoot(routes)],  (3)
  exports: [RouterModule]  (4)
})
export class AppRoutingModule { }

ng generate component Customers
ng generate component CustomersDetail

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'customers' }, (1)
  { path: 'customers', component: CustomersComponent },  (2)
  { path: 'customers/:id', component: CustomersDetailComponent } (3)
];

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'router-demo';
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome</h1>
    <router-outlet></router-outlet>
    <p>Footer, (c) by ...</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'router-demo';
}

ng new rxjs-demo --inlineStyle=true --inlineTemplate=true --routing=false --style=css --skip-tests=true
cd rxjs-demo
webstorm .

import { Component } from '@angular/core';
//import {} from 'rxjs';   // will be auto-imported when using Observable
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="doSomethingWithRx()">Start</button>
  `,
  styles: []
})
export class AppComponent {

  doSomethingWithRx() {
    console.log("Let's start ...");
    const observable = new Observable()
  }
}

...
const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
...

...

  doSomethingWithRx() {
    console.log("Let's start ...");
    const observable = new Observable(subscriber => {
      subscriber.next(1);
      subscriber.next(2);
      subscriber.next(3);
      subscriber.complete();
    });

    observable.subscribe(      (1)
      val => console.log(`I got ${val}`)
    );
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
doSomethingWithRx() {
console.log('Let\'s start ...');
const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {  (1)
    subscriber.next(4);
    subscriber.next(5);
    subscriber.complete();
  }, 250);
});

observable.subscribe(
  val => console.log(`I got ${val}`)
);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  doSomethingWithRx() {
    console.log('Let\'s start ...');
    const observable = new Observable(subscriber => {
      subscriber.next(1);
      subscriber.next(2);
      subscriber.next(3);
      setTimeout(() => {
        subscriber.next(4);
        subscriber.error('Something bad happened ...');
        subscriber.next(5);
        subscriber.complete();
      }, 250);
    });

    observable.subscribe(
      val => console.log(`I got ${val}`),
      err => console.log(`Ops: ${err}`)
    );
  }

// observable.subscribe(
//   val => console.log(`I got ${val}`),
//   err => console.log(`Ops: ${err}`)
// );

of(1, 2, 3, 4, 5, 6).subscribe(
  val => console.log(`I got ${val}`)
);

    interval(250).subscribe(
      val => console.log(`I got ${val}`)
    );

...
const subscription = interval(250).subscribe(
  val => console.log(`I got ${val}`)
);

setTimeout(() => subscription.unsubscribe(), 5000);
...

...
interval(250)
  .pipe(take(5))
  .subscribe(
  val => console.log(`I got ${val}`)
);

...
 interval(250)
  .pipe(map(x => x * 2), take(5))
  .subscribe(val => console.log(`I got ${val}`)
);
...

...
 interval(250)
  .pipe(
    map(x => x * 2),
    filter(x => x <= 2),
    take(5)
   )
  .subscribe(val => console.log(`I got ${val}`)
);

concat(
  interval(250)
    .pipe(take(5)),
  interval(100)
    .pipe(take(5))
).pipe(map(x => x * 2))
  .subscribe(val => console.log(`I got ${val}`));

merge(
  interval(250)
    .pipe(take(5)),
  interval(100)
    .pipe(take(5))
).pipe(map(x => x * 2))
  .subscribe(val => console.log(`I got ${val}`));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {Component} from '@angular/core';
import {concat, interval, merge, Observable, of} from 'rxjs';
import {filter, map, take} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="doSomethingWithRx()">Start</button>
    <p>{{ values }}</p>
  `,
  styles: []
})
export class AppComponent {

  public values: Observable<number>;

  doSomethingWithRx() {
    ...

    this.values = merge(
      interval(250)
        .pipe(take(5)),
      interval(100)
        .pipe(take(5))
    ).pipe(map(x => x * 2));
  } (1)
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="doSomethingWithRx()">Start</button>
    <p>{{ values | async }}</p> (1)
  `,
  styles: []
})

cd ./htl-mobile-computing/angular/0010-demo-api
npm start

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from '@angular/common/http';  (1)

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  (2)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component} from '@angular/core';
import {concat, interval, merge, Observable, of} from 'rxjs';
import {filter, map, retry, take} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="doSomethingWithRx()">Start</button>
    <ul>
      <li *ngFor="let v of values | async">{{v.name}}</li> (1)
    </ul>
  `,
  styles: []
})
export class AppComponent {

  public values: Observable<any[]>;

  constructor(private http: HttpClient) {
  }

  doSomethingWithRx() {
    this.values = this.http.get<any[]>("http://localhost:8080/api/people")
      .pipe(retry());  (2)
  }
}

.box {
  display: flex;
}

ng new jasmine-intro --routing=false --style=css
cd jasmine-intro
webstorm .

npm test

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { TestBed } from '@angular/core/testing';

import { CircleMathService } from './circle-math.service';

describe('CircleMathService', () => {
  fit('should calculate the circles area correctly', () => {
    // Prepare (arrange, given)
    const mathService = new CircleMathService();

    // Execute (act, when)
    const result = mathService.calculateCircleArea(1.1);

    // Check results (assert, then)
    expect(result).toBe(Math.PI);
  });
});

ng generate service graphic-math

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { Injectable } from '@angular/core';
import {CircleMathService} from './circle-math.service';

@Injectable({
  providedIn: 'root'
})
export class GraphicMathService {

  constructor(private circleMath: CircleMathService) { } (1)

  circleRadiuses: number[] = [];
  circleAreas: number[] = [];

  calculateAreasOfAllCircles() {
    this.circleAreas = [];
    for (const r of this.circleRadiuses) {
      this.circleAreas.push(this.circleMath.calculateCircleArea(r));
    }
  }
}

import { TestBed } from '@angular/core/testing';

import { GraphicMathService } from './graphic-math.service';
import {CircleMathService} from './circle-math.service';

describe('GraphicMathService', () => {
  it('should calculate areas of circles correctly', () => {
    // arrange
    const graphicMathService = new GraphicMathService(new CircleMathService());
    graphicMathService.circleRadiuses.push(1);
    graphicMathService.circleRadiuses.push(2);

    // act
    graphicMathService.calculateAreasOfAllCircles();

    // assert
    expect(graphicMathService.circleAreas.length).toBe(2);
    expect(graphicMathService.circleAreas[0]).toBe(Math.PI);
    expect(graphicMathService.circleAreas[1]).toBe(2 * 2 * Math.PI);  (1)
  });
});