AngularJS和Angular 2+：详细比较

作者：我家自动化 | 2024-07-24 11:25:42

踩

angularjs 和 angular2语法区别

本文比较了原始AngularJS和Angular 2+之间的主要区别。 如果您目前仍在使用AngularJS项目，并且不确定是否应该进行跳转，那么本文将帮助您入门。

近年来，我们已经看到Angular作为开发单页应用程序（SPA）和渐进式Web应用程序（PWA）的框架和平台有了巨大的发展。 AngularJS建立在应该使用声明式编程来构建视图的思想之上。这需要将DOM操作与应用程序的业务逻辑脱钩，并且该方法本身具有很多好处。

但是，AngularJS在性能以及引擎内部的工作方式方面存在许多缺点。因此，开发团队花了一年的时间从头开始重写代码，并最终在2016年末发布了Angular2。大多数开发人员都认为Angular 2是一个与原始AngularJS几乎没有相似之处的不同平台。

因此，让我们比较并对比AngularJS和Angular 2+。

AngularJS和Angular 2中的框架

AngularJS遵循传统的MVC体系结构，该体系结构包括模型，视图和控制器。

控制器：控制器代表如何处理用户交互，并绑定模型和视图。
视图：视图代表表示层和实际的UI。
模型：模型是数据的抽象表示。

一些开发人员认为AngularJS遵循MVVM模式，该模式将ViewController替换为Controller。视图模型是一种类似于控制器的JavaScript函数。令它与众不同的是它在视图和模型之间同步数据。对UI元素所做的更改会自动传播到模型，反之亦然。

下图显示了如何将各种AngularJS片段连接在一起。

AngularJS和Angular 2：AngularJS架构

您可以在官方文档页面上阅读有关AngularJS架构的更多信息。

另一方面，Angular具有基于组件的体系结构。每个Angular应用程序都有至少一个称为根组件的组件。每个组件都有一个负责处理业务逻辑的关联类和一个表示视图层的模板。可以将多个紧密相关的组件堆叠在一起以创建一个模块，每个模块都可以单独形成一个功能单元。

AngularJS和Angular 2：Angular架构的高级概述

正如您在图中所看到的，组件已绑定到模板。组件使用TypeScript类组成，并且模板使用@Component批注附加到它们。可以使用Angular的依赖项注入子系统将服务注入到组件中。 Angular中的模块概念与AngularJS模块完全不同。 NgModule是用于定义功能单元的容器。 NgModule可以包含组件，服务和其他功能。然后可以导入模块化单元并与其他模块一起使用。

在Angular.io上可以更好地解释所有Angular概念。

AngularJS和Angular 2中的模板

在AngularJS中，模板是使用HTML编写的。为了使其动态，可以添加特定于AngularJS的代码，例如属性，标记，过滤器和表单控件。另外，它支持前面提到的双向数据绑定技术。以下代码段演示了模板中指令和双花括号的用法：


<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <inpu#t ng-model="foo" value="bar">
   <!-- Button tag with ngClick directive -->
   <!-- Curly bracket is a template binding syntax -->
   button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js"></script>
 </body>
</html>

在Angular中，对AngularJS的模板结构进行了重新设计，并向模板中添加了许多新功能。主要区别在于，每个组件都附加有模板。除<html> ， <body> ， <base>和<script>之外的所有HTML元素都在模板中工作。除此之外，还有诸如模板绑定，模板插值，模板语句，属性绑定，事件绑定和双向绑定等功能。内置属性指令（例如NgClass，NgStyle和NgModel）以及内置结构指令（例如NgIf，NgForOf，NgSwitch）也是模板的一部分。

AngularJS和Angular 2中的依赖注入

依赖注入是一种设计模式，负责满足依赖关系，并在需要时将其注入组件中。这避免了将依赖项硬编码到组件中的需要。 AngularJS有一个注入器子系统，负责创建组件，注入依赖关系并解析所有依赖关系列表。可以按需注入以下组件：

值
厂
服务
提供者
不变

服务，指令和过滤器可以使用工厂方法注入。这是一个实际的工厂方法示例。工厂方法已注册到名为myModule的模块：


angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

