Skip to main content

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

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.
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.

Comments

Post a Comment

Popular posts from this blog

Bookmark service (MongoDB & Spring REST) -2/2

    I accidentally deleted my development VM. I got lucky having the habit of taking notes. This blog is useful. Development VM is doom to be lost. Rebuild it waste time, but having a clean slate is refreshing~. What concerns me more is my AWS free quota this month is reaching 85%. The second VM I launched but never being used might be the one to blame. (Of course, my mistake.) I terminated the wrong VM. Now I got Linux 2 built. Great, just threw away everything happened on AMI.  1st layer: Page Page class   Originally, I need to prepare getter/setter for all class properties for Spring. By using lombok, I only need to create constructors. lombok will deal with getter/setter and toString(). But there are chances to call getter/setter, but how? .......Naming convention.... Capitalize the 1st character with the prefix get/set.  Annotation @Data was used on this class.  Repository class Spring Docs: Repository https://docs.spring.io/spring-data/mongodb/docs/3....
1 comment
Read more

gamer's interview

This project simulates a gamer's interview. Based on NodeJS+ ReactJS The setting is interviewing a gamer/journalist what's his/her plan of March 2020? The gamer answers his/her game list in plan, how many reviews on demand and how many hours expected. Games selected for review take 5 hours for each, while others take one. This project is designed to practice render html, jsx, component, props introduced in  https://www.w3schools.com/REACT/default.asp . Also fixed other issues to make it work. When trying to modualize objects and tools, my design developed to separate views and processes. And it is quite similar to the initialized structure NodeJS+ReactJS provided. Furthermore, since include local module files are banned by browsers, use NodeJS service seems to be the best option. view file main process object tool
Post a Comment
Read more

Comments for my Server/Client Web API samples

        Finally, I finished the comments for python/07 and 09 projects. I almost forgot to put the date on source code which is used to note how long it took me. Not precisely in hours….. I didn’t include source code in my previous post. If choosing code-section for this post…… maybe I want to mark out my comment….. (Really?!)          Once my work was developing websites for enterprises, including ERP, CRM or content sites. The sustainability of network and security are important issues. There are 2 methods for HTML Form submission: GET and POST. Submit via POST is secure, compared to GET which piles parameters on URL. RESTful API is mainly using GET.         Yup, even if you have a certification key, if you put the value on the URL, it is visible data. When writing socket-communication, client-server sockets are a pair; both follow the agreement on commands and structures; and there are countless ports for usa...
Post a Comment
Read more