在前端开发中，我们经常会使用各种框架和库来帮助我们更快速地构建高质量的应用程序。其中，Angular 是一种非常流行的前端框架之一。但是，如果你之前使用过 AngularJS（即 Angular1），你可能会发现过渡到新版的 Angular 时会有很多困难。为了帮助这些用户，Angular 团队推出了一个 npm 包叫做 @angular/upgrade，用于 Angular 1.x 和 Angular 2+（包括 10.x）之间的升级工作。
在本篇文章中，我们将介绍如何使用 @angular/upgrade 包来快速升级你的 AngularJS 应用程序到新版的 Angular。
什么是 @angular/upgrade 包
@angular/upgrade 包是 Angular 团队为升级 AngularJS 应用程序到新版 Angular 而开发的一个 npm 包。使用该包，你可以将原有的 AngularJS 组件和服务以及相关逻辑代码逐步迁移到新版 Angular 项目中，从而有效地减少重构工作量。
安装 @angular/upgrade 包
要使用 @angular/upgrade 包，首先需要在项目中安装该包。可以通过以下命令来安装：
--- ------- ---------------- ------
这将会安装 @angular/upgrade 包到你的项目中，并将其添加到项目的依赖中。
在 Angular 中使用 AngularJS 组件
在使用 @angular/upgrade 包之前，需要在 Angular 中引入 AngularJS，并将其设置为 Angular 模块的依赖。具体步骤如下：
- 在 app.module.ts 文件中引入 AngularJS：
------ - -- ------- ---- ----------
- 在 AppModule 的 providers 数组中添加 AngularJS：
-----------
-------- ----------------
---------- -
- -------- --------- ------------ ------------ --
- -------- ----------- --------- --------------- --
- -------- ------------ --------- ------------------------ --
- -------- ----------------- --------- ---------------------------------------------- -
-
--
------ ----- --------- - -在这里，我们将 $rootScope 作为 $scope 的别名，使用 AngularJS 编译器和注入器，以及 $templateCache 服务。
- 在组件中使用 AngularJS 组件
现在，我们可以在新版 Angular 中使用 AngularJS 组件了。在组件的构造函数中，我们需要使用 $injector 服务来获取 AngularJS 的组件：
------ - ---------- ------- ------ - ---- ----------------
------------
--------- -------------------
--------- ---------------------------------------------------
--
------ ----- ----------- ---------- ------ -
-------------------------------- ------- ---------- ---- - -
----------- ---- -
----- -------------------- - ------------------------------------------ -- ----
----------------------------
-
-在这里，我们通过 @Inject('$injector') 注解来注入 $injector 服务。然后，我们使用 $injector.get() 方法来获取 AngularJS 组件，并调用其初始化方法。
迁移逻辑代码
可以使用 @angular/upgrade 包来逐步迁移逻辑代码。具体步骤如下：
- 在 app.module.ts 文件中添加 upgradeAdapter：
------ - -------------- - ---- ------------------- ------ ----- ------- - --- ---------------------------- -- ------------
在这里，我们创建了一个 UpgradeAdapter 对象，并将 AppModule 设置为其依赖。
- 在 AppModule 中使用 UpgradeAdapter：
-----------
-------- ----------------
---------- -
- -------- -------------- ----------- -------------------------------------- -
-
--
------ ----- --------- -
--------------- -
-------------------------------- ----------------------
-
-在这里，我们使用 UpgradeAdapter 对象来创建 UpgradeModule 的工厂函数，并将其注册到 AppModule 的 providers 中。然后，在 AppModule 的 ngDoBootstrap() 方法中使用 adapter.bootstrap() 方法来启动应用程序的升级。
- 在 app.component.ts 文件中添加 upgradeAdapter：
------ - ---------- -------- - ---- ---------------- ------ - ------- - ---- --------------- ----------- ------------- --------------- ---------------- -------------- -- ------ ----- ------------------ -- ----- --------- - ---------------------------------- ---- ------------------------------------------------------ ---------- - --------------- --------- --------- -- -------------- --- -------------------------------------------- ------------------------------------------- ------------------------------------------- -- ----------------------
在这里，我们创建了一个 AngularJS 模块，并在其中创建了一个 AngularJS 组件。然后，我们调用 adapter.downgradeNg2Component() 方法来向下转换 AppComponent，以便它可以在 AngularJS 应用程序中使用。最后，我们将 AppComponent 注册为 AngularJS 指令，并将其添加到模块中。
示例代码
以上介绍了如何使用 @angular/upgrade 包来升级 AngularJS 应用程序到新版的 Angular。下面是一个完整的示例代码：
------ - -------------- - ---- -------------------
------ - -- ------- ---- ----------
------ - ---------- --------- ------ - ---- ----------------
------ - ------------- - ---- ----------------------------
----- --------- - ---------------------------------- ----
------------------------------------------------------ ---------- -
--------------- --------- --------- -- --------------
---
------------
--------- ----------------
--------- ------- ------- ----------------
--
------ ----- ------------ - -
-----------
------------- ---------------
---------------- --------------
--
------ ----- ------------------ --
------ ----- ------- - --- ---------------------------- -- ------------
-----------
-------- ----------------
---------- -
- -------- -------------- ----------- -------------------------------------- -
-
--
------ ----- --------- -
--------------- -
-------------------------------- ----------------------
-
-
------------
--------- -------------------
--------- ---------------------------------------------------
--
------ ----- ----------- ---------- ------ -
-------------------------------- ------- ---------- ---- - -
----------- ---- -
----- -------------------- - ------------------------------------------ -- ----
----------------------------
-
-
------------------------------------------- ------------------------------------------- -- ----------------------总结
在本篇文章中，我们介绍了如何使用 @angular/upgrade 包来升级 AngularJS 应用程序到新版的 Angular。通过使用这个包，我们可以有效地减少重构工作量，并逐步迁移逻辑代码。当然，这只是一个简单示例，实际上可能会涉及到更加复杂的应用程序，但基本思路是相同的。希望这篇文章能够帮助你更好地理解 @angular/upgrade 包的使用，并在升级 AngularJS 应用程序时提供一些帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/presents-the-upgrade