Review old/new stuff: Angular 17

When I reviewed Angular recently, I discovered that it had just undergone a major revision three months ago, v17.

The notes here are summaries of common features incorporated into v17.

Install Angular

ref: https://angular.io/guide/setup-local

npm install -g @angular/cli

Create new project

ng new proj_name
cd proj_name

If the old project needs to be migrated to v17 control flow:

ref: https://youtu.be/36Hcx7kRYDg?si=pmZcRkQHIlmguK3K

ng generate @angular/core:control-flow

Activate 

ng serve

Data Flow

ref: https://angular.io/tutorial/first-app/first-app-lesson-09

Service can be regarded as a custom class (similar to custom modules written in expressJS)

ng generate service obj_name

In the sample program, enumeration of array is used.

this.housingLocationList.find(housingLocation => housingLocation.id === id); 

The concept is 

find( function(element) => { return (condition; )})

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

ref: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

Routing

ref: https://angular.io/tutorial/first-app/first-app-lesson-11

on HTML, build a URL with parameter:

<a [routerLink]="['/details', housingLocation.id]">Learn More</a>

on route file, define the URL structure:

path: 'details/:id',

on .ts file, get parameter from URL:

import { ActivatedRoute } from '@angular/router';
// in class
route: ActivatedRoute = inject(ActivatedRoute);
const housingLocationId = Number(this.route.snapshot.params['id']);

Skeleton Sample: https://github.com/atfuture7/testcode/tree/master/nodejs/12_angular_route/src

Form

Form's file structure is relatively simple.

ref: https://angular.io/tutorial/first-app/first-app-lesson-12

ref: https://angular.io/guide/reactive-forms

It should be noted when debugging that it cannot be debugged using console.log(). Maybe it's because this project uses server-side render. From the test example in ref: "Reactive forms", we can know that user input and web page response are almost synchronized. Perhaps this makes it difficult for console.log() to determine the starting point. In this project, I use the message to be displayed on the web page as a debugging message.

Create an Angular form, set the positions of the angular formgroup and formControl, and then you can receive the data entered by the user. Another thing to note is that if the HTML Input has a name, its name must be the same as formControlName.

sample: https://github.com/atfuture7/testcode/tree/master/nodejs/13_angular_form

Use custom JavaScript

JavaScript defined in the html template will be removed during Angular build. If you want to execute customized js on the web page, you need

• - Save as js file
• - Included in scripts list in angular.json
• - (optional) Initialize in class: ngOnInit() of .ts.

ref: https://www.c-sharpcorner.com/article/using-external-js-file-in-angular-app/

In addition, form inputs that are not written in the html template will not be pre-processed by angular build. It will also cause input to not be listed as an object processed by formControl, even if the attribute is additionally set.