随着时间的推移，技术发展日新月异，我们的技术栈也在不断更新。AngularJS 是一个非常流行的前端框架，但它已经被 Angular 取代。Angular 在许多方面与 AngularJS 不同，它的API和架构都发生了很大的变化。在这篇文章中，我将带你了解如何从 AngularJS 迁移到 Angular，并提供一些示例代码和实用建议。
使用 Angular CLI
使用 Angular CLI 可以大大简化我们的项目构建和迁移工作。Angular CLI 是一个开发工具，可以快速生成项目骨架，创建组件、服务、指令等，也可以对项目进行打包、构建等。使用 Angular CLI 能让我们从 AngularJS 到 Angular 的过渡更加顺畅。
要安装 Angular CLI，请使用以下命令：
npm install -g @angular/cli
安装完成后，你可以使用 ng new 命令生成一个新的 Angular 项目。
ng new my-app
这个命令会自动创建一个基本的项目模板，并且会包含所有的必要文件和依赖。随后，在该项目下会自动启用 typescript 和 Angular 两个运行时。
从 AngularJS 到 Angular 的平滑迁移
1.模块化 AngularJS 应用
在 Angular 中，使用模块是一个非常重要的概念，而在 AngularJS 中，我们通常使用 app.js 来定义应用程序的模块。
在迁移过程中，我们首先需要按照功能抽象出多个模块，然后将这些模块按照依赖关系组织在一起。我们可以利用 RequireJS 等加载器来完成此操作，也可以自己实现一个自定义的加载器。
例如，下面是一个简单的 AngularJS 模块定义：
angular.module('myApp', ['ui.router', 'ngResource']);我们可以很容易地将这个模块拆分成不同的子模块：
angular.module('myApp', [
'myApp.core',
'myApp.auth',
'myApp.dashboard',
'myApp.profile'
]);2.组件化重构 AngularJS 应用
在 Angular 中，我们将应用程序划分为一组组件，每个组件都是自己的一套逻辑和视图。相对于 AngularJS 的指令，这是一个更加强大的机制。在迁移过程中，我们需要将指令转换为组件，并将其包装在现有 Angular 模块中。
例如，下面是一个简单的 AngularJS 指令：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
------ -
-------- ---
--
--------- ------ ----------- -------
--
---我们可以将此指令转化为一个组件：
@Component({
selector: 'my-directive',
template: `<div>{{message}}</div>`
})
export class MyDirectiveComponent {
@Input() message: string;
}3.引入依赖注入机制
在 AngularJS 中，我们使用 $scope 对象来管理应用程序的状态，这在很多情况下会导致代码的紊乱和混乱。在 Angular 中，我们使用依赖注入机制来管理应用程序的状态。
在迁移过程中，我们需要将所有的 $scope 对象替换为服务对象，并重新组织这些服务对象的依赖关系。我们还需要将所有的依赖关系注入到组件中，以便在运行时使用。这个过程中需要注意 service 不能直接在控制器中被调用，必须是依赖注入到控制器中。
例如，下面是一个使用 $scope 的 AngularJS 应用程序：
angular.module('myApp').controller('myController', function($scope, $http) {
$http.get('/api/user').success(function(user) {
$scope.user = user;
});
});我们可以将此控制器转换为一个组件，并使用依赖注入机制：
-- -------------------- ---- -------
------------
--------- ----------------
--------- ---------------------
--
------ ----- --------------------- ---------- ------ -
----- ----
------------------- ----- ----- - -
---------- -
--------------------------
--------------- -- --------- - ------
-
-4.使用路由
在 AngularJS 中，我们使用 ngRoute 命令来实现应用程序的路由。在 Angular 中，我们使用 @angular/router 库来实现应用程序的路由。
在迁移过程中，我们需要将 AngularJS 应用程序中的路由转换为 Angular 路由模块，并重新组织应用程序的路由层次结构。
例如，下面是一个使用 ngRoute 的 AngularJS 应用程序：
-- -------------------- ---- -------
------------------------------------------------------- ------------------ -
--------------------------------- -
------------ -----------------
----------- ---------------------
---
-------------------------- ----------- --- ---
----------------------------------
---我们可以将此应用程序的路由转换为 Angular 路由模块：
-- -------------------- ---- ------- ----- ------- ------ - - - ----- ------------ ---------- ------------------ -- - ----- ----- ----------- --- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
这个模块的核心是路由表定义，其中包含了路由URL、对应地组件和匹配规则，可以通过简单的导入和使用 RouterModule，即可使浏览器URL直接与对应的组件进行匹配。
结论
在本文中，我们带你从 AngularJS 到 Angular 的平滑迁移过程。我们了解了如何使用 Angular CLI 来生成 Angular 项目，并学习了如何使用 Angular 的组件、路由，以及依赖注入机制。
迁移到 Angular 可能需要一些时间和努力，但它值得一试。Angular 是一个更加现代化和强大的框架，可以提供更好的性能和更好的开发体验。如果您正在考虑将您的项目从 AngularJS 迁移到 Angular，请务必尝试以上步骤，并学习 Angular 的更多特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720dca72e7021665e04d66f