Angular如何构建和运行 [英] How Angular builds and runs

问题描述

只想了解Angular如何在后台构建和运行?

以下是我到目前为止所了解的.想知道我是否错过了什么.

Angular的构建方式

使用TypeScript对Angular应用进行编码后，我们使用Angular CLI命令来构建应用.

ng build命令将应用程序编译到输出目录中，并且构建工件将存储在dist/目录中.

内部流程

1..Angular CLI运行Webpack来构建和捆绑所有JavaScript和CSS代码.

2..Webpack依次调用TypeScript加载程序，该加载程序会提取Angular项目中的所有.ts文件，然后将它们转换为JavaScript，即转换为.js文件，浏览器可以理解./p>

此帖子说Angular有两个编译器:

• View编译器

• 模块编译器

关于构建的问题

调用构建过程的顺序是什么?

Angular CLI首先调用用TypeScript =>编写的Angular内置编译器，然后调用TypeScript Transpiler =>，然后调用Webpack捆绑并存储在dist/目录中.

Angular的运行方式

构建完成后，我们所有应用程序的组件，服务，模块等都将转换为JavaScript .js文件，该文件用于在浏览器中运行Angular应用程序.

Angular Docs

中的声明

1. 使用AppComponent类(在main.ts中)进行引导时，Angular在index.html中寻找<app-root>，找到它，实例化AppComponent实例，并将其呈现在<app-root>标签.

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

运行中的问题

尽管在上面的语句中使用了main.ts来解释引导过程，但是不是使用JavaScript .js文件引导或启动了Angular应用程序吗?

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

有人知道所有零件在深度上如何装配在一起吗?

解决方案

(当我说Angular时，我指的是Angular 2+，如果我提到angular 1，则会明确地说出angular-js).

序曲:令人困惑

Angular，也许更准确地说是angular-cli，已经将构建过程中涉及的许多Java趋势工具合并在一起.确实会引起一些混乱.

为进一步混淆，术语compile通常在angular-js中使用，指的是获取模板的伪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的实例，而BookListService可能需要BookListPolicy或类似的实例.这些类中的每一个都有不同的生存期(例如，服务通常是单例，组件通常不是单例)，Angular必须管理所有这些生存期，组件的创建以及依赖关系的连接.
• 需要以这样的方式加载CSS规则，使其仅适用于DOM的子集(组件的样式对于该组件而言是本地的).

需要注意的一件事可能是Angular对Javascript文件如何引用其他Javascript文件(例如import关键字)不承担任何责任.这是由Webpack处理的.

编译器做什么?

现在您知道了什么是Angular，我们可以谈论编译器的工作.我将避免过于技术性，主要是因为我很无知.但是，在依赖项注入系统中，通常必须使用某种元数据来表达依赖项(例如，类如何说I can be injected，My lifetime is blah或You can think of me as a Component type of instance).在Java中，Spring最初是使用XML文件来完成的. Java后来采用了注释，它们已成为表达元数据的首选方式. C#使用属性来表示元数据.

Javascript没有很好的机制来公开此内置的元数据. angular-js进行了尝试，虽然还不错，但是有很多规则无法轻易检查并且有些混乱.使用Angular，有两种支持的指定元数据的方式.您可以编写纯Javascript并手动指定元数据，有点类似于angular-js，而只需遵循规则并编写额外的样板代码即可.另外，您可以切换到TypeScript，恰好发生这种情况，它具有用于表示元数据的装饰器(这些@符号).

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

编译器是如何做到的?

编译器有两种工作方式，即运行时和提前.从这里开始，我假设您正在使用TypeScript:

• 运行时::当打字稿编译器运行时，它将获取所有修饰符信息，并将其推入附加到修饰后的类，方法和字段的Javascript代码中.在您的index.html中，您引用了main.js，它调用了bootstrap方法.该方法将传递给您的顶级模块.

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

• AOT :Angular提供了一种在构建时完成大部分工作的机制，而不是在运行时进行所有工作.这几乎总是使用 webpack插件完成的(这必须是最受欢迎的插件之一)尚不为人所知的npm软件包).它在打字稿编译运行之后运行，因此它所看到的输入基本上与运行时编译器相同. AOT编译器会像运行时编译器一样构建您的应用程序，但随后将其保存回Javascript.

