zoukankan      html  css  js  c++  java
  • 【2019-10-16】创建工作空间、应用,库时,自动生成的文件结构

    创建工作空间、应用,库时,自动生成的文件结构


    1、创建工作空间

    Step1:命令:ng new my-workspace --createApplication="false"

    每个工作空间中的所有项目共享一个CLI配置环境,该工作空间的顶层包含着全工作空间级的配置文件

    Step2:生产的文件项有:

    node_modules

    .editorconfig

    .gitignore

    angular.json

    package-lock.json //提供npm客户端安装到node_modules的所有软件包的版本信息

    package.json //配置工作空间中所有项目可用的npm包依赖

    README.md

    tsconfig.json // 工作空间中各个项目的默认TypeScript 配置 ,如果每个项目的此配置文件不同,可删除这里的文件,单独在项目中进行配置

    tslint.json // 工作空间中各个项目的默认TSLint 配置,如果每个项目的此配置文件不同,可删除这里的文件,单独在项目中进行配置


    2、创建应用

    Case1 : 创建工作空间的同时创建应用

    Step1:命令:ng new my-app // 在创建工作空间的同时,并在src文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件,包括一个根组件及其模板

    Step2:生产的文件项有:

    e2e //组针对根应用的端到端测试的源文件,以及测试专属的配置文件。

    node_modules

    src
    --app //包含定义应用逻辑和数据的组件文件
    -- app-routing.module.ts
    -- app.component.html
    -- app.component.scss
    -- app.component.ts //为应用的根组件定义逻辑,名为 AppComponent
    -- app.component.spec.ts //为根组件 AppComponent 定义了一个单元测试。
    -- app.module.ts //定义了名为 AppModule 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时,它们也必须在这里声明。
    --assets //包含要在构建应用时应该按原样复制的图像和其它静态资源文件。

    --environments //包含特定目标环境的构建配置选项。默认情况下,有一个无名的标准开发环境和一个生产(“prod”)环境。你还可以定义其它的目标环境配置。
    -- environment.prod.ts
    -- environment.ts

    --favicon.ico //用作该应用在标签栏中的图标。

    --index.html //当有人访问你的站点时,提供服务的主要HTML页面。CLI会在构建你的应用时自动添加所有的JavaScript和CSS文件,所以你通常不用手动添加任何<script> 或 <link> 标签。

    --main.ts //应用的切入点,用JIT编译器编译应用时,然后引导应用的根模块在浏览器中运行,你也可以在不改变任何代码的情况下改用AOT编译器,只要在CLI的build和serve命令中加上--aot标志就可以了。

    --polyfills.ts // Provides polyfill scripts for browser support.
    --styles.scss // 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。
    --test.ts //单元测试的主入口点,带有一些Angular特有的配置。你通常不需要编辑这个文件。

    .editorconfig

    .gitignore

    angular.json

    browserslist //配置各种前端工具之间共享的目标浏览器和 Node.js 版本。

    karma.conf.js

    package-lock.json

    package.json

    README.md

    tsconfig.app.json // 应用专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器的选项

    tsconfig.json

    tsconfig.spec.json //应用测试的 TypeScript 配置

    tslint.json //应用专属的 TSLint 配置。


    Case2: 单独创建应用

    Step1: 命令: ng generate application my-app // 需要进入一个已有的工作空间,才可以使用该命令

    //会在顶层创建一个projects目录,目录下创建my-app应用

    Step2: projects/my-app下的文件项有:

    e2e

    src // is same as src in the Case1

    browserslist

    karma.conf.js

    tsconfig.app.json

    tsconfig.spec.json

    tslint.json

    3、创建库

    Step1:命令:ng generate library my-library // 需要进入一个已有的工作空间,才可以使用该命令

    //若顶层不存在projects目录,则会自动创建一个projects目录,目录下创建my-library库

    Step2: projects/my-library下的文件项有:

    src
    --lib // 包含库项目的逻辑和数据像应用项目一样,库项目也可以包含组件,服务,模块,指令和管道
    -- my-library.component.spec.ts
    -- my-library.component.ts
    -- my-library.module.ts
    -- my-library.service.spec.ts
    -- my-library.service.ts
    --public-api.ts // 指定从库中导出的所有文件

    --test.ts //单元测试的主要入口点是一些库专属的配置。你通常不用编辑这个文件。

    karma.conf.js // 库专属的 Karma 配置。

    ng-package.json // 构建库时,ng-packagr 用到的配置文件。

    package.json //配置这个库所需的 npm 包依赖。

    README.md

    tsconfig.lib.json //库专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器选项。

    tsconfig.spec.json //测试库时用到的 TypeScript 配置

    tslint.json

     

     

     

  • 相关阅读:
    mysql性能分析工具
    vim使用大全
    Vue computed属性
    模板题 + KMP + 求最小循环节 --- HDU 3746 Cyclic Nacklace
    Greedy --- HNU 13320 Please, go first
    DFS --- HNU 13307 Galaxy collision
    HNU 13308 Help cupid
    Linux
    dp
    2015 Multi-University Training Contest 2 1006 Friends
  • 原文地址:https://www.cnblogs.com/QQ-lala/p/11687333.html
Copyright © 2011-2022 走看看