内容纲要

  • 项目结构介绍
  • 了解一个 Angular 应用是如何启动的

ng启动过程.png

目录结构

  1. .
  2. ├── e2e 端到端测试（暂且不关心）
  3. ├── node_modules npm安装的第三方包
  4. ├── src 存放业务源码
  5. ├── .angular-cli.json AngularCLI脚手架工具配置文件
  6. ├── .editorconfig 针对编辑器的代码风格约束
  7. ├── .gitignore Git仓库忽略配置项
  8. ├── karma.conf.js 测试配置文件（给karma用的，暂且不用关心）
  9. ├── package.json 项目包说明文件
  10. ├── protractor.conf.js 端到端测试配置文件（暂且不用关心）
  11. ├── README.md 项目说明文件
  12. ├── tsconfig.json TypeScript配置文件
  13. └── tslint.json TypeScript代码风格校验工具配置文件（类似于 eslint）

npm scripts 介绍

  1. ...
  2. "scripts": {
  3.     "ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
  4.     "start": "ng serve", 运行开发模式
  5.     "build": "ng build --prod", 运行项目打包构建（用于发布到生成环境）
  6.     "test": "ng test", 运行karma单元测试
  7.     "lint": "ng lint", 运行TypeScript代码校验
  8.     "e2e": "ng e2e" 运行protractor端到端测试
  9.   },
  10. ...

.angular-cli.json 文件

  1. {
  2.   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3.   "project": {
  4.     "name": "my-app"
  5.   },
  6.   "apps": [
  7.     {
  8.       "root": "src", 源码根目录
  9.       "outDir": "dist", 打包编译结果目录
  10.       "assets": [ 存放静态资源目录
  11.         "assets",
  12.         "favicon.ico"
  13.       ],
  14.       "index": "index.html", 单页面
  15.       "main": "main.ts", 模块启动入口
  16.       "polyfills": "polyfills.ts", 用以兼容低版本浏览器不支持的 JavaScript 语法特性
  17.       "test": "test.ts", 测试脚本
  18.       "tsconfig": "tsconfig.app.json",
  19.       "testTsconfig": "tsconfig.spec.json",
  20.       "prefix": "app", 使用脚手架工具创建组件的自动命名前缀
  21.       "styles": [ 全局样式文件
  22.         "styles.css"
  23.       ],
  24.       "scripts": [], 全局脚本文件
  25.       "environmentSource": "environments/environment.ts",
  26.       "environments": {
  27.         "dev": "environments/environment.ts",
  28.         "prod": "environments/environment.prod.ts"
  29.       }
  30.     }
  31.   ],
  32.   "e2e": { 端到端测试相关配置
  33.     "protractor": {
  34.       "config": "./protractor.conf.js"
  35.     }
  36.   },
  37.   "lint": [ TypeScript代码风格校验相关配置
  38.     {
  39.       "project": "src/tsconfig.app.json",
  40.       "exclude": "**/node_modules/**"
  41.     },
  42.     {
  43.       "project": "src/tsconfig.spec.json",
  44.       "exclude": "**/node_modules/**"
  45.     },
  46.     {
  47.       "project": "e2e/tsconfig.e2e.json",
  48.       "exclude": "**/node_modules/**"
  49.     }
  50.   ],
  51.   "test": { karma单元测试相关配置
  52.     "karma": {
  53.       "config": "./karma.conf.js"
  54.     }
  55.   },
  56.   "defaults": { 默认后缀名
  57.     "styleExt": "css",
  58.     "component": {}
  59.   }
  60. }

main.js

  • 描述：模块化启动入口
  • 职责：加载启动根模块

AppModule

  • 描述：项目根模块
  • 职责：把组件、服务、路由、指令等组织到一起，设置启动组件为根组件

AppComponent

  • 描述：项目根组件
  • 职责：替换掉 index.html 文件中的 <app-root></app-root> 节点

其它资源

  • 资源
  • 指令
  • 路由
  • 服务
  • ……