Angular 是一個應用設計框架與開發(fā)平臺，旨在創(chuàng)建高效而精致的單頁面應用
Angular 是一個基于 TypeScript 構建的開發(fā)平臺。它包括：一個基于組件的框架，用于構建可伸縮的 Web 應用，一組完美集成的庫，涵蓋各種功能，包括路由、表單管理、客戶端-服務器通信等，一套開發(fā)工具，可幫助你開發(fā)、構建、測試和更新代碼。借助 Angular，無論單人項目還是企業(yè)級應用，你都能獲得平臺帶來的優(yōu)勢。Angular 的設計目標之一就是讓更新更容易，因此你可以用最小的成本升級到最新的 Angular 版本
Angular誕生歷史，AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，是一款構建用戶界面的前端框架，后為Google收購。AngularJS是一個應用設計框架與開發(fā)平臺，用于創(chuàng)建高效、復雜、精致的單頁面應用，通過新的屬性和表達式擴展了 HTML，實現(xiàn)一套框架，多種平臺，移動端和桌面端。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標簽、依賴注入等等。Angular是AngularJS的重寫，Angular2以后官方命名為Angular，2.0以前版本稱為AngularJS。AngularJS是用JavaScript編寫，而Angular采用TypeScript語言編寫，是ECMAScript 6的超集
Angular官網(wǎng)：https://angular.cn/
目錄
1、創(chuàng)建 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、雙向數(shù)據(jù)綁定
1、創(chuàng)建 Angular 項目
Angular 和 Node 版本關系
Angular 需要 Node.js 的活躍 LTS 版或維護期 LTS 版
筆者使用的 node 版本是 20.9.0
安裝?Angular CLI?
如果已經(jīng)安裝過Angular CLI ，可以跳過
npm install -g @angular/cli
創(chuàng)建項目
在新的文件目錄下執(zhí)行下面創(chuàng)建項目命令
ng new angular-learn筆者新建的項目名為?angular-learn
創(chuàng)建完成
使用 vs code 打開項目代碼
筆者創(chuàng)建的 Angular 版本是17
項目結構
運行項目
npm run start
瀏覽器訪問：http://localhost:4200
項目創(chuàng)建成功
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-outlet>
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);
}
}
運行效果
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</button>
<p *ngIf="isPoetry">
山有木兮木有枝，心悅君兮君不知
</p>
<router-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 = true
isPoetry2:boolean = true
changePoetry() {
this.isPoetry2 = false
}
}
app.component.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 形式
<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>曾經(jīng)滄海難為水，除卻巫山不是云</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 = true
isPoetry2:boolean = true
changePoetry() {
this.isPoetry2 = false
}
// 定義數(shù)組
poetrys:Array<string> = [
'死生契闊，與子成說',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉也',
'有一美人兮，見之不忘'
]
}
app.component.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>曾經(jīng)滄海難為水，除卻巫山不是云</p>
}
<!-- for 語句 -->
<p *ngFor="let poetry of poetrys let i = index">
{{i+1}}、{{poetry}}
</p>
<router-outlet></router-outlet>
運行效果
4.2、angular 17 @for 形式
<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>曾經(jīng)滄海難為水，除卻巫山不是云</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
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
}
// 定義數(shù)組
poetrys:Array<string> = [
'死生契闊，與子成說',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉也',
'有一美人兮，見之不忘'
]
author:number = 2
changAuthor() {
this.author = 3
}
}
app.component.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>曾經(jīng)滄海難為水，除卻巫山不是云</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
<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>曾經(jīng)滄海難為水，除卻巫山不是云</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、雙向數(shù)據(jù)綁定
想要實現(xiàn)雙向數(shù)據(jù)綁定，需要引入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 = true
isPoetry2:boolean = true
changePoetry() {
this.isPoetry2 = false
}
// 定義數(shù)組
poetrys:Array<string> = [
'死生契闊，與子成說',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉也',
'有一美人兮，見之不忘'
]
author:number = 2
changAuthor() {
this.author = 3
}
poetryContent:string = '彼采葛兮，一日不見，如三月兮'
}
app.component.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>曾經(jīng)滄海難為水，除卻巫山不是云</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>
運行效果
???????文章來源：http://www.zghlxwxcb.cn/news/detail-753088.html
至此完文章來源地址http://www.zghlxwxcb.cn/news/detail-753088.html
到了這里，關于Angular 使用教程——基本語法和雙向數(shù)據(jù)綁定的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
