不久前，我正在给客户打电话，当谈到 Angular 的话题时，他皱着眉头对此嗤之以鼻。

“现在谁使用 Angular？” 他说。

我没有做好准备。后来发现他是 Vue 人，这很好——每个人都喜欢他们熟悉的东西。但后来我开始思考，Angular 的开发者是谁？为什么人们选择 Angular 而不是 React 等更简单的东西？

老实说，Angular 并不是最容易上手的东西。毕竟它是一个框架，所以你需要遵守一些事情才能发挥作用。

但 Angular 仍然有它的优势。

Angular 的优势

对于外行来说，Angular 显得很麻烦，在开始使用这个框架之前需要大量的知识。

但让我们面对现实吧。一般情况下都是如此。当我们需要学习新事物时，我们中的一些人的大脑中有一个自动电阻器，它对邓宁-克鲁格效应的感受最强烈。

随着时间的推移，当我们习惯了自己的舒适区时，学习新事物会变得更加烦人，尤其是当我们应该成为专家时。

但在某种程度上，我们都是菜鸟，在框架、库和想法之间传递的一般概念知识越多，在攀登新事物的学习曲线时就越容易克服这种感觉。

angular要学多久,angular使用教程视频

我离题了。那么人们为什么使用 Angular 呢？

Angular 使用基于组件的架构，可以更轻松地将代码组织成小块，并清晰地分离关注点。模块化是 Angular 框架的基础。

你可以对 React 和 Vue 说同样的事情，但它的实现方式是 Angular 的不同之处。

Angular 固执己见。这意味着如果你想做某事，就必须以某种方式去做。没有任何谈判的余地。同时，React 是一个库，这意味着事物的实现方式具有灵活性，但也可能导致可变性。

对于小型项目，React 非常棒，因为你可以按照自己的意愿做任何事情。但随着项目的发展和团队中不同意见的冲突，这可能会导致关于某些模式和实现应该是什么样子的冲突。

一个人的最佳实践版本可能与另一个固执己见的团队成员不一致。我们是人类。它发生了。 React 和 Vue 用于大型项目，所以这并不是世界末日——只是团队需要更多的谈判和标准化。

Angular 通过提供如何完成事情的蓝图来消除这个问题。

但肯定的是，它不仅仅是强制模块化？

是的。就在这里。

依赖注入是 Angular 的另一个强大功能。尽管 React 近年来（在某种程度上）已经迎头赶上，但 Angular 处理依赖项注入的方式使得处理依赖项的过程变得无缝。

但什么是依赖注入呢？

依赖注入（DI）是软件开发中使用的一种设计模式，有助于解耦组件及其依赖关系。简单来说，DI 是一种为组件或类提供其运行所需的依赖项的方法，而不是让组件自己实例化或创建这些依赖项。

在 Angular 中，依赖注入是一项核心功能，它简化了应用程序中管理依赖关系的过程。 Angular 的 DI 系统是围绕注入器和提供者的概念构建的。注入器负责创建和管理依赖项的实例，而提供程序用于配置如何创建这些依赖项。

这就是为什么依赖注入很重要

解耦：DI 促进组件及其依赖项之间的松耦合，使修改、测试和维护代码变得更加容易。通过注入依赖项，组件不会紧密绑定到特定的实现，这使得在进行更改时具有更大的灵活性。

可重用性：借助 DI，您可以轻松地在应用程序的不同部分重用和共享服务或其他依赖项的实例。这减少了代码重复并产生更干净、更有组织的代码库。

可测试性：DI 使为组件或类编写单元测试变得更加容易，因为您可以轻松地用模拟对象替换真正的依赖项。这使您可以隔离正在测试的组件或类，并专注于其功能，而不用担心其依赖项的行为。

下面是一个简单的例子，展示了 Angular 中的依赖注入：

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

@Injectable()
export class UserService {
  getUsers() {
    // Logic to fetch users from an API or other data source
  }
}

在此示例中，我们定义一个带有 getUsers 方法的 UserService 类。 @Injectable 装饰器告诉 Angular 该类可以用作依赖项，并且应该由 DI 系统管理。

现在，让我们创建一个需要 UserService 来获取用户数据的组件：

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `,
})
export class UsersComponent implements OnInit {
  users = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users = this.userService.getUsers();
  }
}

在此 UsersComponent 中，我们通过将 UserService 添加为构造函数中的参数来注入它。 Angular 的 DI 系统自动处理 UserService 实例的创建并将其提供给组件。这样，我们就可以在组件初始化时使用 userService 实例来获取用户，而无需担心手动实例化或管理 UserService。

通过在 Angular 中使用依赖注入，您可以创建更清晰、更可维护和可测试的代码，最终导致更健壮和可扩展的应用程序。

相比之下，React 和 Vue 处理依赖注入的方式与 Angular 不同。它们更轻量级且不那么固执己见，因此它们不像 Angular 那样提供内置的依赖注入系统。然而，开发人员仍然可以使用不同的技术和库在 React 和 Vue 应用程序中实现依赖注入。

React 使用“props”在组件树中传递数据和依赖项。虽然这适用于简单的应用程序，但随着应用程序的增长，它会变得更难以管理。为了处理大型 React 应用程序中的依赖注入，开发人员可以使用第三方库（例如 InversifyJS）或依赖 React 的上下文 API，它允许跨组件树共享值，而无需通过 props 传递它们。

// createContext
import React, { createContext, useContext } from 'react';
import UserService from './UserService';

const UserServiceContext = createContext(new UserService());

function Users() {
  const userService = useContext(UserServiceContext);
  // Use userService to fetch user data
}

同时，Vue 有一个名为“provide/inject”的内置机制来处理依赖注入。虽然它不如 Angular 的 DI 系统强大，但它允许在组件之间共享数据和依赖关系，而无需通过 props 传递它们。

// In a parent component or Vue instance
import UserService from './UserService';

export default {
  provide: {
    userService: new UserService(),
  },
};

// In a child component
export default {
  inject: ['userService'],
  // Use userService to fetch user data
};

Angular 的依赖注入系统比 React 和 Vue 更先进、更固执。它内置于框架中，可以轻松地在整个应用程序中一致地管理依赖项。 Angular 的 DI 系统使用装饰器、分层注入器和提供者，为创建和管理依赖项提供了更大的灵活性和控制力。