前言

学习Angular也有一段时间了，一直没有认真写这一方面的博客，接下来利用空闲时间就把这一系列的内容好好串一串，总结一下。

这次的开发项目用到的版本是Angular4。

接下来就看看如何搭建Angular框架吧。

内容

搭建angular开发环境

• 安装Nodejs，

安装Nodejs就不详细解释了，直接官网下载安装就可以了。个人建议版本最好用稳定版。

安装好后在命令行中输入可以查看安装版本：npm -v

• 安装Angular CLI，

安装angular CLI命令：sudo npm install -g @angular/cli

(sudo指使用管理员权限)

angular CLI安装完成后查看版本号或者查看是否安装成功：ng -v

• WebStorm

安装WebStorm和安装Nodejs类似，下载下来直接安装即可。

• 创建项目

创建项目命令：ng new 项目名称

此时，Angular在当前目录生成对应项目名的项目，在 Visual Studio Code中可以打开生成的文件夹查看项目。

项目结构内容

e2e ------------------------------用于自动化测试
node_modules------------------存放依赖包的地方
src--------------------------------存放源代码
app----------------------------根模块
     app.component.css------样式文件
　　　app.component.html---模板
　　　app.component.spec.ts-测试
　　　app.component.ts-------组件
　　　app.module.ts------------模块
environments----------------环境
　　　environment.prod.ts----生产环境
　　　environment.ts----------非生产环境
index.html-------------------宿主页面
mian.ts-----------------------程序引导
tsconfig.json-----------------编译配置
angular-cli.json--------------angular-cli配置
package.json----------------依赖包以及npm的命令