Angular 5.x 系列教程笔记——快速入门

Posted 2022-11-18 天外野草

前言

涉足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 --version

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提供给了我们丰富的配置以及架构支持，免去了一重复的劳作，值得学习。