Angular总结一：环境搭建

工欲善其事必先利其器，开发 Angular 项目首先要搭建环境。Angular 的环境搭建包括三个方面，开发环境 WebStorm，命令行工具 Angular CLI，以及 nodejs。

1、安装 nodejs

进入到 nodejs 的官网 https://nodejs.org/en/ 去下载安装包，下载慢的同窗能够去个人百度网盘下载：https://pan.baidu.com/s/1mkilULq 密码：uaf7

根据电脑操做系统推荐了不一样的版本，这里能够选择以上两个中的其中一个，下载完成后是一个 msi 文件，右键选择安装

而后一路点击Next就好了。

安装完成后，运行cmd打开命令行工具，输入 node -v 若是出现版本号，就说明nodejs安装成功了。安装nodejs的同时，nodejs 的包管理器 npm 也一并安装完成了。

 

2、安装 Angular 命令行工具 Angular CLI

CLI 是 Command Line Interface 的简写，是一种命令行接口，实现自动化开发流程，好比：ionic cli, vue cli 等，它能够建立项目、添加文件以及执行一大堆开发外的任务，好比测试、编译。

运行命令行 npm install -g @angular/cli 等待一下子，安装完成后，使用 ng -v 若是出现版本号，就说明安装成功了

 

3、安装 WebStorm 

去官网 http://www.jetbrains.com/webstorm/ 下载最新版本，下载慢的同窗能够去个人百度网盘下载：https://pan.baidu.com/s/1smsAPlV 密码：jys4 https://pan.baidu.com/s/1zNHEyFB2pgFfF1ubcReGvQ

下载完成后右键选择打开

一路点击 Next 进行安装就能够了。

 

4、新建 Angular 项目

安装完成须要的工具后，就可使用命令 ng new project-name 来新建一个 angular 项目了

首先进入到我想要放置项目的 G 盘，而后进入到指定的目录 angular，在运行 ng new angular-project1 建立了一个名为 angular-project1 的 Angular 项目

 

5、运行项目

首先进入项目 cd angular-project1， 而后运行项目 npm start，等待 webpack 进行模块的打包

编译完成后，可以使用 http://localhost:4200/ 查看项目(4200是默认端口，打开地址能够在上图中 open your browser on http://localhost:4200/ 这句话中看出)

 

6、Angular 框架目录文件含义 

.editorconfig                         // ide 的一个配置文件
README.md                             // 该应用的一些简介
src/app/app.component.css             // 项目的主样式
src/app/app.component.html            // 项目的主模板
src/app/app.component.spec.ts
src/app/app.component.ts              // 项目的主组件，定义AppModule，这个根模块会告诉Angular如何组装该应用
src/app/app.module.ts                 // 项目的主模块
src/assets/.gitkeep                   // 这个文件夹下你能够放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
src/environments/environment.prod.ts  // 环境配置，生产环境
src/environments/environment.ts       // 环境配置，默认环境，开发环境
src/favicon.ico                       // 每一个网站都但愿本身在书签栏中能好看一点。 请把它换成你本身的图标。
src/index.html                        // 宿主页面
src/main.ts                           // 整个web应用的入口点，angular经过该项目来启动整个项目
src/polyfills.ts                      // 导入一些必要的库,使得angular能够在一些老版本的浏览器中运行
src/styles.css                        // 公共样式
src/test.ts                           // 这是单元测试的主要入口点
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
.angular-cli.json                     // Anguar 编译依赖（能够在其中引入一些 css 和 js 的库，如 jquery, bootstrap）
e2e/app.e2e-spec.ts                   // e2e 端对端测试目录
e2e/app.po.ts
e2e/tsconfig.e2e.json
.gitignore                            // 项目上传到 git 时，须要忽略一些文件上传的配置文件
karma.conf.js                         // 执行自动化测试的
package.json                          // npm 工具的配置文件，指明了当前这个应用所要用到的模块，Angular 的依赖包
protractor.conf.js                    // 作自动化测试的一个配置文件
tsconfig.json                         // TypeScript 编译器的参数
tslint.json                           // 定义 ts 文件质量检查的一些规则