Angular(四)--创建项目及目录结构介绍

     小编用的IDE是Visual Studio Code(Webstorm、idea也是比较好用的)。

一、创建angular项目

 1、    在vs Code里打开命令窗口(快捷键是ctrl+tab上面那个键即1前面那个键,原谅小编实在不知道这个键怎么形容)


 可以切换到你想要的目录下,然后输入:

ng new angular-practice

 angular-practice 即为项目名称,自己命名就好。

2、切到项目路径下

cd angular-practice

3、安装项目所依赖的所有node.js 包

cnpm install 

4、启动web服务器

ng serve

   

这样即为成功了!


二、目录结构及详解

   初始化后形成的目录结构:

 最外层结构:

 

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

node_modules:第三方依赖包存放目录

src:应用源代码目录

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

.editorconfig:webstorm的配置文件

.gitignore:git的配置文件

karma.conf.js:karma是单元测试的执行器,此文件时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:放全局样式

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

tsconfig.app.json:TypeScript编译器的配置,添加第三方依赖时会修改


App目录:


一个Angular程序至少需要一个模块和一个组件。在新建项目时已经生成了。

app.component.ts:这个便是组件,组件是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的html

app.module.ts:这个表示模块

猜你喜欢

转载自blog.csdn.net/wxr15732623310/article/details/79340697