微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular项目结构

  • 各种结构风格?
    • 初始项目结构(加粗的是必须有的,普通的是一般会有的,斜体的是项目通常会自定义的)
      • angular.json或者.angular-cli.json(工作区配置文件
        • 为工作区中的所有项目指定 CLI 的认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项,比如 TSLint,Karma 和 Protractor。
        • 在 angular.json 的顶级,一些属性用于配置工作区,其中的 projects 区则包含其余的针对每个项目的配置项。CLI 在工作空间级的认设置可以被项目级的设置所覆盖,而项目级的设置可以被命令行中的设置所覆盖。
      • package.json(工作区配置文件:配置工作空间中所有项目可用的 npm包依赖 。想要安装的依赖,有可能只是配了用哪个大版本,可以使用^、~等符号。
      • package-lock.json(工作区配置文件):提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。真实安装的依赖,基本和package.json中的配置对应,但会有具体的真实下载的依赖包的版本、下载地址、完整性检查码、对其他包的依赖等。
      • browserslist(应用配置文件):可无。配置各种前端工具之间共享的目标浏览器和 Node.js 版本。编译时会依此调整输出的js和css。
      • karma.conf.js(应用配置文件):应用专属的 Karma 配置。主要目标是为开发人员提供高效的测试环境。侧重于单元测试。是一个test runner,。
      • tsconfig.json(应用配置文件):工作空间中各个项目的认 TypeScript 配置。
      • tslint.json(应用配置文件):工作空间中各个项目的认 TSLint 配置。各种代码检查的配置。
      • README.md(工作区配置文件):可无。根应用的简介文档。项目简介。
      • .editorconfig(工作区配置文件):可无。代码编辑器的配置。如编码、缩进方式、换行、trim空格等。通用于各IDE,但可能需要安装插件,如VS Code需要安装EditorConfig for VS Code。
      • .gitignore(工作区配置文件):可无。指定 Git 应忽略的不必追踪的文件。Git的忽略配置文件,即哪些文件/文件夹不需要由Git管理。
      • app.js:可无。自定义的入口文件,可使用node app.js命令启动应用。node.js语法,在webserver启动时执行,可以通过require引入node.js库并使用。
      • protractor.conf.js:可无。基于angular的前端自动化测试工具。侧重于端到端测试。
      • e2e/:端到端测试。常和protractor配合使用。
      • node_modules/
      • src/:根项目的源文件
        • index.html在angular.json或者.angular-cli.json中配置。
        • main.ts:在angular.json或者.angular-cli.json中配置。入口?认定义了environment.production为true时,启用enableProdMode();开关。
        • polyfills.ts
        • styles.css
        • environments/:在angular.json或者.angular-cli.json中配置。当使用ng build -prod命令时使用environment.prod.ts,否则使用environment.ts。会导致main.ts中是否会启用enableProdMode();开关。
          • environment.prod.ts
          • environment.ts
        • assets/
          • css
          • images
          • fonts
          • icons
          • i18n
          • json
        • app/
          • app-routing.module.ts / app.routing.ts
          • app.module.ts
          • app.component.html
          • app.component.ts
          • app.component.css

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