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

    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 项目

    2、点击事件

    3、if 语句

    3.1、if 形式

    3.2、if else 形式

    3.3、angular 17 @if 形式

    4、for 语句

    4.1、*ngFor 形式

    4.2、angular 17 @for 形式

    5、switch 语句

    5.1、ngSwitch 形式

    5.2、angular 17 @switch 形式

    6、双向数据绑定

    1、创建 Angular 项目

    Angular 和 Node 版本关系

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

    笔者使用的 node 版本是 20.9.0

    安装 Angular CLI 

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

    npm install -g @angular/cli

    创建项目

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

    ng new angular-learn

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

    创建完成

    使用 vs code 打开项目代码

    笔者创建的 Angular 版本是17

    项目结构

    运行项目

    npm run start

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

    项目创建成功

    2、点击事件

    先将 app.component.html 文件内容清空，只保留

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

    1. <button (click)="add()">添加button>
    2. <router-outlet>router-outlet>

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

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17. }

    运行效果

    获取事件本身

    app.component.html 

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4. <router-outlet>router-outlet>

    app.component.ts 

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17.   add2(e:MouseEvent) {
    18.     console.log(e);
    19.   }
    20. }

    运行效果

    3、if 语句

    3.1、if 形式

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

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17.   add2(e:MouseEvent) {
    18.     console.log(e);
    19.   }
    20.  
    21.   isPoetry:boolean = true
    22. }

    app.component.html 中写 if 判断

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8.  
    9. <router-outlet>router-outlet>

    运行效果

    3.2、if else 形式

    app.component.ts

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17.   add2(e:MouseEvent) {
    18.     console.log(e);
    19.   }
    20.  
    21.   isPoetry:boolean = true
    22.   isPoetry2:boolean = true
    23.  
    24.   changePoetry() {
    25.     this.isPoetry2 = false
    26.   }
    27. }

    app.component.html

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    16. <router-outlet>router-outlet>

    运行效果

    3.3、angular 17 @if 形式

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    24. <router-outlet>router-outlet>

    运行效果

    4、for 语句

    4.1、*ngFor 形式

    app.component.ts

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17.   add2(e:MouseEvent) {
    18.     console.log(e);
    19.   }
    20.  
    21.   isPoetry:boolean = true
    22.   isPoetry2:boolean = true
    23.  
    24.   changePoetry() {
    25.     this.isPoetry2 = false
    26.   }
    27.  
    28.   // 定义数组
    29.   poetrys:Array<string> = [
    30.     '死生契阔，与子成说',
    31.     '执子之手，与子偕老',
    32.     '我心匪石，不可转也',
    33.     '有一美人兮，见之不忘'
    34.   ]
    35. }

    app.component.html

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    25. <p *ngFor="let poetry of poetrys let i = index">
    26.     {{i+1}}、{{poetry}}
    27. p>
    28. <router-outlet>router-outlet>

    运行效果

    4.2、angular 17 @for 形式

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    25. <p *ngFor="let poetry of poetrys let i = index">
    26.     {{i+1}}、{{poetry}}
    27. p>
    28.  
    30. @for (item of poetrys; track item) {
    31.     <div>{{item}}div>
    32. } @empty {
    33.     Empty list of poetrys
    34. }
    35.   
    36. @for (item of poetrys; track $index) {
    37.     <p>{{$index+1}}、{{item}}p>
    38. }
    39. <router-outlet>router-outlet>

    5、switch 语句

    5.1、ngSwitch 形式

    app.component.ts

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4.  
    5. @Component({
    6.   selector: 'app-root',
    7.   standalone: true,
    8.   imports: [CommonModule, RouterOutlet],
    9.   templateUrl: './app.component.html',
    10.   styleUrls: ['./app.component.css']
    11. })
    12. export class AppComponent {
    13.   title = 'angular-learn';
    14.   add() {
    15.     alert('晓看天色暮看云，行也思君，坐也思君')
    16.   }
    17.   add2(e:MouseEvent) {
    18.     console.log(e);
    19.   }
    20.  
    21.   isPoetry:boolean = true
    22.   isPoetry2:boolean = true
    23.  
    24.   changePoetry() {
    25.     this.isPoetry2 = false
    26.   }
    27.  
    28.   // 定义数组
    29.   poetrys:Array<string> = [
    30.     '死生契阔，与子成说',
    31.     '执子之手，与子偕老',
    32.     '我心匪石，不可转也',
    33.     '有一美人兮，见之不忘'
    34.   ]
    35.  
    36.   author:number = 2
    37.   changAuthor() {
    38.     this.author = 3
    39.   }
    40. }

    app.component.html

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    25. <p *ngFor="let poetry of poetrys let i = index">
    26.     {{i+1}}、{{poetry}}
    27. p>
    28.  
    30. @for (item of poetrys; track item) {
    31.     <div>{{item}}div>
    32. } @empty {
    33.     Empty list of poetrys
    34. }
    35.   
    36. @for (item of poetrys; track $index) {
    37.     <p>{{$index+1}}、{{item}}p>
    38. }
    39.  
    40. <button (click)="changAuthor()">修改作者button>
    42. <div [ngSwitch]="author">
    43.     <p *ngSwitchCase="1">
    44.         青天有月来几时 我今停杯一问之
    45.     p>
    46.     <p *ngSwitchCase="2">
    47.         明月几时有，把酒问青天
    48.     p>
    49.     <p *ngSwitchDefault>
    50.         江畔何人初见月，江月何年初照人
    51.     p>
    52. div>
    53. <router-outlet>router-outlet>

    运行效果

    5.2、angular 17 @switch 形式

    app.component.html

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    25. <p *ngFor="let poetry of poetrys let i = index">
    26.     {{i+1}}、{{poetry}}
    27. p>
    28.  
    30. @for (item of poetrys; track item) {
    31.     <div>{{item}}div>
    32. } @empty {
    33.     Empty list of poetrys
    34. }
    35.   
    36. @for (item of poetrys; track $index) {
    37.     <p>{{$index+1}}、{{item}}p>
    38. }
    39.  
    40. <button (click)="changAuthor()">修改作者button>
    42. <div [ngSwitch]="author">
    43.     <p *ngSwitchCase="1">
    44.         青天有月来几时 我今停杯一问之
    45.     p>
    46.     <p *ngSwitchCase="2">
    47.         明月几时有，把酒问青天
    48.     p>
    49.     <p *ngSwitchDefault>
    50.         江畔何人初见月，江月何年初照人
    51.     p>
    52. div>
    53.  
    55. @switch (author) {
    56.     @case (1) {
    57.         <p>若非群玉山头见 会向瑶台月下逢p>
    58.     }
    59.     @case (2) {
    60.         <p>春宵一刻值千值千金,花有清香月有阴p>
    61.     }
    62.     @default {
    63.         <p>情催桃李艳，心寄管弦飞p>
    64.     }
    65. }
    66. <router-outlet>router-outlet>

    运行效果

    6、双向数据绑定

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

    在 app.component.ts 文件中引入

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

    并在 @Component 的 import 中添加 FormsModule

    app.component.ts

    1. import { Component } from '@angular/core';
    2. import { CommonModule } from '@angular/common';
    3. import { RouterOutlet } from '@angular/router';
    4. import { FormsModule } from '@angular/forms';
    5.  
    6. @Component({
    7.   selector: 'app-root',
    8.   standalone: true,
    9.   imports: [CommonModule, RouterOutlet, FormsModule],
    10.   templateUrl: './app.component.html',
    11.   styleUrls: ['./app.component.css']
    12. })
    13. export class AppComponent {
    14.   title = 'angular-learn';
    15.   add() {
    16.     alert('晓看天色暮看云，行也思君，坐也思君')
    17.   }
    18.   add2(e:MouseEvent) {
    19.     console.log(e);
    20.   }
    21.  
    22.   isPoetry:boolean = true
    23.   isPoetry2:boolean = true
    24.  
    25.   changePoetry() {
    26.     this.isPoetry2 = false
    27.   }
    28.  
    29.   // 定义数组
    30.   poetrys:Array<string> = [
    31.     '死生契阔，与子成说',
    32.     '执子之手，与子偕老',
    33.     '我心匪石，不可转也',
    34.     '有一美人兮，见之不忘'
    35.   ]
    36.  
    37.   author:number = 2
    38.   changAuthor() {
    39.     this.author = 3
    40.   }
    41.  
    42.   poetryContent:string = '彼采葛兮，一日不见，如三月兮'
    43.  
    44. }

    app.component.html

    1.  
    2. <button (click)="add()">添加button>
    3. <button (click)="add2($event)">添加2button>
    4.  
    5. <p *ngIf="isPoetry">
    6.     山有木兮木有枝，心悦君兮君不知
    7. p>
    8. <button (click)="changePoetry()">修改isPoetry2button>
    9. <ng-container *ngIf="isPoetry2; else elseTemplate">
    10.     <p>与君初相识，犹如故人归p>
    11. ng-container>
    12. <ng-template #elseTemplate>
    13.     <p>愿我如星君如月，夜夜流光相皎洁p>
    14. ng-template>
    15.  
    17. @if (isPoetry2) {
    18.     <p>似此星辰非昨夜，为谁风露立中宵p>
    19. }
    20. @else {
    21.     <p>曾经沧海难为水，除却巫山不是云p>
    22. }
    23.  
    26.  
    29.  
    30. <button (click)="changAuthor()">修改作者button>
    32. <div [ngSwitch]="author">
    33.     <p *ngSwitchCase="1">
    34.         青天有月来几时 我今停杯一问之
    35.     p>
    36.     <p *ngSwitchCase="2">
    37.         明月几时有，把酒问青天
    38.     p>
    39.     <p *ngSwitchDefault>
    40.         江畔何人初见月，江月何年初照人
    41.     p>
    42. div>
    43.  
    45. @switch (author) {
    46.     @case (1) {
    47.         <p>若非群玉山头见 会向瑶台月下逢p>
    48.     }
    49.     @case (2) {
    50.         <p>春宵一刻值千值千金,花有清香月有阴p>
    51.     }
    52.     @default {
    53.         <p>情催桃李艳，心寄管弦飞p>
    54.     }
    55. }
    56.  
    57. <input [(ngModel)]="poetryContent" type="text" style="width: 200px;">
    58. {{poetryContent}}
    59. <router-outlet>router-outlet>

    运行效果

    ​​​​​​​

    至此完

  • 相关阅读:
    控制器连接Profinet转Modbus RTU网关与精密数显温控仪通讯配置案例
    从零构建医疗领域知识图谱的KBQA问答系统：其中7类实体，约3.7万实体，21万实体关系。
    基于Java的音乐网站管理系统设计与实现(源码+lw+部署文档+讲解等)
    vue前端项目中添加独立的静态资源
    测试Mybatis流程
    uni-app小程序开发使用uView，u-model传入富文本内容过长，真机上无法滚动
    目标检测YOLO实战应用案例100讲-基于机器视觉的输电线路小目标检测和缺 陷识别（下）
    【已解决】微信小程序-苹果手机日期解析异常
    C++模板进阶：SFINAE
    字节8年经验之谈 —— 性能测试的流程及常用工具介绍！
  • 原文地址：https://blog.csdn.net/wsjzzcbq/article/details/134350214