这样做的好处不仅在于您可以节省编译本身所需的CPU时间，而且还可以减少应用程序的大小.

具体答案

Angular CLI首先调用用内置的编译器编写的angular Typescript =>然后调用Typescript Transpiler =>然后调用 打包并存储在dist/目录中的Webpack.

不. Angular CLI调用Webpack(Angular CLI的真正服务是配置Webpack.运行ng build仅仅是启动Webpack的代理). Webpack首先调用Typescript编译器，然后调用有角度的编译器(假定为AOT)，同时同时捆绑代码.

尽管在上面的语句中使用main.ts来解释引导程序 进程，不是用Java启动或启动了有角度的应用程序 .js文件?

我不确定您在这里问什么. main.ts将被翻译成Javascript.该Javascript将包含对bootstrap的调用，这是Angular的入口点.完成bootstrap后，您将运行完整的Angular应用程序.

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

View编译器

模块编译器

说实话，我只是在这里声称无知.我认为从我们的角度来看，我们可以将其视为一个大型编译器.

有人知道所有零件在深度上如何装配在一起吗?

我希望以上内容对此感到满意.

别@我:Angular所做的不只是依赖注入

好的.它可以进行路由，查看构建，更改检测以及所有其他内容.编译器实际上会生成用于视图构建和更改检测的Javascript.当我说这只是依赖注入时，我撒了谎.但是，依赖项注入是核心，足以驱动其余答案.

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

它可能会进行大量的解析和词法分析，并且肯定会生成很多代码，因此您可以出于这个原因将其称为编译器.

另一方面，它并没有真正将您的代码转换为不同的表示形式.取而代之的是将一堆不同的代码片段编织成一个更大的系统的可消耗片段.引导过程然后(如果需要，在编译之后)将这些片段插入并将其插入Angular核心.

Just want to learn how Angular builds and runs behind the scenes?

Below is what I understood thus far. Want to know if I missed something.

How Angular builds

After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.

ng build command compiles the application into an output directory and the build artifacts will be stored in the dist/ directory.

Internal Process

1. Angular CLI runs Webpack to build and bundle all JavaScript and CSS code.

2. In turn Webpack calls the TypeScript loaders which fetches all .ts file in the Angular project and then transpiles them to JavaScript i.e to a .js file, which browsers can understand.

This post says Angular has two compilers:

• View Compiler

• Module Compiler

Questions on builds

What is the sequence of calling the build process?

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.

How Angular runs

When build is completed, all our app's components, services, modules etc are transpiled to JavaScript .js files which is used to run the Angular application in the browser.

Statements in Angular Docs

1. When you bootstrap with the AppComponent class (in main.ts), Angular looks for a <app-root> in the index.html, finds it, instantiates an instance of AppComponent, and renders it inside the <app-root> tag.

2. Angular creates, updates, and destroys components as the user moves through the application.

Questions on runs

Although main.ts is used in the statement above for explaining the bootstrap process, Isn't Angular app is bootstrapped or started using JavaScript .js files?

Isn't all the above statements are done runtime using JavaScript .js files?

Does anyone know how all parts fit together in depth?

解决方案

(When I say Angular I mean Angular 2+ and will explicitly say angular-js if I am mentioning angular 1).

Prelude: It is confusing

Angular, and probably more accurately angular-cli have merged together a number of trending tools in Javascript that are involved in the build process. It does lead to a little bit of confusion.

To further the confusion, the term compile was often used in angular-js to refer to the process of taking the template's pseudo-html and turning it into DOM elements. That's part of what the compiler does but one of the smaller parts.

First of all, there is no need to use TypeScript, angular-cli, or Webpack to run Angular. To answer your question. We should look at a simple question: "What is Angular?"

Angular: What does it do?

This section may be controversial, we will see. At its core, the service that Angular provides, is a dependency injection mechanism which works across Javascript, HTML, and CSS. You write all the little bits and pieces individually and in each little piece you follow Angular's rules for referencing the other pieces. Angular then weaves that altogether somehow.

To be (slightly) more specific:

