【Angular4.X学习笔记二】开发环境配置（windows）

文章目录：

1. 环境准备
   
2. WebStorm安装与激活
3. Node.js(含npm)安装
4. Angular CLI安装
5. 使用npm命令创建Angular项目并运行
6. 在WebStorm中创建Angular项目并运行
7. 总结

--------------------------------------------------------------------------------------------------------------------------------

一、环境准备

• WebStorm-2017.2 

下载地址：http://www.jetbrains.com/webstorm/download/download-thanks.html

• Node.js  6.11.1-x64
• NPM 3.10.10

下载地址：https://docs.npmjs.com/getting-started/installing-node

--------------------------------------------------------------------------------------------------------------------------------

二、WebStorm安装与激活

下载安装包之后即可进行安装，全程next即可，如果想修改安装路径也可以修改一下。安装完成之后运行程序，未激活的WebStorm有使用限制。在提示激活界面选择License Server ，在输入框中输入网址http://idea.imsxm.com，点击激活即可。打开之后可以进行简单的设置，比如编辑器的字体，字号等。

激活教程：http://www.imsxm.com/jetbrains-license-server.html 

--------------------------------------------------------------------------------------------------------------------------------

三、Node.js(npm)安装

按照官方教程安装即可，安装完成后打开终端，输入命令node -v以及npm -v检测安装的版本，在正式开发之前要确保版本匹配，在angular的官方教程中要求node版本为6.9.x  npm的版本为3.x  这一步基本不会出现问题，但是请安装在容易找到的地址里。

Node.js配置

1.配置prefix和cache目录

示例目录地址为：C:\Program Files\nodejs

cd C:\Program Files\nodejs

mkdir node_global\node_modules //创建目录

mkdir node_cache

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

2.配置环境变量

右击“计算机”--->“属性”--->“高级系统设置”--->“环境变量”

在[系统变量]中,设置 NODE_PATH ，新建 NODE_PATH ,值为

C:\Program Files\nodejs\node_global\node_modules

在”用户变量”中,修改用户变量中的path，添加

C:\Program Files\nodejs\node_global\

--------------------------------------------------------------------------------------------------------------------------------

四、Angular CLI安装

1.CLI需要依赖node-sass，手动下载sass-binary（https://github.com/sass/node-sass/releases/download/v4.5.2/win32-x64-51_binding.node）

将下载的binding.node放到指定目录，例如：

C:\win32-x64-51_binding.node

执行配置命令：

npm config set sass_binary_path "C:\win32-x64-51_binding.node"

npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的镜像

2.Angular使用typescript进行开发的，需要安装typescript进行支持

全局安装(-g)typescript | typings

1	npm install -g typescript typings

3.全局安装angular-cli

1	npm install -g @angular/cli

--------------------------------------------------------------------------------------------------------------------------------

五、使用npm命令创建Angular项目并运行

创建项目之前需要在命令框中将项目位置定位到你想要的位置（cd 命令或输入盘符直接修改目标盘位置）

创建新项目（my-app）的命令：ng new my-app

这一过程花费时间较长，主要是需要下载很多npm包

创建成功的项目是具有完整的项目结构的，不用进行任何修改即可运行。首先进入项目目录，启动服务器。

cd my-app
ng serve --open

ng serve为启动服务器的命令，服务器启动之后会一直处于监听状态，能实时监听项目是否进行了修改，如果修改了能自动进行刷新。--open命令打开浏览器并访问地址http://localhost:4200，此时浏览器页面将会显示如下内容：

--------------------------------------------------------------------------------------------------------------------------------

六、在WebStorm中创建Angular项目并运行

在以上各种安装和配置的步骤都完成之后再创建Angular CLI项目，此时WebStorm能够自动检测到Node interpreter的位置以及Angular CLI的位置。

创建完成之后可以在下方的命令行界面看到与第五节相似的提示信息，并且在项目栏展现出完整的项目结构，如下：

运行项目：

选中package.json，单击右键，选择Show npm Scripts，然后点击start启动服务器，启动完成后在浏览器的地址栏中输入http://localhost:4200即可访问项目页面。此时的服务器处于监听状态，能监测到任何对项目的修改并自动刷新页面。

--------------------------------------------------------------------------------------------------------------------------------

七、总结

这一部分主要是搭建Angular的开发环境，为之后进行项目开发搭建便捷的平台。第一次接触有点摸不到头脑，于是就按照Angular的官方教程路线进行学习，先将一个最简单的项目运行起来看看到底怎么回事。但是对于其中涉及到的多个工具的认识还非常肤浅，所幸这也不是这一阶段的学习重点。为了学习Angular到底怎么工作，怎么用它来实现前端开发，以及在开发过程中保持良好的代码风格和清晰的项目结构，接下来需要对CLI为我们搭建的项目骨架有个初步的认识。