长春网站建设方案,深圳做营销型网站,免费建站个人网站,上海建网站公司Angular 是一个应用设计框架与开发平台#xff0c;旨在创建高效而精致的单页面应用
Angular 是一个基于 TypeScript 构建的开发平台。它包括#xff1a;一个基于组件的框架#xff0c;用于构建可伸缩的 Web 应用#xff0c;一组完美集成的库#xff0c;涵盖各种功能…Angular 是一个应用设计框架与开发平台旨在创建高效而精致的单页面应用
Angular 是一个基于 TypeScript 构建的开发平台。它包括一个基于组件的框架用于构建可伸缩的 Web 应用一组完美集成的库涵盖各种功能包括路由、表单管理、客户端-服务器通信等一套开发工具可帮助你开发、构建、测试和更新代码。借助 Angular无论单人项目还是企业级应用你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易因此你可以用最小的成本升级到最新的 Angular 版本
Angular诞生历史AngularJS诞生于2009年由Misko Hevery 等人创建是一款构建用户界面的前端框架后为Google收购。AngularJS是一个应用设计框架与开发平台用于创建高效、复杂、精致的单页面应用通过新的属性和表达式扩展了 HTML实现一套框架多种平台移动端和桌面端。AngularJS有着诸多特性最为核心的是MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular是AngularJS的重写Angular2以后官方命名为Angular2.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标签并按下面代码添加点击事件
button (click)add()添加/button
router-outlet/router-outlet然后在 app.component.ts 文件中写add 事件内容
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 button (click)add()添加/button
button (click)add2($event)添加2/button
router-outlet/router-outletapp.component.ts
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
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 判断 button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/prouter-outlet/router-outlet运行效果 3.2、if else 形式
app.component.ts
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 trueisPoetry2:boolean truechangePoetry() {this.isPoetry2 false}
}app.component.html button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-templaterouter-outlet/router-outlet运行效果 3.3、angular 17 if 形式 button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}router-outlet/router-outlet运行效果 4、for 语句
4.1、*ngFor 形式
app.component.ts
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 trueisPoetry2:boolean truechangePoetry() {this.isPoetry2 false}// 定义数组poetrys:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]
}app.component.html button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}!-- for 语句 --
p *ngForlet poetry of poetrys let i index{{i1}}、{{poetry}}
/p
router-outlet/router-outlet运行效果 4.2、angular 17 for 形式 button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}!-- for 语句 --
p *ngForlet poetry of poetrys let i index{{i1}}、{{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{{$index1}}、{{item}}/p
}
router-outlet/router-outlet5、switch 语句
5.1、ngSwitch 形式
app.component.ts
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 trueisPoetry2:boolean truechangePoetry() {this.isPoetry2 false}// 定义数组poetrys:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]author:number 2changAuthor() {this.author 3}
}app.component.html button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}!-- for 语句 --
p *ngForlet poetry of poetrys let i index{{i1}}、{{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{{$index1}}、{{item}}/p
}button (click)changAuthor()修改作者/button
!-- angular switch语法 --
div [ngSwitch]authorp *ngSwitchCase1青天有月来几时 我今停杯一问之/pp *ngSwitchCase2明月几时有把酒问青天/pp *ngSwitchDefault江畔何人初见月江月何年初照人/p
/div
router-outlet/router-outlet运行效果 5.2、angular 17 switch 形式
app.component.html button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}!-- for 语句 --
p *ngForlet poetry of poetrys let i index{{i1}}、{{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{{$index1}}、{{item}}/p
}button (click)changAuthor()修改作者/button
!-- angular switch语法 --
div [ngSwitch]authorp *ngSwitchCase1青天有月来几时 我今停杯一问之/pp *ngSwitchCase2明月几时有把酒问青天/pp *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 文件中引入
import { FormsModule } from angular/forms;
并在 Component 的 import 中添加 FormsModule app.component.ts
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 trueisPoetry2:boolean truechangePoetry() {this.isPoetry2 false}// 定义数组poetrys:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]author:number 2changAuthor() {this.author 3}poetryContent:string 彼采葛兮一日不见如三月兮}app.component.html button (click)add()添加/button
button (click)add2($event)添加2/buttonp *ngIfisPoetry山有木兮木有枝心悦君兮君不知
/p
button (click)changePoetry()修改isPoetry2/button
ng-container *ngIfisPoetry2; else elseTemplatep与君初相识犹如故人归/p
/ng-container
ng-template #elseTemplatep愿我如星君如月夜夜流光相皎洁/p
/ng-template!-- angular17 写法 --
if (isPoetry2) {p似此星辰非昨夜为谁风露立中宵/p
}
else {p曾经沧海难为水除却巫山不是云/p
}!-- for 语句 --
!-- p *ngForlet poetry of poetrys let i index{{i1}}、{{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{{$index1}}、{{item}}/p
} --button (click)changAuthor()修改作者/button
!-- angular switch语法 --
div [ngSwitch]authorp *ngSwitchCase1青天有月来几时 我今停杯一问之/pp *ngSwitchCase2明月几时有把酒问青天/pp *ngSwitchDefault江畔何人初见月江月何年初照人/p
/div!-- angular17 switch --
switch (author) {case (1) {p若非群玉山头见 会向瑶台月下逢/p}case (2) {p春宵一刻值千值千金,花有清香月有阴/p}default {p情催桃李艳心寄管弦飞/p}
}input [(ngModel)]poetryContent typetext stylewidth: 200px;
{{poetryContent}}
router-outlet/router-outlet运行效果
至此完
