zoukankan      html  css  js  c++  java
  • ng-项目结构

    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> 节点
  • 相关阅读:
    Unity ShaderLab学习总结
    shader内置变量
    关于Unity中Shader的内置值
    Canvas控件最后一蛋——CanvasGroup
    Unity中关于Device Filter的选择问题
    Unity中使用扩展方法解决foreach导致的GC
    如何精简Unity中使用的字体文件
    好插件让你事半功倍!【资源篇】
    BFC(块级格式化上下文)的作用及生产方法
    获取视频或者音频时长
  • 原文地址:https://www.cnblogs.com/colorchild/p/13488562.html
Copyright © 2011-2022 走看看