今年，React，Angular和Vue的受欢迎程度和使用率都没有放缓。我们看到在前端和后端JavaScript社区中持续不断地采用和使用这些框架和库。 由于AngularJS面临着不确定的未来，许多团队正在寻找当前热门话题的答案：如果您使用的是AngularJS，您是继续维护AngularJS应用程序还是将应用程序迁移到另一个框架？这不是一个容易（或便宜）的问题。 在本文中，我们将介绍您应该考虑迁移AngularJS应用程序的一些原因，以及有关如何规划和预算成功迁移的一些想法。
AngularJS vs Angular - Angular 1.x和Angular 2.x背后的历史 “等等，AngularJS和Angular不一样吗？” 好吧，不完全是...... AngularJS是一个前端JavaScript框架，最初由Google于2010年发布.AngularJS可能是Web开发中最受欢迎的前端JavaScript框架。 与Apache Cordova等技术相结合，即使在移动应用程序开发中，AngularJS也是一股巨大的力量。在其早期生命周期中，AngularJS通俗地称为社区，简称为“Angular”，这使得许多人在今天感到困惑。 2016年，Google发布了一个名为Angular 2的全新框架。 当Angular 2处于开发阶段时，人们通过调用第一个Angular 1.X和第二个Angular 2来区分两个框架AngularJS和Angular。 随着Angular团队转向语义版本控制方案（当前主要版本的Angular在本帖时为6.X），突然之间，称Angular v6.0为“Angular 2”也令人困惑。 为了减少混淆，Angular团队发起了“ It's Just Angular ”活动，帮助创建有关如何引用不同框架的指南。原始的Angular框架应该被称为AngularJS，新的Angular框架应该简称为Angular。 确定应用程序是Angular还是AngularJS的好方法是查看应用程序的创建日期。声称使用“Angular”且在2016年或之前构建的应用程序可能使用AngularJS（流行版本包括1.2,1.5,1.6和1.7）。
夕阳AngularJS AngularJS团队最近宣布，从2018年6月1日开始，AngularJS将进入为期3年的“长期支持”阶段。 截至7月1日，AngularJS团队已承诺仅发布新补丁以解决以下问题：
- 1.7.X版本分支中的安全漏洞
- 与影响生产应用程序的主要浏览器版本不兼容
- 与影响生产应用程序的jQuery库版本不兼容
为什么要立即迁移？ 现在开始迁移AngularJS应用程序有几个原因：
- 随着截止日期的临近，迁移成本会随着时间的推移而增加
- 安全性和兼容性问题现在是您的问题
- 使用AngularJS经验难以找到新员工
- 人才流失与现有员工
- 硬技术限制
我们应该使用哪种框架？ 今天使用的三个最大和最流行的前端JavaScript框架是Angular，Vue和React。 每个框架都有自己的大量：
- 开发人员工具和文档
- 跨小型，中型和企业级应用程序的广泛采用
- 广泛的第三方库支持
- 可比功能集
- 模板语法 - Vue的模板语法与AngularJS的模板语法非常匹配，使AngularJS开发人员对新框架感到非常舒服。
- 反应模型 - Vue的反应模型与AngularJS非常相似，它允许AngularJS开发人员比比较框架和库更快地采用Vue的心理模型。
- 没有额外的JavaScript语法或其他库 - Vue不依赖于许多额外的JavaScript语法或其他需要向开发人员讲授的库，这有助于快速提升。
无论您使用的是最新版本的AngularJS（1.5,1.6或1.7）还是旧版本支持的版本（例如1.2），都无关紧要; 从AngularJS升级到Vue的路径通常是一个简单的机械过程。
从AngularJS成功迁移到Vue 每次成功的迁移工作的关键是制定可靠的计划。目标应该是在以下情况下执行迁移：
- 最大限度地减少功能回归
- 避免平台停机
- 继续为客户提供新功能
设置迁移应用程序 要完成此任务，您应该设置AngularJS应用程序，以便它可以同时呈现AngularJS和Vue组件。这将允许您在Vue中构建新功能，并通过AngularJS的现有功能移植端口，因为您有时间，预算和资源。
如何开始Vue和AngularJS集成
在AngularJS中托管Vue组件可以非常简单。 您需要做的就是包含一个指向Vue框架的脚本标记。然后，创建指向应用程序中特定DOM节点的Vue实例。 可以将Vue设置为在文档的并行分支中与现有AngularJS应用程序一起运行，或者Vue组件可以包含在现有AngularJS组件中并由Vue完全控制。您甚至可以在层之间传递一些数据和事件。
将AngularJS组件转换为Vue组件 下一步是开始将现有的AngularJS组件转换为Vue组件。这意味着将AngularJS控制器转换为Vue实例。 然后，任何AngularJS生命周期方法都直接转换为等效的Vue组件生命周期方法。 最后，将AngularJS模板复制到Vue组件中，并将AngularJS模板语法替换为等效的Vue模板语法（例如：用v-if替换ng-if，用v-for替换ng-repeat等）
AngularJS到Vue迁移代码示例 在这个例子中，我们从Todo MVC的AngularJS实现中获取以下（略微改变的）模板片段并将其转换为Vue模板。
<section class="main" ng-show="todos.length" ng-cloak>
<ul class="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index"
ng-class="{completed: todo.completed,
editing: todo == editedTodo}">
<input class="toggle"
type="checkbox"
ng-model="todo.completed"
ng-change="toggleCompleted(todo)">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
<input class="edit"
ng-trim="true"
ng-model="todo.title"
ng-blur="saveEdits(todo, 'blur')">
|
下面是AngularJS实现到Vue模板的简单转换：
<section class="main" v-show="todos.length" v-cloak>
<ul class="todo-list">
<li v-for="todo in filteredComputedTodos"
v-bind:class="{completed: todo.completed,
editing: todo == editedTodo}">
<input class="toggle"
type="checkbox"
v-model="todo.completed"
v-on:change="toggleCompleted(todo)">
<label v-on:dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" v-on:click="removeTodo(todo)"></button>
<input class="edit"
v-model.trim="todo.title"
v-on:blur="saveEdits(todo, 'blur')">
|
迁移AngularJS服务 迁移的一大优点是任何AngularJS服务都可以简单地转换为ES6 +模块。Vue中没有必要像AngularJS那样注册服务。 使用ES6模块和import语句将帮助像Webpack这样的捆绑器通过智能跟踪模块之间的依赖关系并优化捆绑在一起并在运行时交付的代码来最小化代码的占用空间。 如果您仍然想要为这些服务利用AngularJS依赖注入系统，您可以将现在转换的服务包装在更薄的AngularJS服务对象中，就像包装第三方库（如lodash）一样。
结论 随着对AngularJS的支持将在未来三年内结束，迁移到更新的框架将帮助您和您的团队避免可能因缺乏直接支持而导致的问题，并让您的开发团队再次对开发感到兴奋。 您将能够更轻松地吸引人才，并提高应用程序和开发人员的速度和性能。 但是，承诺在没有计划的情况下进行系统迁移是灾难的一种方法，可能会减慢或停止新的功能开发。如果没有有效的计划，您可能会遇到缺陷，退步和过多的计划外成本。 Vue是AngularJS团队的一个自然且经过验证的迁移目标。它易于学习，并允许任何AngularJS应用程序与新的Vue应用程序一起进行增量迁移。