angular项目文件概览

 

 

在Mac上打开终端，输入ng new b-app  以下：

而后在webstorm中打开

 

src文件夹

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

src

app

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

assets

.gitkeep

environments

environment.prod.ts

environment.ts

favicon.ico

index.html

main.ts

polyfills.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

File 文件	Purpose 用途
app/app.component.{ts,html,css,spec.ts}	使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts	定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。
assets/*	这个文件夹下你能够放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*	这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 好比你可能在产品环境中使用不一样的API端点地址，或使用不一样的统计Token参数。 甚至使用一些模拟服务。 全部这些，CLI都替你考虑到了。
favicon.ico	每一个网站都但愿本身在书签栏中能好看一点。 请把它换成你本身的图标。
index.html	这是别人访问你的网站是看到的主页面的HTML文件。 大多数状况下你都不用编辑它。 在构建应用时，CLI会自动把全部js和css文件添加进去，因此你没必要在这里手动添加任何 <script> 或 <link> 标签。
main.ts	这是应用的主要入口点。 使用JIT compiler编译器编译本应用，并启动应用的根模块AppModule，使其运行在浏览器中。 你还可使用AOT compiler编译器，而不用修改任何代码 —— 只要给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是为单元测试准备的。

根目录

src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。

my-app

e2e

app.e2e-spec.ts

app.po.ts

tsconfig.e2e.json

node_modules/...

src/...

.angular-cli.json

.editorconfig

.gitignore

karma.conf.js

package.json

protractor.conf.js

README.md

tsconfig.json

tslint.json

File 文件	Purpose 用途
e2e/	在e2e/下是端到端（end-to-end）测试。 它们不在src/下，是由于端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。 这也就是为何它会拥有本身的tsconfig.json。
node_modules/	Node.js建立了这个文件夹，而且把package.json中列举的全部第三方模块都放在其中。
.angular-cli.json	Angular CLI的配置文件。 在这个文件中，咱们能够设置一系列默认值，还能够配置项目编译时要包含的那些文件。 要了解更多，请参阅它的官方文档。
.editorconfig	给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每一个人都具备基本的编辑器配置。 大多数的编辑器都支持.editorconfig文件，详情参见 http://editorconfig.org 。
.gitignore	一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
karma.conf.js	给Karma的单元测试配置，当运行ng test时会用到它。
package.json	npm配置文件，其中列出了项目使用到的第三方依赖包。 你还能够在这里添加本身的自定义脚本。
protractor.conf.js	给Protractor使用的端到端测试配置文件，当运行ng e2e的时候会用到它。
README.md	项目的基础文档，预先写入了CLI命令的信息。 别忘了用项目文档改进它，以便每一个查看此仓库的人都能据此构建出你的应用。
tsconfig.json	TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。
tslint.json	给TSLint和Codelyzer用的配置信息，当运行ng lint时会用到。 Lint功能能够帮你保持代码风格的统一。