AngularJS 2 Day3 了解Angular2项目架构

这一章节主要会带各位认识一下当我使用Angular CLI 命令产生出的项目

到底这么多项目中分别代表什么意义呢?


首先,各位在前一章中了解到了常用的CLI命令大概有哪些

其中,我们透过 ng new "项目名称" 来建置我们的项目

这时候我们的项目大致上会长这个样子:

有没有发现到,我们之前仅输入短短的一行命令,我们的Angular CLI 就帮我们完成了许多事情

因此CLI真的是一个很棒的东西,还记得笔者刚初学的时候,因为还不了解,一直觉得为什么不CDN就好

非得要透过命令来编写程序,直到后来发现CLI强大的地方,笔者的问题自然也就烟消云散

回归到我们的项目目录上,会发现在目录中帮我们创建了许多数据夹以及文件

到底这些文件在做什么用呢?

e2e

e2e这个数据夹主要用来存放end to end的测试案例,关于测试相关的设定,则是存放在/protractor.conf.js这个文件中。

因此我们可以透过ng e2e命令来进行end to end的测试。

不过由于我们暂时不会使用到这功能,因此就不在这边多做攒述

node_modules

在一开始各位使用npm进行安装的时候,会经过一阵漫长的等待,为什么会那么久呢?主要原因在于CLI帮你安装了各种套件在node_modules里面

因此需要大量的时间,而在下一篇我会讲解如何加快CLI安装的时间。

src

这应该就不用多说了,所有项目你要撰写的地方都是在这里。

.editorconfig

这个文件主要是让我们的IDE 知道我们的程序是怎么撰写的,包括风格等等。

不过我们目前不需要用到此功能因此也不多在攒述。

.gitgonre

这个文件主要是存放git相关的文件,有使用过git的人应该就不陌生了。

angular-cli.json

给Angular CLI看的配置文件,基本上就是一些目录及打包程序时的设定。

另外如果有需要引入额外的程序库(Bootstrap、JQuery等),都可以在这个文件中设定。

karma.conf.js

这格文件主要是在针对unit test使用的测试框架,因此相关设定都会写在这里。

如果需要要进行unit test时,可以使用ng test命令来帮助我们执行。

tslint.json

用来针对TypeScript的程序撰写风格进行规范的配置文件,我们也可以透过TSLint来检查TypeScript的coding style,只要执行ng lint来检查就可以了。

以上文章叙述如有错误及观念不正确,请不吝啬指教:)

有任何家教、案子 或技术相关问题 请都欢迎联系我

http://www.zhenghui.idv.tw/

原文:大专栏  AngularJS 2 Day3 了解Angular2项目架构


猜你喜欢

转载自www.cnblogs.com/chinatrump/p/11516539.html