Angular Awareness for ACME d.d. 11+12-10-2022

1. Topic: Introduction

1.1. Introduction

During this section we will introduce the structure of the training.

We will use

A scaffolded REST server using json-server
Our ide to create an Angular application for Cars
Some time, we will start at 09:00 and end approx. 17:00 hours having 12 pomodoro’s

Slides

This site will be updated during the training by your and mine input. So it will be a referall afterwards.

Movies

The trainer will record movies and upload them to a location where they can be played back

2. Topic: Introduction of the CarApp case

2.1. Introduction

During this upcoming two days we will create a backend using the Node’s json-server and Angular UI

The json-server acts as a REST service and a database

2.2. What: Introduction of the CarApp case

Model

Car with properties
- id, brand, licensePlate and mileage

We will use the following endpoints in our REST service

GET http://localhost:3000/api/cars (list cars)
GET http://localhost:3000/api/cars/:id (find car by id)
POST http://localhost:3000/api/cars (create a car)
PUT http://localhost:3000/api/cars/:id (update a car)
DELETE http://localhost:3000/api/cars/:id (delete a car)

2.3. How: Introduction of the CarApp case

Optional: Database

We could also use a Java Spring Boot REST api with a Docker container to persist our cars in a MySQL database

3. Topic: Introduction to Angular

3.1. Introduction

Angular is a opinionated framework which allows us to create web-applications using TypeScript

3.2. Learning objectives

By the end of this module, learners will be able to:

Describe what the benefits are and features of using Angular

3.3. What: Introduction to Angular

Some features and benefits from http://angular.io

Progressive web apps

Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation

Templates

Quickly create UI views with simple and powerful template syntax

Angular CLI

Command line tools: start building fast, add components and tests, then instantly deploy

4. Topic: Relevant parts of an Angular app

4.1. Introduction

In the previous module we learned that we what the benefits are of TypeScript and what it is used in Angular. So now we can start hacking in Angular … But first we have to learn which are the important parts of an Angular app.

The fixing of that problem will be the subject of this module

4.2. Learning objectives

By the end of this module - and training , learners will be able to:

Describe the interactions and responsibilities of the parts the are used in Angular
Identify the necessary configurations

4.3. Why: Relevant parts of an Angular app

Since Angular is very well structured we have to learn the structure of Angular

4.4. What: Relevant parts of an Angular app

Angular consists of the following parts and architecture which are part of this training

Node and NPM to be able to invoke commands using the Angular CLI
The Angular CLI to get started
Modules ::= describe the entire application structure and usage of Angular parts in our app
Domain model
Component
- Component code(.ts files)
- Template code (.html files)
Data binding
- To keep the template in sync with component code
Dependency injection which is e.g. used by
- Services (REST clients)
- Http Services (REST services)
Routing
The other cement of the Angular app like
- package.json
- …

All these will be handled through this training

5. Topic: TypeScript

5.1. Introduction

The chosen language in an Angular is TypeScript. The why’s and whens of TypeScript follow here.

5.2. Learning objectives

By the end of this module, learners will be able to:

Describe the benefits of using TypeScript beyond JavaScript in a project
Use TypeScript as a programming language with or without using it in an Angular project

5.3. Why: TypeScript

We are using TypeScript for several reasons

TypeScript is called TypeScript because it is a statically typed language
this prevents us from making (too much) runtime errors
this helps us during development
For a C# or Java developer it is a habit to work with a typed language

5.4. What: TypeScript

TypeScript is the native language of Angular which is even build / made by Microsoft

Angular 2 was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features

By focusing on making the framework easier for computers to process, Angular 2 allows for a much richer development ecosystem

Programmers using sophisticated text editors (or IDEs) will notice dramatic improvements with auto-completion and type suggestions. These improvements help to reduce the cognitive burden of learning Angular 2. Fortunately for traditional ES5 JavaScript programmers this does not mean that development must be done in TypeScript or ES2015: programmers can still write vanilla JavaScript that runs without transpilation.

The Github TypeScript guide

Installation of TypeScript is done through the installation of Angular using the Angular CLI so we do not have to install TypeScript manually!

5.5. Optional!: How: TypeScript

5.6. Optional: How to use TypeScript without use in Angular

This module explains the theory of installing typescript

Optional: Install TypeScript

Installation of TypeScript happens by issueing the following command in your terminal

