跳到主要内容

基础学习

Angular是一个前端框架，用于构建客户端（前端）的Web应用程序。它主要关注于用户界面和用户体验，提供了一套工具和结构，帮助开发人员在浏览器中构建交互式的Web界面。虽然Angular本身是一个前端框架，但是它可以与后端技术（如Node.js、Java、Python等）结合使用，以构建完整的Web应用程序。

Angular是一个流行的前端JavaScript框架，用于构建动态Web应用程序。它由Google开发和维护，提供了一套工具和功能，帮助开发人员构建单页Web应用程序（SPA）和其他复杂的Web应用程序。Angular提供了诸如数据绑定、组件化、路由管理、依赖注入等功能，使得开发人员可以更轻松地管理和维护他们的Web应用程序。通过使用Angular，开发人员可以更高效地构建响应式、可维护和可扩展的Web应用程序。

安装 Angular 的步骤​

前文提醒

Angular 的安装有两种版本选择。最新版本采用了 standalone 组件，此版本不包含 module.ts 文件。而通过添加 --no-standalone 标志安装的版本则包含 module.ts 文件。请根据项目需求选择适合的安装方式。

npm install -g @angular/cli
ng v // 查看版本
ng new <project-ame> // 项目名称 默认安装最新版本
ng new <project-ame> --no-standalone  // (module.ts) 安装这个，有module.ts
ng serve // 启动

快速构造组件​

ng generate component servers

安装axios （如有需要）​

ng install axios

基本使用​

绑定数据​

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

按钮绑定​

<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>大人</p>
</div>
<ng-template #forChildren>
	<p>小孩子</p>
</ng-template>
<div *ngIf="age >= 18; else ifTeenager">
  <p>大人</p>
</div>
<ng-template #ifTeenager>
  <div *ngIf="age >= 13; else forChildren">
    <p>青少年</p>
  </div>
</ng-template>
<ng-template #forChildren>
  <p>小孩子</p>
</ng-template>

If Button​

<button *ngIf="hasMore; else noMore" (click)="loadMore()">
	<p>加载更多</p>
</button>
<ng-template #noMore>
	<p>完了</p>
</ng-template>

*ngModel​

// https://angular.io/api/forms/NgModel#description 网址查看更详细

在独立控件上使用模型 以下示例展示了使用该模型的简单独立控件：

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';
  }
}

在 <form> 标签中使用 ngModel 时，您还需要提供一个 name 属性，以便控件可以使用该名称在父表单中注册。

在父表单的上下文中，通常不需要包含单向或双向绑定，因为父表单会为您同步值。您可以通过使用 ngForm 将其导出到本地模板变量（例如 (#f="ngForm")）来访问其属性。在表单提交时，在需要的地方使用该变量。

如果您确实需要在表单中填充初始值，只要您在提交时使用导出的表单值而不是域模型的值，使用 ngModel 的单向绑定就足够了。

✎ 需要在Module文件引入


import { FormsModule } from '@angular/forms'

imports:[
	... ,
	FormsModule,
]

ngModel 使用

<input [(ngModel)]="name" required /> 
name: string = "Hoo";

基本用在密码长度、合适、太短了、太长了

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

$Event

<input (ngModelChange)="handleNameChange($event)" required /> 
handleNameChange(e:any){
	console.log(e.target.value)
}

事件绑定 (模板变量)

<input #userName (ngModelChange)="handleNameChange($event)" />
<button (click)="getUserName(userName.value)">获取userName</button>
getUserName(v:string){
	console.log(v)
}

在表单中使用 ngModel 以下示例展示了在表单中使用 ngModel 的控件：

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 动态表单​

*引入

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

imports:[
	... ,
	FormsModule,
	ReactiveFormsModule
]

在 component 引用

import { FormControl } from '@angular/forms'

使用

age: FormControl = new FormControl('')

前端

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

方法

<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(''),
})

前端使用

<form [formGroup]="loginForm">
	<label>
    	账号:
        <input type="text" formControlName="userName" />
    </label>
    <label>
    	密码:
        <input type="text" formControlName="password" />
    </label>
    <button (click)="subFormFUnction()">
        提交
    </button>
</form>
0%