来自Infragistics的注释: Angular (以前称为Angular 2) 表示与Angular JS (以前称为Angular 1) 的巨大偏离。虽然Angular JS使用了更传统的MVC架构，该架构主要依赖于控制模型和视图之间交互的控制器，但Angular采用了一种更独立、可组合的基于组件的方法。

虽然Angular JS采用的方法没有什么错，但Angular采用的基于组件的架构已被证明是一种非常灵活的范例，可以被来自不同背景的开发人员轻松理解和应用。一旦你认识到 “组件” 和 “用户控制” 之间的相似之处，大量的重用和组合机会以及它们提供的功能就会变得显而易见。

在这除了从Angular Essentials-来自Infragistics的电子书，您现在可以免费下载您将获得有关Angular组件体系结构的高级介绍以及平台中可用的各种功能，以帮助您为现代web构建复杂的应用程序。

Angular应用程序结构

Angular广泛使用组件。典型的Angular应用程序由用于定义页面的每个部分的组件组成。组件被添加到Angular模块中。

将Angular应用程序视为组件树。这些组件链接在一起。最顶部的组件是根组件，它包含所有其他组件，Angular的引导程序使用它来启动应用程序。

以下是Angular应用程序中的典型组件树:

组件树结构在Angular应用程序中的应用

每个组件都是一个自给自足的UI，屏幕或路线。组件是视图及其视图模型的组合。它使用服务来获取数据并在视图中显示该数据。

当应用程序被分成多个视图，并且必须根据当前URL加载视图时，每个路由都使用一个组件进行处理。当必须加载此组件时，路由将调用此组件。

Angular应用程序是模块化的。Angular使用几个ES6模块来保持源代码的模块化，它使用自己的模块系统将一组相关的Angular块组合在一起。重要的是要了解ES6模块化系统的目的与Angular模块系统的目的不同。

ES6模块系统有助于保持源文件尽可能精简。每个文件包含一个组件、一个指令、一个服务或任何其他块。这些文件使用export关键字导出其对象，并由其他模块使用import关键字导入。应用程序中使用的第三方库也作为ES6模块加载。另一方面，角模块用于将一组角块组合在一起。这些模块可用于基于一组块的功能将应用拆分成多个模块。一个模块可以访问其他模块以使用其功能。

Angular广泛使用依赖注入 (DI) 将所需对象加载到任何代码块中。它为DI提供了一个API，它具有复杂应用程序所需的所有功能。模块化和DI的结合使Angular代码更清晰地读取和测试。

Angular应用程序是使用多个组件，服务，指令，管道和其他部分构建的。让我们来看看每个人都在做什么。

指令

指令在Angular中并不是新的，但是自从Angular JS以来已经得到了改进。通过提供更好的绑定系统，Angular中的指令架构减少了对直接DOM操作的需求。与Angular JS不同，该指令必须以骆驼大小写符号命名，并在UI上使用虚线符号，Angular具有统一的命名和使用指令的方式。

Angular 2有三种类型的指令:

组件

Angular应用程序从一个组件开始; 每个路由都与一个组件相关联，并使用组件来定义应用程序的不同级别。组件由HTML模板以及为该模板构建视图模型的逻辑组成。HTML模板使用Angular的绑定语法来绑定视图中视图模型的属性和方法。组件可以在其模板中加载另一个组件并与之交互。

组件具有生命周期钩子，如ngOnInit()，ngOnDestroy()，允许应用程序响应组件的关键生命周期事件。

装饰器指令

Decorator指令扩展现有HTML元素或现有组件的行为。这些是最简单的指令。它们执行少量操作，但有时这些小功能对业务至关重要。装饰器指令可以通过事件与其宿主进行交互。使用这些事件有效地减少了需要执行的DOM操作量。

结构指令

结构指令处理在元素内呈现的模板。他们可以根据需要操作模板。它不会直接操作目标内的DOM，而是使用Angular提供的ViewComponentRef服务来添加或删除目标内的元素。此行为使平台不可知的指令。

变更检测

每个前端框架的核心都是一种检测对象更改的技术。每当UI上绑定的对象的值更改时，需要通知框架，以便它可以更新UI以反映这些更改。这种技术被称为 “ 变化检测 ”。Angular带来了一种更强大，更有效的方式来检测对象的变化。它带有内置的更改检测机制，并允许在框架上构建的应用程序也使用第三方技术。该框架有一个开放端，允许使用提供更好的机制来检测更改的对象。

服务

服务是简单的ES6或TypeScript类，它们执行操作，例如从API获取数据，维护WebSocket连接以与服务器交互，处理业务逻辑或任何可重用逻辑。可以将服务注入到另一个服务，组件，指令或任何角度代码块中。服务有助于实现单一责任原则 (SRP) 并保持代码更清洁。

表格

接受用户输入是任何应用程序最重要的部分之一。有时，当业务需要用户填写许多字段并且需要执行许多验证时，处理用户输入成为一个挑战。Angular为表单提供了良好的支持。Angular应用程序中的表单，可以由模板或模型驱动。

工艺路线

支持单页应用程序开发的框架允许在客户端切换视图，而无需刷新整个页面。它更新页面的一部分并更改URL，以便可以将其添加为书签，然后返回到特定视图，而不是从第一页再次开始导航。这称为客户端路由。像每个SPA框架一样，Angular支持路由。Angular有一个名为Component router的路由器，之所以命名为Component Router， 是因为它加载组件。

模块

如前所述，Angular中的模块用于将一组相关的组件、指令、管道和服务组合在一起。Angular的模块系统不同于ES6模块系统。ES6模块系统封装了一个文件的内容，而Angular 2模块系统封装了一组Angular块。以下是模块的一些功能:

• 添加到模块的块可以在模块内部使用。
• 模块可以导入一个或多个模块以使用来自该模块的代码。
• Angular库可以使用模块将其功能导出到世界其他地方。
• 带有模块的Angular应用程序引导程序。
• 模块可以将其一个或多个组件声明为引导组件。
• 模块的执行将从自举组件开始。

结论

Angular带来了许多新功能，以及一些Angular JS功能的改进版本。每个功能的设计都考虑到了易用性和易维护性。随着我们的前进，我们将更深入地了解这些概念。

我们希望你喜欢这个Angular Essentials电子书的样本。你可以下载完整的书,并且一定要退房我们的新示例应用程序和演示如何应用信息的课程您刚刚了解了Ignite UI for JavaScript Angular组件如何帮助您为任何业务应用程序编写令人惊叹的高性能应用程序。一定要让你的30天免费试用Ignite UI for JavaScript!</p