$ (sudo) npm install -g typescript

Use the same command later on during your development to upgrade the TypeScript compiler (e.g. per feb 2019 the Angular 7 install fails if you do not upgrade TypeScript)

After this npm-command we should be able to invoke the tsc command from the terminal

Add code

After installing TypeScript, we can add TypeScript code immediately

Add this to file greeter.ts

function greeter(person) {
    return "Hello, " + person;
}

let car:string = "Jane Car"; // this is TypeScript

// document.body.innerHTML = greeter(car);

console.log(greeter(car));

Compile it

After adding code we can compile the greeter.ts file using the tsc compiler

$ tsc greeter.ts

The result of this should be greeter.js

We could run this greeter.js file using our node command or just watch the resulting greeter.js file.

5.7. Optional: Assignment: Install and use TypeScript

Install

$ npm install -g typescript

Validate your version

$ tsc -v

Should print the version of typescript. Now (18-09-2018) the version should be around 3.0.3

Create code (add content to file greeter.ts)

function greeter(person) {
    return "Hello, " + person;
}

let car:string = "Jane Car"; // this is TypeScript

// document.body.innerHTML = greeter(car);

console.log(greeter(car));

Compile code

$ tsc greeter.ts

A file greeter.js should be generated

Run the code

$ node greeter.js
$ node greeter

You can ignore the extension .js since node expect the file to be a .js file

Validation

You should have seen the message "Hello Jane Car" on your terminal and NOT something else and NOT Hello undefined!!!

6. Topic: Node and NPM

6.1. Introduction

In the previous module we learned that we can use TypeScript in an Angular app. That is not the whole truth. Since our browser, can only run JavaScript we have to have a tool which converts our TypeScript code to JavaScript. Besides that we need some more tools … These tools are in Node and NPM

The fixing of that problem will be the subject of this module

6.2. Learning objectives

By the end of this module, learners will be able to:

Describe and work with Node and NPM

6.3. Why: Node and NPM

6.4. When: Node and NPM

6.5. What: Node and NPM

This might have been already done by us (ACME 2022-10-11+12)

Since Angular and the Angular CLI depends on

NodeJS
NPM

This module explains how to install Node and NPM

6.6. How: Node and NPM

6.7. Instructor Demo: Node and NPM

In this demo, we’ll illustrate

Setting up how to install Node and NPM using NVM which is most common - and I prefer
Using the node and npm command and testing it

6.7.1. Setting up Node and NPM

Show the website: * Install using NVM

Watch closely that installing the NVM is also configuration specific!

6.7.2. Configuring Node and NPM

6.7.3. and some more demo steps? or remove Node and NPM

6.7.4. Takeaway

6.8. Exercise: Node and NPM

Do the Exercise: Node and NPM now

6.9. Takeaway

During this module we learned how to install Node and NPM

In the following module we will learn that we have to use that for starting the Angular app with the Angular CLI

6.10. Further reading

Install Node and NPM using NVM

https://github.com/nvm-sh/nvm

7. Topic: NVM Features

7.1. Introduction

In the previous module we installed NVM which is a great tool to install node versions and switch to node version A small introduction of the commands of NVM follow here.

7.2. Learning objectives

By the end of this module, learners will be able to:

Describe how to use NVM

7.3. Why: NVM Features

To switch between Node versions

7.4. When: NVM Features

In the world of JavaScript and Node there are a lot of creative programmers who dictate to use a specific version of Node.

7.5. How: NVM Features

Syntax

nvm install <nodeVersion>
nvm use <nodeVersion>

7.6. Instructor Demo: NVM Features

In this demo, we’ll illustrate

Installing a new node version
Switching to a node version

Demo nvm commands

# to list the versions WITH ARE AVAILABLE
nvm ls-remote

# to install a specific version
nvm install 18.9.1

# to use a specific version
nvm use 16.16.0

7.7. Exercise: NVM Features

Do the Exercise: NVM Features now

7.8. Takeaway

Remember this

npm install
npm use

During this module we learned how to make use of NVM so that we can install an NVM version

In the following module we will learn that we can (also) make use that to install Angular CLI

7.9. Further reading

THE NVM Manual

https://github.com/nvm-sh/nvm

Switching to a Node version

https://itnext.io/nvm-the-easiest-way-to-switch-node-js-environments-on-your-machine-in-a-flash-17babb7d5f1b

