Angular如何构建和运行

(当我说Angular我的意思是Angular 2并且如果我提到角度1那将明确地说出angular-js)。

前奏：令人困惑

Angular，可能更准确的angular-cli已经将Javascript中的一些趋势工具合并在一起，这些工具涉及构建过程。它确实会引起一些混乱。

为了进一步混淆，在angular-js中经常使用术语compile来指代获取模板的伪html并将其转换为DOM元素的过程。这是编译器所做的一部分，但是其中一个较小的部分。

首先，不需要使用TypeScript，angular-cli或Webpack来运行Angular。回答你的问题。我们应该看一个简单的问题：“什么是Angular？”

Angular：它做了什么？

这部分可能会引起争议，我们会看到。 Angular提供的服务的核心是一种依赖注入机制，可以在Javascript，HTML和CSS中运行。您可以单独编写所有小部件，并在每个小部件中按照Angular的规则来引用其他部分。 Angular然后以某种方式完全编织。

(略微)更具体：

>模板允许将HTML连接到Javascript组件。这允许用户在DOM本身上输入(例如，单击按钮)以馈送到Javascript组件，并且还允许Javascript组件中的变量控制DOM中的结构和值。
> Javascript类(包括Javascript组件)需要能够访问它们所依赖的其他Javascript类的实例(例如，经典的依赖注入)。 BookListComponent需要BookListService的一个实例，它可能需要BookListPolicy的实例或类似的东西。这些类中的每一个都有不同的生命周期(例如，服务通常是单例，组件通常不是单例)，而Angular必须管理所有这些生命周期，组件的创建以及依赖关系的连接。
> CSS规则需要以这样的方式加载：它们仅应用于DOM的子集(组件的样式是该组件的本地样式)。

一个可能需要注意的重要事项是Angular不负责Javascript文件如何引用其他Javascript文件(例如import关键字)。这由Webpack负责。

编译器做什么？

现在您已经了解了Angular的内容，我们可以讨论编译器的功能。我会避免过于技术化，主要是因为我无知。但是，在依赖注入系统中，您通常必须使用某种元数据来表达您的依赖关系(例如，一个类如何表示我可以注入，我的生命是啰嗦，或者您可以将我视为组件类型的实例)。在Java中，Spring最初使用XML文件执行此操作。 Java后来采用了注释，它们已成为表达元数据的首选方式。 C#使用属性来表达元数据。

Javascript没有很好的机制来公开内置的元数据。 angular-js做了一次尝试并且它并不坏但是有很多规则不容易检查并且有点令人困惑。使用Angular，有两种支持的方法来指定元数据。您可以编写纯Javascript并手动指定元数据，有点类似于angular-js，只需遵守规则并编写额外的泛型代码。或者，您可以切换到TypeScript，它恰好具有用于表示元数据的装饰器(那些@符号)。

所以这是我们最终可以进入编译器的地方。编译器的工作是获取元数据并创建作为应用程序的工作系统。您专注于所有部分和所有元数据，并且编译器构建一个大的互连应用程序。

编译器是如何做到的？

编译器可以通过两种方式工作，运行时和提前。从这里开始，我假设您使用的是TypeScript：

>运行时：当typescript编译器运行时，它会获取所有装饰器信息并将其推送到附加到装饰类，方法和字段的Javascript代码中。在index.html中，您引用调用bootstrap方法的main.js。该方法通过了您的顶级模块。

bootstrap方法触发运行时编译器并为其提供对该顶级模块的引用。然后，运行时编译器开始对该模块，该模块引用的所有服务，组件等以及所有关联的元数据进行爬网，并构建应用程序。

> AOT：Angular提供了一种在构建时完成大部分工作的机制，而不是在运行时完成所有工作。这几乎总是使用a webpack plugin(这必须是最流行但最不为人知的npm包之一)。它在打字脚本编译运行后运行，因此它看到与运行时编译器基本相同的输入。 AOT编译器就像运行时编译器一样构建应用程序，然后将其保存回Javascript中。

这里的优点不仅在于您可以节省编译本身所需的CPU时间，还可以减少应用程序的大小。

具体答案

Angular CLI First calls angular built in compiler written in
Typescript => then calls the Typescript Transpiler => then calls the
Webpack to bundle and store in the dist/ directory.

没有.Angular CLI调用Webpack(Angular CLI的真实服务是配置webpack。当你运行构建时，它只不过是启动Webpack的代理)。 Webpack首先调用Typescript编译器，然后调用角度编译器(假设AOT)，同时将代码捆绑在一起。

Although main.ts is used in Statement above for explaining bootstrap
process,Isn’t angular app is bootstrapped or started using Javascript
.js files ?

我不完全确定你在这里问的是什么。 main.ts将被转移到Javascript中。该Javascript将包含对bootstrap的调用，这是Angular的入口点。完成引导程序后，您将运行完整的Angular应用程序。

This post says Angular has two compilers:

View Compiler

Module Compiler

说实话，我只是在这里声称无知。我认为在我们的水平上我们可以把它想象成一个大的编译器。

Does anyone know how all parts fit together in depth ?

我希望上面对此感到满意。

不要@ Me：Angular不仅仅是依赖注入

当然。它可以进行路由，查看构建，更改检测以及各种其他内容。编译器确实为视图构建和更改检测生成Javascript。当我说这只是依赖注入时，我撒了谎。但是，依赖注入是核心，足以驱动其余的答案。

我们应该称它为编译器吗？

它可能会进行大量的解析和渲染，因此肯定会生成大量代码，因此您可以将其称为编译器。

另一方面，它并没有真正将您的代码转换为仅仅是不同的表示。相反，它采用了大量不同的代码并将它们编织成更大系统的消耗品。然后(在编译之后，如果需要的话)引导过程获取这些部分并将它们插入Angular核心。