angular 标准目录结构_Angular-cli新建项目目录结构详解

Angular-cli新建项目目录结构详解

在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目，要想写项目，首先我们要先搞清楚项目的目录结构是怎样的，每个文件又有什么意义，文件中的代码又起到什么作用。

首先看一下整体的目录结构：

可以看到，命令行工具自动生成了很多文件和目录，我们来说说这些目录是干什么的

首层目录：

node_modules 第三方依赖包存放目录

e2e 端到端的测试目录用来做自动测试的

src 应用源代码目录

.angular-cli.json Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包比如jquery等

karma.conf.js karma是单元测试的执行器，karma.conf.js是karma的配置文件

package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。

protractor.conf.js 也是一个做自动化测试的配置文件

README.md 说明文件

tslint.json 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它

src目录：

app目录包含应用的组件和模块，我们要写的代码都在这个目录

assets目录资源目录，存储静态资源的比如图片

environments目录环境配置。Angular是支持多环境开发的，我们可以在不同的环境下(开发环境，测试环境，生产环境)共用一套代码，主要用来配置环境的

index.html 整个应用的根html，程序启动就是访问这个页面

main.ts 整个项目的入口点，Angular通过这个文件来启动项目

polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下

styles.css 主要是放一些全局的样式

tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件

tsconfig.spec.json 不用管

test.ts 也是自动化测试用的

typings.d.ts 不用管

app目录(重点)

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。

一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。

参考链接：http://blog.csdn.net/yuzhiqiang_1993/article/details/71191873

angular 标准目录结构_Angular-cli新建项目目录结构详解相关推荐

pycharm新建项目环境设置详解
1引言 pycharm是当前最热门的python编译器.使用pycharm新建一个python项目时,需要设置项目路径.选择环境或新建环境,初学者往往很难理解这几个概念的区别和关系,就无法对项目结构的 ...
nodeJS入门——新建一个项目及代码详解
nodeJS入门--新建一个项目及代码详解有了解nodejs的童鞋们知道,nodejs有很多的依赖,那么我们在新建一个项目的时候,如何快速的导入这些依赖从而创建一个nodejs项目呢,接下来会 ...
maven 与intellij IDEA 下maven 为groovy 项目生成jar 详解
2019独角兽企业重金招聘Python工程师标准>>> W7下安装 maven与intellij IDEA 下maven为groovy项目生成jar详解(适合新手) 第一步:下载ma ...
怎么创建python django项目_创建Django项目图文实例详解
本文实例讲述了创建Django项目的方法.分享给大家供大家参考,具体如下: 创建Django项目创建一个HelloDjango项目 GitHub地址:https://github.com/liang ...
docker 打包部署 python项目_Docker如何部署Python项目的实现详解
Docker 是一个开源项目,为开发人员和系统管理员提供了一个开放平台,可以将应用程序构建.打包为一个轻量级容器,并在任何地方运行.Docker 会在软件容器中自动部署应用程序. 在本篇中,我将介绍如 ...
简历项目描述过程详解
简历项目描述过程详解一.项目分点 1.1 集群规模 1.2 框架结构,画出来 1.3 框架 1.3.1 第一个Flume 1.3.1.1 碰到的问题 1.3.2 kafka 1.3.2.1 框架介绍 ...
vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解
前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需 ...
Git学习系列之Git基本操作提交项目（图文详解）
前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是使用 Ecl ...
stm32项目平衡车详解(stm32F407)下
stm32项目平衡车详解(stm32F407)下本文章学习借鉴于创客学院团队,以表感谢.教学视频 B站学习地址 HC-SRO4 超声波测距避障功能开发 TSL1401 CCD摄像头实现小车巡线功能 ...

angular 标准目录结构_Angular-cli新建项目目录结构详解

angular 标准目录结构_Angular-cli新建项目目录结构详解相关推荐

最新文章

热门文章