8. Topic: Angular CLI

8.1. Introduction

Just after release version 2.0 of Angular - 2016 the Angular CLI came out. Since that time we can use 'simple commands' to scaffold the various parts of an Angular application. In fact that solves a lot of problems how to set it up. In fact it creates the problem that we have to learn the Angular CLI :-)

Learning to use the Angular CLI is the subject of this module.

8.2. Learning objectives

By the end of this module, learners will be able to:

Describe how to use the Angular CLI
Identify the various commands which are present in the Angular CLI

8.3. Why and When : Angular CLI

To help us create the parts of the Angular APP.

8.4. What: Angular CLI

The Angular CLI is a Command Line Interface to scaffold parts

8.5. How: Angular CLI

By installing the Angular cli

Install

npm install -g @angular/cli

8.6. Instructor Demo: Angular CLI

In this demo, we’ll illustrate

Setting up the Angular CLI
Showing creating a component and service

8.6.1. Setting up Angular CLI

Install

npm install -g @angular/cli

Basic usage

# create a new app
ng new myAppName

Watch closely what the choices are during the creation of the app

Basic usage continued

# cd into the new dir
cd myAppName

# start the app
ng serve

Further usage

# generate a component
ng generate component components/myComponent

# generate a service
ng generate service services/myService

# start the app and open your browser
ng serve --open

# start the app on a different http port
ng serve --port 4201

8.7. Exercise: Angular CLI

Do the Exercise: Angular CLI now

8.8. Takeaway

Remember this

npm install -g @angular/cli
ng generate …

During this module we learned how to make use of the Angular CLI so that we can use that in the upcoming parts of this training - and your development project

In the following module we will learn that we can use them for making our first application

8.9. Further reading

Install and use the Angular CLI

https://angular.io/cli

Use ng generate

https://angular.io/cli/generate

9. Topic: Workspace and project file structure

9.1. Introduction

In the previous module we learned to create a new Angular app. We see a lot of files which are generated.

Knowing what the purpose of these files are is the subject of this module

9.2. Learning objectives

By the end of this module, learners will be able to:

Describe the generated files and their purpose

9.3. What: Workspace and project file structure

package.json

The NodeJS file which describes all the Node dependencies for this project. Comparable with Java’s Maven’s pom.xml

package-lock.json

File for administering the changes in the package.json (should be stored in source control)

index.html

The file which is opened by you, the customer when starting the app. The most used and important tag in the index.html is (or should be) the router-outlet (with routing enabled) or app-root (without routing) since that renders all the output of the app

app.module.ts

contains the first application module and describes what is available in this application
- contains the imports, declarations and exports array which describe which is getting in, which is getting made and which is getting exported …
- also contains the providers in the form of services

Read this introduction to Modules

During usage of the HttpClient part we have to add the HttpClientModule here! Which is an often forgotten part for newbees in Angular

app.component.ts

this component is the first component of this app and mostly this is the starting component with it’s HTML when the app starts

app.component.html

the HTML which is to be rendered when the app.component will be active

app-routing-module.ts

Used for declaring routes to components

styles.css

a file used to add styles for the ENTIRE application, not to be confused with the .css files PER COMPONENT

Below the src folder

assets folder

a folder where we might be adding content later for deployment

environments

a folder which contains files per environment e.g. (develop, test, acc, prod) to specify a specific URL for example per environment
- e.g. the URL for development might be http://localhost:8080/api/cars but in test it might be http://api.test.example.com:8080/api/cars and in production it might be: http://api.example.com/cars

9.3.1. Less used for starters

tslint.json

Configuring the TypeScript Lint source code checker

tsconfig.json

Configuration the TypeScript compiler

angular.json

The file which is used for administering the project. Especially when you create a new environment (later called Configuration).

main.ts

main.ts is the entry point of your application , compiles the application with just-in-time and bootstraps the application

karma.conf.js

The file for configuring the Karma Framework. A framework for testing the Angular application

e2e

The folder which contains the End To End Testing apps

9.3.2. Other files

.browserslistrc

Contains a list of supported browsers. Invoke npx browserslist to show the supported browsers.

.editorconfig

File which dictated how the files are created. e.g. tab length etc.

dist

The dist folder is created when you create a new build with ng build and will be introduced during the Environments topic

9.4. Takeaway

