ng 启动过程
目录结构
.
├── e2e 端到端测试 (暂且不关心)
├── node_modules NPM 安装的第三方包
├── src 存放业务源码
├── .angular-cli.JSON AngularCLI 脚手架工具配置文件
├── .editorconfig 针对编辑器的代码风格约束
├── .gitignore Git 仓库忽略配置项
├── karma.conf.JS 测试配置文件 (给 karma 用的, 暂且不用关心)
├── package.JSON 项目包说明文件
├── protractor.conf.JS 端到端测试配置文件 (暂且不用关心)
├── README.md 项目说明文件
├── tsconfig.JSON TypeScript 配置文件
└── tslint.JSON TypeScript 代码风格校验工具配置文件 (类似于 eslint)
NPM scripts 介绍
...
"scripts": {
"ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
"start": "ng serve", 运行开发模式
"build": "ng build --prod", 运行项目打包构建 (用于发布到生成环境)
"test": "ng test", 运行 karma 单元测试
"lint": "ng lint", 运行 TypeScript 代码校验
"e2e": "ng e2e" 运行 protractor 端到端测试
},
...
.angular-cli.JSON 文件
- {
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "project": {
- "name": "my-app"
- },
- "apps": [
- {
"root": "src", 源码根目录
"outDir": "dist", 打包编译结果目录
"assets": [ 存放静态资源目录
- "assets",
- "favicon.ico"
- ],
"index": "index.html", 单页面
"main": "main.ts", 模块启动入口
"polyfills": "polyfills.ts", 用以兼容低版本浏览器不支持的 JavaScript 语法特性
"test": "test.ts", 测试脚本
- "tsconfig": "tsconfig.app.json",
- "testTsconfig": "tsconfig.spec.json",
"prefix": "app", 使用脚手架工具创建组件的自动命名前缀
"styles": [ 全局样式文件
- "styles.CSS"
- ],
"scripts": [], 全局脚本文件
- "environmentSource": "environments/environment.ts",
- "environments": {
- "dev": "environments/environment.ts",
- "prod": "environments/environment.prod.ts"
- }
- }
- ],
"e2e": { 端到端测试相关配置
- "protractor": {
- "config": "./protractor.conf.js"
- }
- },
"lint": [ TypeScript 代码风格校验相关配置
- {
- "project": "src/tsconfig.app.json",
- "exclude": "**/node_modules/**"
- },
- {
- "project": "src/tsconfig.spec.json",
- "exclude": "**/node_modules/**"
- },
- {
- "project": "e2e/tsconfig.e2e.json",
- "exclude": "**/node_modules/**"
- }
- ],
"test": { karma 单元测试相关配置
- "karma": {
- "config": "./karma.conf.js"
- }
- },
"defaults": { 默认后缀名
- "styleExt": "css",
- "component": {}
- }
- }
main.JS
描述: 模块化启动入口
职责: 加载启动根模块
AppModule
描述: 项目根模块
职责: 把组件, 服务, 路由, 指令等组织到一起, 设置启动组件为根组件
AppComponent
描述: 项目根组件
职责: 替换掉 index.HTML 文件中的
<App-root></App-root>
节点
来源: http://www.bubuko.com/infodetail-3388473.html