前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧。

下面使我们项目的整体结构,包括node的模板、src资源文件以及配置文件等。

下面是根目录文件夹内的文件用途:

文件

用途

e2e/

在 e2e/ 下是端到端(end-to-end)测试。 它们不在 src/ 下,是因为端到端测试实际上和应用是相互独立的,它只适用于测试你的应用而已。 这也就是为什么它会拥有自己的 tsconfig.json

node_modules/

Node.js 创建了这个文件夹,并且把 package.json 中列举的所有第三方模块都放在其中。

.editorconfig

给你的编辑器看的一个简单配置文件,它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支持 .editorconfig 文件,详情参见 http://editorconfig.org 。

.gitignore

一个 Git 的配置文件,用来确保某些自动生成的文件不会被提交到源码控制系统中。

angular.json

Angular CLI 的配置文件。 在这个文件中,你可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。 要了解更多,请参阅它的官方文档。

package.json

npm 配置文件,其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本

protractor.conf.js

Protractor使用的端到端测试配置文件,当运行 ng e2e 的时候会用到它。

README.md

项目的基础文档,预先写入了 CLI 命令的信息。 别忘了用项目文档改进它,以便每个查看此仓库的人都能据此构建出你的应用。

tsconfig.json

TypeScript 编译器的配置,你的 IDE 会借助它来给你提供更好的帮助。

tslint.json

TSLintCodelyzer用的配置信息,当运行 ng lint 时会用到。 Lint 功能可以帮你保持代码风格的统一。

src文件夹:你的应用代码位于 src 文件夹中。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。

下面是这些文件的作用:

文件

用途

app/app.component.{ts,html,css,spec.ts}

使用 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。

app/app.module.ts

定义 AppModule根模块为 Angular 描述如何组装应用。 目前,它只声明了 AppComponent。 不久,它将声明更多组件。

assets/*

这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。

environments/*

这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址,或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些,CLI 都替你考虑到了。

browserslist

一个配置文件,用来在不同的前端工具之间共享目标浏览器

favicon.ico

每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。

index.html

这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI 会自动把所有 js 和 css 文件添加进去,所以你不必在这里手动添加任何 <script>或 <link> 标签。

karma.conf.js

Karma的单元测试配置,当运行 ng test 时会用到它。

main.ts

这是应用的主要入口点。 使用JIT 编译器编译本应用,并启动应用的根模块 AppModule,使其运行在浏览器中。 你还可以使用AOT 编译器,而不用修改任何代码 —— 只要给 ng build 或 ng serve 传入 --aot 参数就可以了。

polyfills.ts

不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本(polyfill)能把这些不同点进行标准化。 你只要使用 core-js 和 zone.js 通常就够了,不过你也可以查看浏览器支持指南以了解更多信息。

styles.css

这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。

test.ts

这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。

tsconfig.{app|spec}.json

TypeScript 编译器的配置文件。tsconfig.app.json 是为 Angular 应用准备的,而 tsconfig.spec.json 是为单元测试准备的。

tslint.json

额外的 Linting 配置。当运行 ng lint 时,它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。

Angular的项目结构的更多相关文章

  1. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  2. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  3. Angular 5项目

    Angular 5项目 如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angu ...

  4. angular2.0入门---webStorm创建angular CLI项目

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...

  5. Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构

    目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...

  6. 一文说通Blazor for Server-Side的项目结构

    用C#代替Javascript来做Web应用,是有多爽?   今天聊聊 Blazor. Blazor 是一个 Web UI 框架.这个框架允许开发者使用 C# 来创建可运行于浏览器的具有完全交互 UI ...

  7. ABP 适用性改造 - 精简 ABP CLI 生成的项目结构

    Overview 不管是公司或者个人都会有不同的开发习惯,通过建立项目模板,既可以使开发人员聚焦于业务功能的开发,也可以在一定程度上统一不同开发人员之间的开发风格.在使用 ABP 框架的过程中,对于 ...

  8. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  9. 【完全开源】知乎日报UWP版:项目结构说明、关键源代码解释

    目录 说明 项目结构 关键代码 演示视频 说明 上一篇博客将源码放出来了,但是并没有做过多的介绍,所以如果自己硬看可能需要花费很长的时间,尤其这些代码并不是自己写的.项目不算复杂但是也不算简单,这篇文 ...

随机推荐

  1. HTTPS 到底加密了什么?

    关于 HTTP 和 HTTPS 这个老生常谈的话题,我们之前已经写过很多文章了,比如这篇<从HTTP到HTTPS再到HSTS>,详细讲解了 HTTP 和 HTTPS 的进化之路,对的没错, ...

  2. 并发编程(二)—— CountDownLatch、CyclicBarrier和Semaphore

    本文将讲解CountDownLatch,CyclicBarrier和Semaphore这三个并发包里面的辅助类. CountDownLatch 正如每个Java文档所描述的那样,CountDownLa ...

  3. Kubernetes审计日志方案

    前言 当前Kubernetes(K8S)已经成为事实上的容器编排标准,大家关注的重点也不再是最新发布的功能.稳定性提升等,正如Kubernetes项目创始人和维护者谈到,Kubernetes已经不再是 ...

  4. 关于 JavaScript 的 null 和 undefined,判断 null 的真实类型

    null.undefined 博客地址: https://ainyi.com/39 undefined:表示一个变量最原始的状态,而非人为操作的结果 null:表示一个对象被人为的重置为空对象,而非一 ...

  5. MVC架构中的Repository模式 个人理解

    关于MVC架构中的Repository模式   个人理解:Repository是一个独立的层,介于领域层与数据映射层(数据访问层)之间.它的存在让领域层感觉不到数据访问层的存在,它提供一个类似集合的接 ...

  6. 【学习笔记】tensorflow实现一个简单的线性回归

    目录 准备知识 Tensorflow运算API 梯度下降API 简单的线性回归的实现 建立事件文件 变量作用域 增加变量显示 模型的保存与加载 自定义命令行参数 准备知识 Tensorflow运算AP ...

  7. Asp.Net MVC 读取json文件

    有些系统上面的配置可以做成config里面的appsetting.这里要求写在json文件里面. 首先 添加命名空间 using Newtonsoft.Json; using System.IO; u ...

  8. Chrome 插件——二维码生成笔记

    原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了crx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一 ...

  9. 小tips:path的join和resolve的使用区别

    1.连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字符串.要连接的多个路径可做为参数传入. path.join()方法在 ...

  10. SQL Server中几种遍历方式比较

    SQL遍历解析 在SQL的存储过程,函数中,经常需要使用遍历(遍历table),其中游标.临时表等遍历方法很常用.面对小数据量,这几种遍历方法均可行,但是面临大数据量时,就需要择优选择,不同的遍历方法 ...