360SDN.COM

Angular5.x入门教程2--快速入门与项目文件结构分析

来源:  2018-04-04 17:16:12    评论:0点击:

来源:https://blog.csdn.net/superlinmeng/article/details/79203335

Angular5项目文件夹结构分析,有图有真相,上图

这里写图片描述

SRC文件夹内部

这里写图片描述




前言

涉足Angular是从1.x的版本,几年间Angular已经从1.x迭代到了2.x、4.x在到现在的5.0, 发展非常的迅速,性能也得到了很大的提升,接下来我们会逐步带大家快速了解一下Angular 5.x的使用。
安装CLI

Angular 2.0开始提供了CLI命令工具,可以方便的管理和创建工程,这个CLI我们可以使用如下命令安装:

sudo npm install -g @angular/cli  



注意:Angular CLI对Node 的版本有所要求(node 6.9.x and npm 3.x.x ),所以大家需要确认自己的Node版本,查看是否有警告信息:

ng --v

ng就是angular提供给我们的命令,接下来我们使用它管理项目。
创建工程

打开你的命令终端,使用如下命令创建一个工程:

ng new DemoApp


这里需要耐心的等一下,因为需要通过npm下载所有的依赖类库。
运行工程

创建好一个工程之后,我们运行一下:

cd DemoApp
ng serve --o

此时,会自动打开浏览器运行,–o即为open的意思。(已经不再需要我们自己配置运行脚本了,非常方便)
工程结构分析

创建好工程以后,我们会看到如下的结构目录:


 

下面我们逐一分析一下Src下面每个文件包的作用:

文件名 作用描述
app/app.component.{ts,html,css,spec.ts} 整个应用的根组件
assets/* 存放图片文件夹
environments/* 定义全局的环境变量,将用户开发和产品环境
index.html 主要的的html文件, serve的时候会读取此文件,并且载入css,js文件,通常不需要更改此文件
main.ts 主要的入口文件,在编译运行时,会读取此文件,编译模式包括JIT compiler(开发环境) 和 AOTCompiler(产品环境 –aot)
polyfills.ts 不同的浏览器对个别API的支持程度不同,需要加入前缀,保证在特定的浏览器能够正常运行,在此文件中,会引入zong.js
test.ts 单元测试的入口文件
tsconfig.{app spec}.json

解释完src文件夹,我们再来看一下根目录下面,angular cli 帮助我们建立了哪些有用的配置文件:

文件名 作用描述
e2e/ 独立于应用的点对点测试文件夹,包含独立的配置文件
.angular-cli.json Angular CLI命令配置文件
.editorconfig 编辑工具的基础配置文件,保证每个人在自己的编辑工具中能够拥有相同的基础配置,比如字符,缩进等等
karma.conf.js karma 单元测试配置文件,应用于ng test命令
package.json 整个应用程序依赖库的配置文件
protractor.conf.js 针对于protractor点对点测试的配置文件, 执行命令 ng e2e
tslint.json 代码检查配置文件,执行ng lint, 团队代码更加规范化
tsconfig.json 针对于IDE的type script编译配置文件, IDE会根据这个配置文件提供帮助

 总结

相对其他框架而言,Angular CLI提供给了我们丰富的配置以及架构支持,免去了一重复的劳作,值得学习。

 来源:https://blog.csdn.net/jiangbo_phd/article/details/78916293

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权