Angular是一种用于构建现代Web应用程序的开源JavaScript框架。它由Google开发并维护，已成为前端开发者中最受欢迎的框架之一。本篇博客将介绍Angular的基本概念，并提供一些实例解析，帮助读者入门Angular框架。
什么是Angular？
Angular是一个以组件化思想构建Web应用程序的框架。它采用了TypeScript（一种超集JavaScript语言）作为开发语言，并提供了大量用于简化开发过程的功能。Angular的核心概念之一是组件，组件是应用程序中的一个可复用的部分，包含了HTML模板、样式和逻辑。Angular通过使用组件来管理和展示用户界面。
安装Angular
要开始使用Angular，首先需要安装Node.js和npm（Node包管理器）。安装完成后，可以通过以下命令安装Angular CLI（命令行界面）：
npm install -g @angular/cli
创建Angular项目
在安装完成Angular CLI后，可以使用以下命令创建一个新的Angular项目：
ng new my-project
这将创建一个名为my-project的新目录，并在其中生成一个基本的Angular项目。进入项目目录：
cd my-project
编写第一个组件
在Angular中，一个组件由三个文件组成：HTML模板、CSS样式和组件类。为了创建一个简单的组件，可以使用Angular CLI提供的命令：
ng generate component my-component
这将在项目中生成一个名为my-component的新组件。打开src/app/my-component目录，可以看到三个文件：my-component.component.html、my-component.component.css和my-component.component.ts。
在my-component.component.html文件中，可以编写组件的HTML模板，例如：
<div>
<h1>Welcome to my component!</h1>
<p>This is a simple Angular component.</p>
</div>
在my-component.component.css文件中，可以编写组件的CSS样式，例如：
div {
background-color: lightgray;
padding: 20px;
}
在my-component.component.ts文件中，可以定义组件的逻辑和行为，例如：
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
// 组件的逻辑和行为
}
在应用程序中使用组件
要在Angular应用程序中使用组件，需要在应用程序的主模块中将组件添加到declarations数组中。打开src/app/app.module.ts文件，在declarations数组中添加组件的引用：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [
AppComponent,
MyComponentComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在src/app/app.component.html文件中，可以添加组件的选择器来展示组件：
<app-my-component></app-my-component>
运行应用程序
要运行Angular应用程序，可以使用以下命令：
ng serve
这将启动一个本地开发服务器，并在浏览器中打开应用程序。可以访问http://localhost:4200查看应用程序的界面，应该能够看到my-component组件的内容。
实例解析：创建一个简单的任务列表应用程序
让我们通过一个实例来进一步了解Angular。我们将创建一个简单的任务列表应用程序，其中用户可以添加、删除和完成任务。为了简化示例，我们将只使用一个组件。
创建一个新组件
首先，使用以下命令创建一个名为task-list的新组件：
ng generate component task-list
编写组件的模板
在task-list.component.html文件中，添加以下内容：
<div>
<h2>Task List</h2>
<input placeholder="New task" [(ngModel)]="newTask">
<button (click)="addTask()">Add Task</button>
<ul>
<li *ngFor="let task of tasks">
<input type="checkbox" [(ngModel)]="task.checked">
<span [class.completed]="task.checked">{{task.name}}</span>
<button (click)="deleteTask(task)">Delete</button>
</li>
</ul>
</div>
在这个模板中，我们添加了一个用于显示任务列表的ul元素。每个任务列表项都包含一个复选框、任务名称和一个删除按钮。同时，我们还添加了一个输入框和一个按钮，用于添加新的任务。
编写组件的类
在task-list.component.ts文件中，添加以下内容：
import { Component } from '@angular/core';
@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
tasks: { name: string, checked: boolean }[] = [];
newTask: string = "";
addTask() {
if (this.newTask.trim() !== "") {
this.tasks.push({ name: this.newTask, checked: false });
this.newTask = "";
}
}
deleteTask(task: { name: string, checked: boolean }) {
this.tasks = this.tasks.filter(item => item !== task);
}
}
在这个组件类中，我们定义了一个tasks数组，用于存储所有的任务。同时，我们还定义了一个newTask变量，用于存储用户输入的新任务。addTask方法用于添加新任务到任务列表中，deleteTask方法用于删除任务。
使用组件
打开src/app/app.component.html文件，将<app-task-list></app-task-list>添加到模板中：
<div>
<h1>My Task App</h1>
<app-task-list></app-task-list>
</div>
保存并运行应用程序，这时应该能够看到一个简单的任务列表应用程序。可以尝试添加、删除和完成任务，界面会实时更新。
总结
本篇博客介绍了Angular框架的基本概念，并提供了一个简单的实例来帮助读者入门Angular。通过学习Angular，开发者可以构建出更加现代、高效和可维护的Web应用程序。希望这篇博客对你有所帮助，祝你在学习和使用Angular的过程中取得成功！
参考资料：
本文来自极简博客，作者：橙色阳光，转载请注明原文链接：Angular框架入门教程及实例解析?