Remember this

the app-module.json
the

9.5. Further reading

Introduction to Modules

https://angular.io/guide/architecture-modules

Workspace and project file structure

https://angular.io/guide/file-structure

Workspace config

https://angular.io/guide/workspace-config

Karma configuration

https://karma-runner.github.io/1.0/config/configuration-file.html

10. Topic: Domain class

10.1. Introduction

In the previous module we learned that we can install the Angular CLI. Now we will learn how to make a domain class

10.2. Learning objectives

By the end of this module, learners will be able to:

Describe the interactions and responsibilities of the domain class in Angular

10.3. Why and When: Domain class

The instructor will instruct some regarding domain class

10.4. How: Domain class

Using the Angular CLI

ng generate class model/Car

Modify for usage in the project

export class Car {

  id?: Number;
  brand: string = "";
  mileage: number = 0;
  licensePlate?: string;
}

10.5. Instructor Demo: Domain class

In this demo, we’ll illustrate

Setting up the Car class and modify the properties

10.5.1. Setting up Domain class

Execute the code above

10.6. Exercise: Domain class

Do the Exercise: Domain class now

10.7. Takeaway

Remember this

ng generate class model/myModel
modify the generated class

During this module we learned how to make our first domain class so that we can use that in the upcoming project

10.8. Further reading

Angular class command

https://angular.io/cli/generate#class-command

11. Topic: Intermezzo: Installing json-server

11.1. Introduction

In the previous modules at the beginning of this awareness training we stated that we want a REST service. During this intermezzo we will install JSON-server

11.2. Learning objectives

By the end of this module, learners will be able to:

Install the wonderful json-server

11.3. Why: Intermezzo: Installing json-server

At least, to scaffold a REST service

11.4. How: Intermezzo: Installing json-server

Install the json-server

npm install -g json-server

Create a directory

mkdir json-server
cd json-server

Create a data file in the directory with the name cars.json

{
  "cars": [
    {
      "id": 1,
      "brand": "Kia",
      "licensePlate": "GZ-766-H",
      "mileage": 118000
    },
    {
      "id": 2,
      "brand": "Ford",
      "licensePlate": "AABBCC",
      "mileage": 118000
    },
    {
      "id": 3,
      "brand": "Ford",
      "licensePlate": "AABBCC",
      "mileage": 118000
    },
    {
      "licensePlate": "added json",
      "brand": "json rocks",
      "mileage": 1232,
      "ev": false,
      "id": 4
    }
  ]
}

Add the routes in a file routes.json (For rendering with prefix api)

{
  "/api/*": "/$1"
}

Run the server

json-server db.json --routes routes.json --port 3000               #choose a free port :-)

Validate the server using a browser - or curl

curl http://localhost:3000/api/cars

11.5. Instructor Demo: Intermezzo: Installing json-server

In this demo, we’ll illustrate

How to execute the code above

11.6. Exercise: Intermezzo: Installing json-server

Do the Exercise: Intermezzo: Installing json-server now

11.7. Takeaway

During this intermezzo we installed the json server for rendering cars. In the next module we will create - by pure explaining by the trainer how to create an asynchronous REST service in Angular

11.8. Further reading

Package json server

https://www.npmjs.com/package/json-server

Manual json-server

https://github.com/typicode/json-server

12. Topic: CarsComponent

12.1. Introduction

During this part we will create a component which renders our cars

In the previous module we learned that we can make a domain class, so now we can use it in a list of cars

12.2. Learning objectives

By the end of this module, learners will be able to:

Implement a Cars(plural) component which renders the cars send by the JSON-server

12.3. Why and When: CarsComponent

Every application has a list of domain classes

12.4. What: CarsComponent

Our first app.component is rendering during building. Do not touch that.

Now we want to generate a component which renders the cars from our JSON-server

template

<app-car-add></app-car-add>
<p *ngFor="let car of cars$ | async">
<app-car-item [car]="car"></app-car-item>
</p>

12.5. How: CarsComponent

12.6. Instructor Demo: CarsComponent

In this demo, we’ll illustrate

Creating a component

Steps

ng generate component components/cars

Validation

It should create a components/cars.component.html
It should create a components/cars.component.ts

12.7. Exercise: CarsComponent

Do the Exercise: CarsComponent now

12.8. Takeaway

Remember this

ng generate component ...