0
Angular（2+）教程
                           
天天向上
发布： 2025-01-01 18:09:32
原创
895 人浏览过

Angular（2+）是由 Google 开发的一个现代前端框架，用于构建动态的、可扩展的 Web 应用。与 AngularJS（1.x）相比，Angular 采用了更加现代的架构和开发方式，包括模块化、组件化、TypeScript 支持等。

1. 环境准备

首先，你需要在本地开发环境中安装 Node.js 和 Angular CLI。

1.1 安装 Node.js 和 npm

Angular 依赖于 Node.js 和 npm（Node.js 的包管理器），你需要首先安装它们。

  1. 下载 Node.js 并安装。
  2. 安装完成后，验证 Node.js 和 npm 是否安装成功：
   node -v
   npm -v

1.2 安装 Angular CLI

Angular CLI 是一个命令行工具，用于帮助创建和管理 Angular 项目。安装命令如下：

npm install -g @angular/cli

安装完成后，你可以通过以下命令来检查 Angular CLI 版本：

ng version

2. 创建一个新的 Angular 项目

使用 Angular CLI 创建一个新的项目：

ng new my-angular-app
  • my-angular-app 是项目的名称。你可以根据需要替换为你自己的名称。
  • 在创建过程中，你会被问到是否使用 Angular 路由、选择样式表（CSS、SCSS 等）等选项。

创建完成后，进入项目目录并启动开发服务器：

cd my-angular-app
ng serve

访问 http://localhost:4200 即可看到应用运行的首页。

3. Angular 项目结构

一个典型的 Angular 项目结构如下：

my-angular-app/
├── e2e/                  # 端到端测试
├── node_modules/         # 项目的依赖包
├── src/                  # 源代码
│   ├── app/              # 应用的核心代码
│   ├── assets/           # 静态资源（如图片、字体等）
│   ├── environments/     # 环境配置
│   ├── index.html        # 页面入口文件
│   ├── main.ts           # 应用的入口文件
│   ├── styles.css        # 全局样式
├── angular.json          # Angular 配置文件
├── package.json          # 项目依赖文件
└── tsconfig.json         # TypeScript 配置文件

4. 组件（Component）

Angular 的核心是 组件（Component）。每个组件都包含：

  • 模板（HTML）：定义组件的视图。
  • 样式（CSS/SCSS）：定义组件的样式。
  • 类（TypeScript）：定义组件的行为和数据。

4.1 创建组件

使用 Angular CLI 创建一个新组件：

ng generate component my-component

这会在 src/app/ 目录下生成一个新的组件文件夹，里面包括：

  • my-component.component.ts：组件类，定义数据和行为。
  • my-component.component.html：组件的模板文件。
  • my-component.component.css：组件的样式文件。
  • my-component.component.spec.ts：组件的测试文件。

4.2 组件示例

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 MyComponent {
  message: string = 'Hello, Angular!';
}

my-component.component.html：

<h1>{{ message }}</h1>

在 app.component.html 中使用 app-my-component 组件：

<app-my-component></app-my-component>

5. 模块（Module）

Angular 应用是由多个模块（Module）组成的，最重要的是根模块（AppModule）。一个模块将相关的组件、指令、管道和服务组织在一起。

5.1 创建模块

你可以使用 Angular CLI 来创建新的模块：

ng generate module my-module

模块文件通常位于 src/app/my-module 目录中。模块文件通常包含：

  • my-module.module.ts：模块类，定义模块中的组件和服务。

5.2 导入模块

在 app.module.ts 中导入其他模块或组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [AppComponent, MyComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. 服务（Services）和依赖注入（DI）

服务是 Angular 中用于封装业务逻辑和数据处理的类。Angular 使用 依赖注入（DI）模式来管理和提供服务。

6.1 创建服务

使用 CLI 创建服务：

ng generate service my-service

服务文件通常包括：

  • my-service.service.ts：定义服务的逻辑。

my-service.service.ts 示例：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'Data from service';
  }
}

6.2 使用服务

在组件中注入并使用服务：

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ data }}</h1>`
})
export class AppComponent {
  data: string;

  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

7. 路由（Routing）

Angular 的路由功能可以让你为不同的 URL 显示不同的组件。你可以使用 RouterModule 来配置应用中的路由。

7.1 配置路由

在 app-routing.module.ts 文件中配置路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在 app.module.ts 中导入路由模块：

import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [HomeComponent, AboutComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

7.2 在模板中使用路由链接

使用 routerLink 指令来导航到不同的路由：

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

8. 管道（Pipes）

Angular 管道用于转换数据，例如格式化日期、货币等。

8.1 使用内置管道

Angular 提供了许多内置管道，如 date、currency 和 uppercase。

<p>{{ 12345.6789 | currency }}</p>
<p>{{ today | date:'fullDate' }}</p>
<p>{{ 'hello' | uppercase }}</p>

8.2 自定义管道

你可以创建自定义管道来格式化数据：

ng generate pipe my-pipe

my-pipe.pipe.ts 示例：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

在模板中使用自定义管道：

<p>{{ 'hello' | reverse }}</p>

总结

Angular（2+）是一个现代的、功能强大的框架，适用于构建大型的、复杂的单页应用。它通过模块化、组件化、服务和依赖注入、路由等特性，帮助开发者高效组织和管理应用的不同部分。掌握这些核心概念后，你可以开始构建自己的 Angular 应用。

发表回复 0

Your email address will not be published. Required fields are marked *