• Templates allow HTML to be wired into the Javascript component. This allows user input on the DOM itself (e.g. clicking a button) to feed into the Javascript component and also allows variables in the Javascript component to control the structure and values in the DOM.
• Javascript classes (including Javascript components) need to be able to access instances of other Javascript classes they depend on (e.g. classical dependency injection). A BookListComponent needs an instance of a BookListService which might need an instance of a BookListPolicy or something like that. Each of these classes has different lifetimes (e.g. services are usually singletons, components are usually not singletons) and Angular has to manage all those lifetimes, the creation of the components, and the wiring of the dependencies.
• CSS rules needed to be loaded in such a way that they only apply to a subset of the DOM (a component's style is local to that component).

One possibly important thing to note is that Angular is not responsible for how Javascript files reference other Javascript files (e.g. the import keyword). That is taken care of by Webpack.

What does the compiler do?

Now that you know what Angular does we can talk about what the compiler does. I will avoid getting too technical mainly because I'm ignorant. However, in a dependency injection system you typically have to express your dependencies with some kind of metadata (e.g. how does a class say I can be injected, My lifetime is blah, or You can think of me as a Component type of instance). In Java, Spring originally did this with XML files. Java later adopted annotations and they have become the preferred way to express metadata. C# uses attributes to express metadata.

Javascript does not have a great mechanism for exposing this metadata builtin. angular-js made an attempt and it wasn't bad but there were a lot of rules that couldn't be easily checked and were a little confusing. With Angular there are two supported ways of specifying the metadata. You can write pure Javascript and specify the metadata manually, somewhat similar to angular-js and just keep following the rules and writing extra boiler-platey code. Alternatively, you can switch to TypeScript which, as it just so happens, has decorators (those @ symbols) which are used to express metadata.

So here is where we can finally get to the compiler. The compiler's job is to take that metadata and create the system of working pieces that is your application. You focus on all the pieces and all of the metadata and the compiler builds one big interconnected application.

How does the compiler do it?

There are two ways the compiler can work, runtime and ahead-of-time. From here on I will assume you are using TypeScript:

• Runtime: When the typescript compiler runs it takes all the decorator information and shoves it into the Javascript code attached to the decorated classes, methods, and fields. In your index.html you reference your main.js which calls the bootstrap method. That method is passed your top level module.

The bootstrap method fires up the runtime compiler and gives it a reference to that top level module. The runtime compiler then starts to crawl that module, all services, components, etc. referenced by that module, and all of associated metadata, and builds up your application.

• AOT: Rather than do all the work at runtime Angular has provided a mechanism for doing most the work at build time. This is almost always done using a webpack plugin (this must be one of the most popular yet least known npm packages). It runs after the typescript compilation has run so it sees essentially the same input as the runtime compiler. The AOT compiler builds up your application just like the runtime compiler but then saves it back out into Javascript.

The advantage here is not just that you can save the CPU time required for the compilation itself, but it also allows you to reduce the size of your application.

Specific Answers

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.

No. Angular CLI calls Webpack (Angular CLI's real service is configuring webpack. When you run ng build it isn't much more than a proxy to starting Webpack). Webpack first calls the Typescript compiler, then the angular compiler (assuming AOT), all while bundling your code at the same time.

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

I'm not entirely certain what you are asking here. main.ts will be tranpiled down into Javascript. That Javascript will contain a call to bootstrap which is the entry point to Angular. When bootstrap is done you will have your full Angular application running.

This post says Angular has two compilers:

View Compiler

Module Compiler

To be honest I'm just going to claim ignorance here. I think at our level we can just think of it all as one big compiler.

Does anyone know how all parts fit together in depth ?

I hope the above satisfied this.

Don't @ Me: Angular does more than dependency injection

Sure. It does routing, view building, change detection and all kinds of other things. The compiler does actually generate Javascript for view building and change detection. I lied when I said it was just dependency injection. However, the dependency injection is at the core and enough to drive the rest of the answer.

Should we call it a compiler?

It probably does a lot of parsing and lexing and definitely generates a lot of code as a result so you could call it a compiler for that reason.

On the other hand, it isn't really translating your code into merely a different representation. Instead it is taking a bunch of different pieces of code and weaving them into consumable pieces of a larger system. The bootstrap process then (after compiling, if necessary) takes those pieces and plugs them into the Angular core.

这篇关于Angular如何构建和运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！