Basic Learning

Angular is a front-end framework for building client-side (front-end) web applications. It focuses primarily on user interfaces and user experiences, providing a set of tools and structures to help developers build interactive web interfaces in the browser. Although Angular itself is a front-end framework, it can be used in conjunction with back-end technologies such as Node.js, Java, Python, etc. to build complete web applications.

Angular is a popular front-end JavaScript framework for building dynamic web applications. Developed and maintained by Google, it provides a set of tools and features to help developers build single-page web applications (SPA) and other complex web applications. Angular provides features such as data binding, componentization, routing management, dependency injection, etc., making it easier for developers to manage and maintain their web applications. By using Angular, developers can build responsive, maintainable, and scalable web applications more efficiently.

---

Steps to install Angular

Previous article reminder

There are two versions of Angular installation options. The latest version uses the standalone component, which does not contain the module.ts file. The version installed by adding the --no-standalone flag includes a module.ts file. Please choose the appropriate installation method based on your project requirements.

npm install -g @angular/cli

ng v // Check the version

ng new <project-ame> // Project name The latest version is installed by default

ng new <project-ame> --no-standalone // (module.ts) Install this, there is module.ts

ng serve // ​​Start

Quickly construct components

ng generate component servers

Install axios (if necessary)

ng install axios

Basic use

Bind data

title="{{ name }}"

[title]="name"

[title]="'This is my ' + name"

Button Binding

<button (click)="onClickFUnction()"></button>

Foreach

*ngFor="let item of lists"

*ngFor="let item of lists; index as i"

<ng-template ngFor let-item [ngForOf]="lists" let-i="index" let-odd="odd">

</ng-template>

<ng-template ngFor let-item [ngForOf]="items">
  <div>{{ item }}</div>
</ng-template>

If

*ngIf="isOpen"

<div *ngIf="age >= 18; else forChildren">
	<p>Adult</p>
</div>
<ng-template #forChildren>
	<p>Children</p>
</ng-template>

<div *ngIf="age >= 18; else ifTeenager">
  <p>Adult</p>
</div>
<ng-template #ifTeenager>
  <div *ngIf="age >= 13; else forChildren">
    <p>Youth</p>
  </div>
</ng-template>
<ng-template #forChildren>
  <p>Children</p>
</ng-template>

If Button

<button *ngIf="hasMore; else noMore" (click)="loadMore()">
	<p>Loading More</p>
</button>
<ng-template #noMore>
	<p>End</p>
</ng-template>

*ngModel

// https://angular.io/api/forms/NgModel#description Website for more details

Using the model on a stand-alone control The following example shows a simple stand-alone control that uses the model:

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

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required />

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() {
    this.name = 'Nancy';
  }
}

When using the ngModel within <form> tags, you'll also need to supply a name attribute so that the control can be registered with the parent form under that name.

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you. You access its properties by exporting it into a local template variable using ngForm such as (#f="ngForm"). Use the variable where needed on form submission.

If you do need to populate initial values into your form, using a one-way binding for ngModel tends to be sufficient as long as you use the exported form's value rather than the domain model's value on submit.

✎ Need to be introduced in the Module file

import { FormsModule } from '@angular/forms'

imports:[
	... ,
	FormsModule,
]

ngModel Using

<input [(ngModel)]="name" required /> 

name: string = "Hoo";

Basically used for password length, suitable, too short, too long

<input [(ngModel)]="name" (ngModelChange)="handleNameChange()" required /> 

$Event

<input (ngModelChange)="handleNameChange($event)" required /> 

handleNameChange(e:any){
	console.log(e.target.value)
}

Event binding (template variables)

<input #userName (ngModelChange)="handleNameChange($event)" />
<button (click)="getUserName(userName.value)">get username</button>

getUserName(v:string){
	console.log(v)
}

Using ngModel within a form

The following example shows controls using ngModel within a form:

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

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel" />
      <input name="last" ngModel />
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value); // { first: '', last: '' }
    console.log(f.valid); // false
  }
}

ReactiveFormsModule dynamic form

*import

import { FormsModule  , ReactiveFormsModule } from '@angular/forms';

imports:[
	... ,
	FormsModule,
	ReactiveFormsModule
]

Reference in component

import { FormControl } from '@angular/forms'

Use

age: FormControl = new FormControl('')

Front-end

<input type="text" [formControl]="age"/>
<p>{{ age.value }}</p>

method

<button (click)="ageChangeFUnction()">长大</button>

ageChangeFUnction(){
	this.age.setValue(18)
}

FormGroup

import { FormControl, FormHroup } from '@angular/forms'

loginForm:FormGroup = new FormGroup({
	userName: new FormControl(''),
	password: new FormControl(''),
})

Front-end usage

<form [formGroup]="loginForm">
	<label>
    	Account:
        <input type="text" formControlName="userName" />
    </label>
    <label>
    	Password:
        <input type="text" formControlName="password" />
    </label>
    <button (click)="subFormFUnction()">
        Submit
    </button>
</form>