前端学习系列（10）：Angular进阶——深入服务与路由

前端学习系列（10）：Angular进阶——深入服务与路由

一、回顾与引入

上一期我们深入研究了React的进阶知识，包括复杂的组件通信和Redux状态管理。本期我们将再次回到Angular框架，进一步探索Angular中服务与路由的高级特性。这些知识对于构建功能强大、可维护的Angular应用至关重要。

二、Angular服务的高级特性

2.1 依赖注入的深入理解

在Angular中，依赖注入（Dependency Injection，简称DI）是一项核心特性。它允许将一个对象的依赖关系传递给该对象，而不是在对象内部创建依赖。这使得代码更具可测试性、可维护性和可扩展性。

假设我们有一个UserService，用于处理用户相关的逻辑，并且该服务依赖于HttpClient来进行HTTP请求：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('/api/users');
  }
}

在上述代码中，UserService通过构造函数接收HttpClient的实例，Angular会自动创建并注入这个实例。providedIn: 'root'表示该服务在应用的根模块中提供，整个应用都可以使用。

2.2 服务的共享与复用

服务可以在多个组件之间共享，实现逻辑的复用。例如，我们创建一个SharedService，用于存储和管理一些共享数据：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private sharedData: string = '初始共享数据';

  getSharedData() {
    return this.sharedData;
  }

  setSharedData(data: string) {
    this.sharedData = data;
  }
}

然后在不同的组件中使用这个服务：

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app - component - a',
  templateUrl: './component - a.component.html',
  styleUrls: ['./component - a.component.css']
})
export class ComponentAComponent {
  constructor(private sharedService: SharedService) {}

  updateSharedData() {
    this.sharedService.setSharedData('新的共享数据');
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app - component - b',
  templateUrl: './component - b.component.html',
  styleUrls: ['./component - b.component.css']
})
export class ComponentBComponent {
  sharedData: string;

  constructor(private sharedService: SharedService) {
    this.sharedData = this.sharedService.getSharedData();
  }
}

这样，ComponentAComponent和ComponentBComponent可以通过SharedService共享和管理数据，避免了在多个组件中重复编写相同的逻辑。

三、Angular路由的高级配置

3.1 路由守卫的使用

路由守卫用于在导航发生时进行权限验证、数据预取等操作。常见的路由守卫有CanActivate、CanDeactivate、Resolve等。

以CanActivate为例，假设我们有一个需要用户登录才能访问的页面，我们可以创建一个路由守卫来验证用户的登录状态：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

在路由配置中使用这个守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { AuthGuard } from './auth.guard';

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

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

这样，当用户尝试访问/dashboard时，AuthGuard会检查用户的登录状态，如果未登录则会导航到/login页面。

3.2 嵌套路由的实现

嵌套路由允许在一个组件的模板中定义子路由。例如，我们有一个ProductComponent，它包含产品列表和产品详情两个子页面，我们可以通过嵌套路由来实现：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductComponent } from './product.component';
import { ProductListComponent } from './product - list.component';
import { ProductDetailComponent } from './product - detail.component';

const productRoutes: Routes = [
  {
    path: 'products',
    component: ProductComponent,
    children: [
      {
        path: '',
        component: ProductListComponent
      },
      {
        path: ':id',
        component: ProductDetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(productRoutes)],
  exports: [RouterModule]
})
export class ProductRoutingModule {}

在ProductComponent的模板中，我们需要添加<router - outlet>来显示子路由的内容：

<div>
  <h2>产品模块</h2>
  <router - outlet></router - outlet>
</div>

这样，当访问/products时会显示产品列表，访问/products/1时会显示ID为1的产品详情。

四、利用Angular服务和路由构建功能完备、安全可靠的单页应用程序

4.1 综合应用服务和路由实现业务逻辑

结合服务和路由，我们可以构建一个功能完备的单页应用程序。例如，在一个电商应用中，我们可以使用服务来管理用户的购物车数据、处理订单逻辑，使用路由来实现页面的导航，包括商品列表页、商品详情页、购物车页、结算页等。

在商品详情页，通过服务获取商品的详细信息，并提供添加到购物车的功能：

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { CartService } from './cart.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app - product - detail',
  templateUrl: './product - detail.component.html',
  styleUrls: ['./product - detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  product: any;

  constructor(
    private productService: ProductService,
    private cartService: CartService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const productId = this.route.snapshot.params['id'];
    this.product = this.productService.getProductById(productId);
  }

  addToCart() {
    this.cartService.addProductToCart(this.product);
  }
}

在购物车页，通过服务获取购物车数据并进行展示和结算操作：

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app - cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  cartItems: any[];

  constructor(private cartService: CartService) {}

  ngOnInit() {
    this.cartItems = this.cartService.getCartItems();
  }

  checkout() {
    // 处理结算逻辑
  }
}

通过路由配置，实现不同页面之间的导航：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product - list.component';
import { ProductDetailComponent } from './product - detail.component';
import { CartComponent } from './cart.component';

const routes: Routes = [
  {
    path: 'products',
    component: ProductListComponent
  },
  {
    path: 'products/:id',
    component: ProductDetailComponent
  },
  {
    path: 'cart',
    component: CartComponent
  }
];

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

4.2 确保应用程序的安全性和可靠性

通过路由守卫和服务中的数据验证机制，可以确保应用程序的安全性和可靠性。例如，在进行订单结算时，服务中可以验证用户的登录状态、购物车数据的完整性等；在路由守卫中，可以防止未授权用户访问敏感页面。同时，合理使用依赖注入可以提高代码的可测试性，通过单元测试和集成测试确保服务和组件的功能正确性，从而提升整个应用程序的稳定性。

五、总结与下期预告

本期我们深入学习了Angular服务和路由的高级特性，并通过实际案例展示了如何利用它们构建功能完备、安全可靠的单页应用程序。

下期预告
《前端性能优化实战》你将学到：

• 前端性能指标及评估工具的使用
• 从代码层面、资源加载、页面渲染等方面进行性能优化的具体方法
• 构建高性能前端应用的最佳实践和常见误区

---

📢 系列提示：本系列持续更新中，建议点👍/收藏本篇文章，关注作者及时获取更新提醒。有任何问题欢迎评论区留言交流！