目录结构

Angular 版本：12.0.1

  1. ng-demo
  2. ├── .git -- Git 相关文件
  3. ├── node_modules -- 为项目提供 npm 包。
  4. |    ├── @angular -- Angular 包
  5. |    └── ……
  6. ├── src -- 项目的源文件
  7. |    ├── app -- 包含定义应用逻辑和数据的组件文件。
  8. |    |    ├── app.component.ts -- 为应用的根组件定义逻辑，名为 AppComponent。
  9. |    |    ├── app.component.html -- 定义与根组件 AppComponent 关联的 HTML 模板。
  10. |    |    ├── app.component.css -- 为根组件 AppComponent 定义了基本的 CSS 样式表。
  11. |    |    ├── app.component.spec.ts -- 为根组件 AppComponent 定义了一个单元测试。
  12. |    |    └── app.module.ts -- 定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。
  13. |    ├── assets -- 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。
  14. |    ├── environments -- 包含特定目标环境的构建配置选项。
  15. |    ├── favicon.ico -- 用作该应用在标签栏中的图标。
  16. |    ├── index.html -- 当有人访问你的站点时，提供服务的主要 HTML 页面。
  17. |    ├── main.ts -- 应用的主要切入点。
  18. |    ├── polyfills.ts -- 为浏览器支持提供了腻子（polyfill）脚本。
  19. |    ├── styles.scss -- 为项目提供样式的 CSS 文件。
  20. |    └── test.ts -- 单元测试的主入口点，带有一些 Angular 特有的配置。
  21. ├── .browserslistrc -- 配置各种前端工具之间共享的目标浏览器和 Node.js 版本。
  22. ├── .editorconfig -- 代码编辑器的配置。
  23. ├── .gitignore -- 指定 Git 应忽略的不必追踪的文件。
  24. ├── angular.json -- CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。
  25. ├── karma.conf.js -- 应用专属的 Karma 配置。
  26. ├── package.json -- 项目可用的 npm 包依赖。
  27. ├── package-lock.json -- 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。
  28. ├── README.md -- 根应用的简介文档。
  29. ├── tsconfig.app.json -- 应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项。
  30. ├── tsconfig.json -- 项目的基本 TypeScript 配置。
  31. └── tsconfig.spec.json -- 应用测试的 TypeScript 配置。

启动路径

主要配置文件 angular.json

在主要配置文件（忽略其他配置）当中指定了主页面和主入口，启动项目后访问，浏览器会显示主页面，逻辑会执行主入口。

  1. {
  2.   "projects": {
  3.     "ag-demo": {
  4.       "architect": {
  5.         "build": {
  6.           "builder": "@angular-devkit/build-angular:browser",
  7.           "options": {
  8.                       # 主页面
  9.             "index": "src/index.html",
  10.                       # 主入口
  11.             "main": "src/main.ts",
  12.           }
  13.         }
  14.       }
  15.     }
  16.   }
  17. }

主入口 main.ts

  1. // 引入 Angular 核心框架中禁用 Angular 的开发模式的方法
  2. import { enableProdMode } from '@angular/core';
  3. // 引入创建浏览器平台实例的方法
  4. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  6. // 引入应用模块
  7. import { AppModule } from './app/app.module';
  8. // 引入环境对象
  9. import { environment } from './environments/environment';
  11. // 如果是生产环境
  12. if (environment.production) {
  13.   // 禁用 Angular 的开发模式，该模式将关闭框架中的断言和其他检查。
  14.   enableProdMode();
  15. }
  17. // 使用给定的运行时编译器（浏览器平台实例）为给定的平台（应用模块）创建 @NgModule 的实例。
  18. platformBrowserDynamic().bootstrapModule(AppModule)
  19.     // 异常时打印异常信息
  20.   .catch(err => console.error(err));

根模块 src/app/app.module.ts

  1. // 引入用于配置元数据的模块
  2. import { NgModule } from '@angular/core';
  3. // 引入浏览器模块
  4. import { BrowserModule } from '@angular/platform-browser';
  5. // 引入根组件
  6. import { AppComponent } from './app.component';
  8. // @NgModule 获取一个元数据对象，它会告诉 Angular 如何编译和启动本应用
  9. @NgModule({
  10.   // 告诉 Angular 哪些组件属于该模块
  11.   declarations: [
  12.     // 根组件
  13.     AppComponent
  14.   ],
  15.   // 告诉 Angular 该模块想要正常工作，还需要哪些模块。
  16.   imports: [
  17.     // 导入 BrowserModule 以获取浏览器特有的服务，比如 DOM 渲染、无害化处理和位置（location）。
  18.     BrowserModule
  19.   ],
  20.   // 该应用所需的服务。
  21.   providers: [],
  22.   // 当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。
  23.   bootstrap: [
  24.     // 根组件，Angular 创建它并插入 index.html 宿主页面。
  25.     AppComponent
  26.   ]
  27. })
  28. // 导出根模块
  29. export class AppModule { }

根组件 src/app/app.component

  1. // 引入组件对象
  2. import { Component } from '@angular/core';
  4. // 一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。
  5. @Component({
  6.   // 这个 CSS 选择器用于在模板中标记出该指令（<app-root></app-root>），并触发该指令的实例化。
  7.   selector: 'app-root',
  8.   // Angular 组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。
  9.   templateUrl: './app.component.html',
  10.   // 一个或多个 URL，指向包含本组件 CSS 样式表的文件。
  11.   styleUrls: ['./app.component.scss']
  12. })
  13. // 导出根组件
  14. export class AppComponent {
  15.   title = 'ag-demo';
  16. }

根模板 src/app/app.component.html

根组件（src/app/app.component）的 HTML 模板，具体内容略。

主页面 src/index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>AgDemo</title>
  6.   <base href="/">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. </head>
  10. <body>
  11.   <!-- 使用根组件，并展示根组件的 HTML 模板（src/app/app.component.html） -->
  12.   <!-- 标签名为根组件（src/app/app.component）的 @Component.selector 的值 -->
  13.   <app-root></app-root>
  14. </body>
  15. </html>

参考来源