背景 – 背景信息

我在工作中使用 Angular，但基本的运行方式还没有完全理解。
因此，我打算通过制作一个简单的应用程序来理解 Angular 的工作原理。
我会把学到的东西记录下来作为备忘录。

以下为中文原生的释义，只提供一种选项。

参考文献

Angular实践入门教程

引言部分

尝试自动生成雏形应用程序。

安装Angular CLI

$ npm install -g @angular/cli

确认 Angular 的版本

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.4
Node: 14.17.6
Package Manager: npm 6.14.15
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.4 (cli-only)
@angular-devkit/core         12.2.4 (cli-only)
@angular-devkit/schematics   12.2.4 (cli-only)
@schematics/angular          12.2.4 (cli-only)

生成App的模板

$ ng new angular-to-do
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

执行生成的模板应用

$ ng serve --open

2. 窥视原始应用程序的源代码。

main.ts は AppModule を起動する

AppModule は AppComponent を読み込んでいる

AppComponent は app.component.html を読み込んでいる

似乎 AppComponent 正在加载的 app.component.html 的内容将渲染到 index.html 中的 部分。

模块和组件。

到目前为止,

1. angular.json中指定了”将src/main.ts的执行结果渲染到src/index.html”的设置。

src/main.ts会加载并启动AppModule。

AppModule会加载并启动AppComponent。

AppComponent会将src/app/app.component.html中加载的HTML以嵌入的方式渲染到src/index.html中。

我看到了这样的关系。

在Angular中，我们可以将构成应用程序的功能分解为模块的单位来创建，并通过组合一个或多个模块来构建整个应用程序。

在雛形應用中，只存在一個名為「AppModule」的模塊。AppModule 是一個特殊的模塊，在應用啟動時首先被加載，並被稱為根模塊。

此外，在 Angular 中，我们以组件为单位将视图、样式和逻辑合为一体来创建用户界面组件。创建的组件可以通过在模块中进行注册，从而在该模块内部可供使用。

在原型应用中，AppModule会加载AppComponent并将其插入到index.html中。被插入到index.html的组件被称为根组件。

雛形的應用程序只有根模塊和根組件存在，但在實際應用開發中，我們會根據需要添加組件或根據需要對模塊進行分割，來逐步改進並完善應用程序。