Angular 企业级示例项目教程

1. 项目的目录结构及介绍

angular-enterprise-example/
├── apps/
│   ├── app1/
│   ├── app2/
│   └── app3/
├── libs/
│   ├── lib1/
│   ├── lib2/
│   └── lib3/
├── server/
│   ├── api/
│   └── server.js
├── angular-cli.json
├── editorconfig
├── gitignore
├── travis.yml
├── LICENSE
├── README.md
├── build.sh
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── proxy.conf.json
├── test.js
├── tsconfig.compodoc.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

目录结构介绍

• apps/: 包含多个应用程序，每个应用程序都有自己的目录。
• libs/: 包含多个库，这些库可以被应用程序共享。
• server/: 包含后端服务器的代码。
• angular-cli.json: Angular CLI 的配置文件。
• editorconfig: 编辑器配置文件。
• gitignore: Git 忽略文件。
• travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• build.sh: 构建脚本。
• karma.conf.js: Karma 测试运行器的配置文件。
• package.json: 项目依赖和脚本配置文件。
• protractor.conf.js: Protractor 端到端测试配置文件。
• proxy.conf.json: 代理配置文件。
• test.js: 测试脚本。
• tsconfig.compodoc.json: Compodoc 文档生成配置文件。
• tsconfig.json: TypeScript 编译配置文件。
• tsconfig.spec.json: 测试配置文件。
• tslint.json: TSLint 代码风格检查配置文件。

2. 项目的启动文件介绍

启动文件

• angular-cli.json: Angular CLI 的配置文件，定义了项目的结构和启动配置。
• package.json: 包含了项目的依赖和启动脚本，例如 npm start 或 yarn start。

启动命令

在项目根目录下运行以下命令启动项目：

npm start

或

yarn start

3. 项目的配置文件介绍

配置文件

• angular-cli.json: 定义了 Angular 项目的结构和配置，包括应用的入口点、样式文件、环境配置等。
• tsconfig.json: TypeScript 编译配置文件，定义了编译选项、模块解析策略等。
• tslint.json: TSLint 代码风格检查配置文件，定义了代码风格规则。
• karma.conf.js: Karma 测试运行器的配置文件，定义了测试环境、测试文件路径等。
• protractor.conf.js: Protractor 端到端测试配置文件，定义了测试环境、测试文件路径等。
• proxy.conf.json: 代理配置文件，用于开发环境中的 API 代理。

配置文件示例

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-enterprise-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "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