Angular如何构建和运行

Question

如何建立角度

在使用TypeScript编写Angular应用程序后，我们使用Angular CLI命令构建应用程序。

ng build命令将应用程序编译到一个输出目录中，构建构件将存储在dist/目录中。

这篇文章说Angular有两个编译器：

>

视图编译器

模块编译器

>

当使用AppComponent类（在main.ts中）进行引导时，Angular在index.html中查找 ，找到它，实例化AppComponent的实例，并在 标记中呈现它。

当用户在应用程序中移动时，Angular创建、更新和销毁组件。

关于跑步的问题

上面所有的语句不都是在运行时使用JavaScript.js文件完成的吗？

有人知道各部分是如何在深度上结合在一起的吗？

Answer 1

（当我说Angular时，我指的是Angular 2+，如果我提到Angular 1，我会明确地说Angular-js）。

Angular（可能更准确地说是Angular-CLI）已经将构建过程中所涉及的Javascript中的一些流行工具合并在一起。这确实会导致一点混乱。

更加混乱的是，术语compile经常在angular-js中被用来指取模板的伪HTML并将其转换为DOM元素的过程。这是编译器所做的一部分，但其中一个较小的部分。

（稍微）具体一点：

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

需要注意的一件重要事情是，Angular不负责Javascript文件如何引用其他Javascript文件（例如import关键字）。这是由WebPack处理的。

编译器有两种工作方式：运行时和提前。从现在开始，我假设您使用的是打字稿：

• runtime:当typescript编译器运行时，它会接收所有的修饰器信息，并将其插入附加到修饰类、方法和字段的Javascript代码中。在index.html中，您引用了main.js，它调用了bootstrap方法。该方法将传递给您的顶级模块。

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

null

不。Angular CLI调用Webpack（Angular CLI的真正服务是配置Webpack。当您运行ng build时，它只不过是启动Webpack的代理）。Webpack首先调用Typescript编译器，然后调用angular编译器（假设是AOT)，同时绑定代码。

虽然在上面的语句中使用了main.ts来解释引导过程，但angular应用程序不是使用Javascript.js文件引导或启动的吗？

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

模块编译器

老实说，我只是想在这里声称自己无知。我想在我们的水平上，我们可以把它看作一个大的编译器。

有人知道各部分是如何在深度上结合在一起的吗？