尽管方法保持不变，但是Angular具有更新的依赖项注入系统，该系统不同于旧的DI模式。 Angular的依赖项注入通过@NgModule数组进行管理，该数组包含providers和declarations 。 declarations数组是declarations组件和指令的空间。依赖关系和服务通过providers数组注册。

假设您有一个服务检索名为ContactlistService的联系人列表并将其提供给ContactList组件。您首先需要在providers数组内的app.module.ts注册ContactlistService 。接下来，您需要将服务注入到组件中，如下所示：


import { Component }   from '@angular/core';
import { Contact }        from './contact';
import { ContactListService } from './contactlist.service';
 
@Component({
  selector: 'app-contacts-list',
  template: `
    <div *ngFor="let contact of contacts">
      {{contact.id}} - {{contact.name}} - {{contact.number}}
    </div>
  `
})
export class ContactListComponent {
  contacts: Contact[];
 
  constructor(contactlistService: ContactlistService) {
    this.contacts = contactlistService.getcontacts();
  }
}

在这里，我们告诉Angular将服务注入到组件的构造函数中。

JavaScript与TypeScript

AngularJS是一个纯JavaScript框架，AngularJS中的模型是普通的旧JavaScript对象。这使设置项目的整个过程变得更加容易。具有一些基本JavaScript经验的任何开发人员都可以开始使用该框架。因此，与其他前端框架相比，Angular 1.0的学习曲线非常柔和。

Angular 2+引入TypeScript作为构建应用程序的默认语言。 TypeScript是JavaScript的语法超集，可编译为普通JavaScript。 Angular团队选择TypeScript而不是JavaScript，因为类型注释功能使您可以执行可选的静态类型检查。类型检查可以防止编译时错误爬到您的代码中，否则这些代码将不会被注意到。这使您的JavaScript代码更加可预测。

除此之外，TypeScript还因其类，接口和修饰符（类修饰符，属性修饰符和参数修饰符）而广受欢迎。 Angular使用TypeScript类定义组件。 @Component是一个流行的示例，说明如何使用类装饰器将元数据附加到组件。通常，这包括组件配置详细信息，例如模板选择器标记， templateUrl和providers数组，以便您可以将任何相关的依赖项注入该组件：


@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

AngularJS和Angular 2的工具支持

更好的工具支持可帮助开发人员更快地构建事物，并增加了整个开发工作流程。例如，命令行界面（CLI）可以大大减少从头创建应用程序所花费的时间。同样，还有其他工具，例如IDE，文本编辑器，测试工具包等，可以帮助您使开发变得更加容易。

AngularJS没有正式的CLI，但是有许多第三方生成器和工具可用。对于IDE，WebStorm和Aptana是开发人员中最受欢迎的选择。如果您像我一样，可以自定义一个普通的文本编辑器，例如Submlime Text编辑器，然后向其中添加正确的插件。 AngularJS有一个用于调试和测试的浏览器扩展程序，称为ng-inspector。 AngularJS的结构允许轻松导入第三方模块。您可以在ngmodules.org上找到所有流行的ng模块，这是一个用于托管AngularJS模块的开源项目。

与AngularJS相比，Angular具有更多的工具支持。有一个官方的CLI，可让您初始化新项目，为新项目提供服务以及构建用于生产的优化捆绑软件。您可以在GitHub上了解有关Angular CLI的更多信息。因为Angular使用TypeScript而不是JavaScript，所以Visual Studio作为IDE受支持。那不是全部。有许多IDE插件和独立工具可帮助您自动化并加快开发周期的某些方面。用于调试的Augury，用于代码分析的NgRev，用于代码验证的Codelyzer等都是非常有用的工具。

摘要

AngularJS有很多缺陷-大多数与性能有关-但它曾经是快速原型开发的首选。但是，回到AngularJS或再维护AngularJS项目没有任何意义。如果尚未进行转换，则应考虑这样做。

在本文中，我们介绍了AngularJS和Angular 2之间的前五个差异。除了模板结构和依赖项注入方法外，几乎所有其他功能都进行了改进。许多流行的Angular 1.0功能（例如控制器，范围，指令，模块定义等）已被其他替代方法替代。此外，基础语言已更改，结构也已更改。

From: https://www.sitepoint.com/angularjs-vs-angular/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/874413