Angular 使用教程——基本语法和双向数据绑定

悟世君子2023-11-12 18:46

Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用

Angular 是一个基于 TypeScript 构建的开发平台。它包括：一个基于组件的框架，用于构建可伸缩的 Web 应用，一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等，一套开发工具，可帮助你开发、构建、测试和更新代码。借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易，因此你可以用最小的成本升级到最新的 Angular 版本

Angular诞生历史，AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google收购。AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angular采用TypeScript语言编写，是ECMAScript 6的超集

Angular官网：https://angular.cn/

目录

[1、创建 Angular 项目](#1、创建 Angular 项目)

2、点击事件

[3、if 语句](#3、if 语句)

[3.1、if 形式](#3.1、if 形式)

[3.2、if else 形式](#3.2、if else 形式)

[3.3、angular 17 @if 形式](#3.3、angular 17 @if 形式)

[4、for 语句](#4、for 语句)

[4.1、*ngFor 形式](#4.1、*ngFor 形式)

[4.2、angular 17 @for 形式](#4.2、angular 17 @for 形式)

[5、switch 语句](#5、switch 语句)

[5.1、ngSwitch 形式](#5.1、ngSwitch 形式)

[5.2、angular 17 @switch 形式](#5.2、angular 17 @switch 形式)

6、双向数据绑定

1、创建 Angular 项目

Angular 和 Node 版本关系

Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS 版

笔者使用的 node 版本是 20.9.0

安装 Angular CLI

如果已经安装过Angular CLI ，可以跳过

bash 复制代码 
npm install -g @angular/cli

创建项目

在新的文件目录下执行下面创建项目命令

bash 复制代码 
ng new angular-learn

笔者新建的项目名为 angular-learn

创建完成

使用 vs code 打开项目代码

笔者创建的 Angular 版本是17

项目结构

运行项目

复制代码 
npm run start

浏览器访问：http://localhost:4200

项目创建成功

2、点击事件

先将 app.component.html 文件内容清空，只保留<router-outlet></router-outlet>

在 app.component.html 中添加button标签，并按下面代码添加点击事件

html 复制代码 
<button (click)="add()">添加</button>
<router-outlet></router-outlet>

然后在 app.component.ts 文件中写add 事件内容

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
}

运行效果

获取事件本身

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>
<router-outlet></router-outlet>

app.component.ts

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }
}

运行效果

3、if 语句

3.1、if 形式

在 app.component.ts 中定义变量 isPoetry

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
}

app.component.html 中写 if 判断

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>

<router-outlet></router-outlet>

运行效果

3.2、if else 形式

app.component.ts

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }
}

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<router-outlet></router-outlet>

运行效果

3.3、angular 17 @if 形式

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<router-outlet></router-outlet>

运行效果

4、for 语句

4.1、*ngFor 形式

app.component.ts

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]
}

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>
<router-outlet></router-outlet>

运行效果

4.2、angular 17 @for 形式

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}
<router-outlet></router-outlet>

5、switch 语句

5.1、ngSwitch 形式

app.component.ts

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]

  author:number = 2
  changAuthor() {
    this.author = 3
  }
}

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>
<router-outlet></router-outlet>

运行效果

5.2、angular 17 @switch 形式

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p>

<!-- angular 17 @for 语句 -->
@for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
}

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>

<!-- angular17 switch -->
@switch (author) {
    @case (1) {
        <p>若非群玉山头见 会向瑶台月下逢</p>
    }
    @case (2) {
        <p>春宵一刻值千值千金,花有清香月有阴</p>
    }
    @default {
        <p>情催桃李艳，心寄管弦飞</p>
    }
}
<router-outlet></router-outlet>

运行效果

6、双向数据绑定

想要实现双向数据绑定，需要引入angular 内置的 FormsModule 模块

在 app.component.ts 文件中引入

TypeScript 复制代码 
import { FormsModule } from '@angular/forms';

并在 @Component 的 import 中添加 FormsModule

app.component.ts

TypeScript 复制代码 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-learn';
  add() {
    alert('晓看天色暮看云，行也思君，坐也思君')
  }
  add2(e:MouseEvent) {
    console.log(e);
  }

  isPoetry:boolean = true
  isPoetry2:boolean = true

  changePoetry() {
    this.isPoetry2 = false
  }

  // 定义数组
  poetrys:Array<string> = [
    '死生契阔，与子成说',
    '执子之手，与子偕老',
    '我心匪石，不可转也',
    '有一美人兮，见之不忘'
  ]

  author:number = 2
  changAuthor() {
    this.author = 3
  }

  poetryContent:string = '彼采葛兮，一日不见，如三月兮'

}

app.component.html

html 复制代码 
<button (click)="add()">添加</button>
<button (click)="add2($event)">添加2</button>

<p *ngIf="isPoetry">
    山有木兮木有枝，心悦君兮君不知
</p>
<button (click)="changePoetry()">修改isPoetry2</button>
<ng-container *ngIf="isPoetry2; else elseTemplate">
    <p>与君初相识，犹如故人归</p>
</ng-container>
<ng-template #elseTemplate>
    <p>愿我如星君如月，夜夜流光相皎洁</p>
</ng-template>

<!-- angular17 写法 -->
@if (isPoetry2) {
    <p>似此星辰非昨夜，为谁风露立中宵</p>
}
@else {
    <p>曾经沧海难为水，除却巫山不是云</p>
}

<!-- for 语句 -->
<!-- <p *ngFor="let poetry of poetrys let i = index">
    {{i+1}}、{{poetry}}
</p> -->

<!-- angular 17 @for 语句 -->
<!-- @for (item of poetrys; track item) {
    <div>{{item}}</div>
} @empty {
    Empty list of poetrys
}
  
@for (item of poetrys; track $index) {
    <p>{{$index+1}}、{{item}}</p>
} -->

<button (click)="changAuthor()">修改作者</button>
<!-- angular switch语法 -->
<div [ngSwitch]="author">
    <p *ngSwitchCase="1">
        青天有月来几时 我今停杯一问之
    </p>
    <p *ngSwitchCase="2">
        明月几时有，把酒问青天
    </p>
    <p *ngSwitchDefault>
        江畔何人初见月，江月何年初照人
    </p>
</div>

<!-- angular17 switch -->
@switch (author) {
    @case (1) {
        <p>若非群玉山头见 会向瑶台月下逢</p>
    }
    @case (2) {
        <p>春宵一刻值千值千金,花有清香月有阴</p>
    }
    @default {
        <p>情催桃李艳，心寄管弦飞</p>
    }
}

<input [(ngModel)]="poetryContent" type="text" style="width: 200px;">
{{poetryContent}}
<router-outlet></router-outlet>

运行效果

​​​​​​​

至此完

相关推荐
vim怎么退出4 分钟前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫211 分钟前
Composition API的深入理解与最佳实践
前端·vue.js
NaN_37213 分钟前
新手教程-使用 Android Studio 搭建 React Native 项目开发环境
前端
天天扭码22 分钟前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试
parade岁月25 分钟前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript
溪ｉ26 分钟前
react-spring/web + children not defined
前端·spring·react.js
雨夜带刀_30 分钟前
Three.js 导入模型demo分析（随笔记）
前端
用户214118326360230 分钟前
dify案例分享-Qwen3 vs 传统合同审查，这场对决谁能胜出？
前端
egghead2631634 分钟前
trae+react+tailwindcss项目开发
前端·react.js
前端啵啵猪34 分钟前
基于qiankun实现子应用菜单级keep-alive
前端·javascript
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09我决定放弃搞 Java 了10yolov10来了！用yolov10训练自己的数据集（原理、训练、部署、应用）