devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-06-10 00:09:14

赞

踩

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 文件内容清空，只保留<router-outlet></router-outlet>

在 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)">添加2</button>
  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)">添加2</button>
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  17. @if (isPoetry2) {
  18.     <p>似此星辰非昨夜，为谁风露立中宵</p>
  19. }
  20. @else {
  21.     <p>曾经沧海难为水，除却巫山不是云</p>
  22. }
  23.  
  24. <!-- for 语句 -->
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  17. @if (isPoetry2) {
  18.     <p>似此星辰非昨夜，为谁风露立中宵</p>
  19. }
  20. @else {
  21.     <p>曾经沧海难为水，除却巫山不是云</p>
  22. }
  23.  
  24. <!-- for 语句 -->
  25. <p *ngFor="let poetry of poetrys let i = index">
  26.     {{i+1}}、{{poetry}}
  27. </p>
  28.  
  29. <!-- angular 17 @for 语句 -->
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  17. @if (isPoetry2) {
  18.     <p>似此星辰非昨夜，为谁风露立中宵</p>
  19. }
  20. @else {
  21.     <p>曾经沧海难为水，除却巫山不是云</p>
  22. }
  23.  
  24. <!-- for 语句 -->
  25. <p *ngFor="let poetry of poetrys let i = index">
  26.     {{i+1}}、{{poetry}}
  27. </p>
  28.  
  29. <!-- angular 17 @for 语句 -->
  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>
  41. <!-- angular switch语法 -->
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  17. @if (isPoetry2) {
  18.     <p>似此星辰非昨夜，为谁风露立中宵</p>
  19. }
  20. @else {
  21.     <p>曾经沧海难为水，除却巫山不是云</p>
  22. }
  23.  
  24. <!-- for 语句 -->
  25. <p *ngFor="let poetry of poetrys let i = index">
  26.     {{i+1}}、{{poetry}}
  27. </p>
  28.  
  29. <!-- angular 17 @for 语句 -->
  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>
  41. <!-- angular switch语法 -->
  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.  
  54. <!-- angular17 switch -->
  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)">添加2</button>
  4.  
  5. <p *ngIf="isPoetry">
  6.     山有木兮木有枝，心悦君兮君不知
  7. </p>
  8. <button (click)="changePoetry()">修改isPoetry2</button>
  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. <!-- angular17 写法 -->
  17. @if (isPoetry2) {
  18.     <p>似此星辰非昨夜，为谁风露立中宵</p>
  19. }
  20. @else {
  21.     <p>曾经沧海难为水，除却巫山不是云</p>
  22. }
  23.  
  24. <!-- for 语句 -->
  25. <!-- <p *ngFor="let poetry of poetrys let i = index">
  26.     {{i+1}}、{{poetry}}
  27. </p> -->
  28.  
  29. <!-- angular 17 @for 语句 -->
  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>
  41. <!-- angular switch语法 -->
  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.  
  54. <!-- angular17 switch -->
  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.  
  67. <input [(ngModel)]="poetryContent" type="text" style="width: 200px;">
  68. {{poetryContent}}
  69. <router-outlet></router-outlet>

运行效果

​​​​​​​

至此完

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/696348
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号