Angular 框架入门教程：从安装到路由、服务与状态管理详解

一、引言

在前端开发领域，Angular 是一个强大且流行的框架。它由 Google 维护，基于 TypeScript，采用模块化设计，提供了组件化开发、依赖注入、路由、表单处理等丰富功能，旨在帮助开发者构建高效、可维护的单页应用程序（SPA），提升开发效率和用户体验。

二、安装 Angular

安装 Node.js 和 npm：Angular 依赖 Node.js 和 npm 运行。从 Node.js 官方网站下载并安装它们。
安装 Angular CLI：使用命令npm install -g @angular/cli安装 Angular CLI，安装完成后可用ng --version检查版本。

三、创建 Angular 项目

使用 Angular CLI 创建项目：ng new my-app，Angular CLI 会自动创建项目结构并安装依赖项。
运行项目：进入项目目录，执行cd my-app后再运行ng serve，开发服务器启动后可在浏览器中通过http://localhost:4200访问应用程序。

四、Angular 项目结构

1.项目目录结构

e2e/：端到端测试目录。
node_modules/：项目依赖的第三方模块。
src/：项目源代码目录。
.angular-cli.json：Angular CLI 的配置文件。
package.json：项目的包管理文件。
tsconfig.json：TypeScript 的配置文件。

2.主要文件介绍

app.module.ts：定义应用程序的模块。
app.component.ts：定义应用程序的根组件。
index.html：应用程序的入口文件。
main.ts：应用程序的启动文件。

五、Angular 组件

1.组件概念

组件是包含 HTML 模板、TypeScript 代码和 CSS 样式的独立单元，负责显示数据、处理用户输入和与其他组件交互。

2.创建组件

使用ng generate component my-component可创建新组件，Angular CLI 会在src/app/下创建包含模板、代码和样式文件的文件夹。

3.组件模板

定义组件外观和布局，可使用 Angular 的模板语法显示数据、绑定事件和使用指令。例如：

html 复制代码

<div>
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <button (click)="onClick()">Click me</button>
</div>

4.组件类

用 TypeScript 文件定义组件行为和逻辑，可定义属性、方法和生命周期钩子。例如：

TypeScript 复制代码

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'My Component';
  description = 'This is my component.';

  onClick() {
    console.log('Button clicked!');
  }
}

六、Angular 模块

模块概念：在 Angular 中，模块是组织代码的方式，将相关组件、服务、指令等组合在一起，形成独立功能单元，提高代码可维护性和可扩展性，方便复用。
- declarations：声明模块中包含的组件、指令和管道。
- imports：导入其他模块以使用其中功能。
- providers：提供服务，可在模块中的组件注入使用。
- exports：导出模块中的部分内容供其他模块使用。
模块代码示例：

TypeScript 复制代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule
  ],
  exports: [MyComponent]
})
export class MyModule { }

七、Angular 路由配置方法

1.路由概念

路由是 Angular 应用程序的导航机制，定义不同 URL 路径和对应的组件，让用户通过 URL 访问不同页面。

2.配置路由

使用RouterModule.forRoot()方法配置路由。例如：

TypeScript 复制代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } 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 { }

3.路由参数

可在路由中定义参数，在组件中通过注入ActivatedRoute服务获取参数值。例如：

TypeScript 复制代码

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      const id = params['id'];
      console.log(id);
    });
  }
}

4.路由导航守卫

可控制用户导航行为，如在用户未登录时阻止访问某些页面。Angular 提供多种导航守卫，如CanActivate、CanActivateChild、CanDeactivate等。例如：

TypeScript 复制代码

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    if (isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

在路由配置中使用导航守卫

TypeScript 复制代码

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

5.懒加载模块

对于大型应用程序，可使用懒加载模块提高性能，只有在用户访问特定路由时才加载模块。
创建懒加载模块：

TypeScript 复制代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  declarations: [LazyComponent]
})
export class LazyModule { }

在主路由配置中使用懒加载模块：

TypeScript 复制代码

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) }
];

八、Angular 服务

1.服务概念

服务是可复用代码块，可封装业务逻辑、数据访问等通用功能，在不同组件间共享。

2.创建服务

使用ng generate service my-service创建服务，Angular CLI 会在src/app/下创建服务的 TypeScript 文件。

3.注入服务

在组件中通过依赖注入获取服务实例。例如：

TypeScript 复制代码

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) { }
}

4.使用服务

服务可提供数据存储、网络请求等功能。例如：

TypeScript 复制代码

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private data: string[] = [];

  addData(item: string) {
    this.data.push(item);
  }

  getData() {
    return this.data;
  }
}

在组件中使用服务：

TypeScript 复制代码

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) { }

  addItem() {
    const newItem = 'New item';
    this.myService.addData(newItem);
    console.log(this.myService.getData());
  }
}

九、Angular 表单处理

1.模板驱动表单

通过在模板中使用表单指令实现表单验证和提交。例如：

html 复制代码

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input type="text" name="username" ngModel required>
  <input type="password" name="password" ngModel required>
  <button type="submit">Submit</button>
</form>

在组件中处理表单提交：

TypeScript 复制代码

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  onSubmit(form: any) {
    if (form.valid) {
      console.log(form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

2.响应式表单

在组件类中创建表单模型实现表单验证和提交。例如：

TypeScript 复制代码

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  myForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

在模板中绑定表单模型：

html 复制代码

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
  <button type="submit">Submit</button>
</form>

十、Angular 状态管理

1.状态管理概念

在复杂应用程序中，多个组件可能需要共享和同步数据状态，状态管理用于管理应用程序状态，确保数据一致性和可维护性。

2.NgRx 状态管理库

NgRx 是流行的 Angular 状态管理库，基于 Redux 理念，提供可预测、可维护的方式管理应用程序状态，包含actions（定义动作）、reducers（根据动作更新状态）、effects（处理异步操作并触发动作）、selectors（从状态中选择特定数据）。例如：
定义状态模型：

TypeScript 复制代码

export interface AppState {
  counter: number;
}

export const initialState: AppState = {
  counter: 0
};

定义动作：

TypeScript 复制代码

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export class IncrementAction implements Action {
  readonly type = INCREMENT;
}

export class DecrementAction implements Action {
  readonly type = DECREMENT;
}

定义 reducer：

TypeScript 复制代码

import { AppState, initialState } from './app.state';
import { INCREMENT, DECREMENT } from './app.actions';

export function reducer(state = initialState, action: any): AppState {
  switch (action.type) {
    case INCREMENT:
      return {...state, counter: state.counter + 1 };
    case DECREMENT:
      return {...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

在模块中配置 NgRx：

TypeScript 复制代码

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { reducer } from './app.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ appState: reducer })
  ]
})
export class AppModule { }

十一、总结

本文介绍了 Angular 框架的基本概念、安装和使用方法，包括项目结构、组件、模块、路由配置、服务、表单处理和状态管理等方面。通过学习本文，可对 Angular 框架有初步了解，并能使用 Angular CLI 创建、开发和维护 Angular 应用程序。Angular 是功能强大的前端框架，若想深入学习，可参考 Angular 的官方文档和其他相关资源。