用WebStorm进行Angularjs 2开发(环境篇：Windows 10，A

Angular JS 2的WebStorm开发之旅：Windows 10环境下的实践指南

长沙网络推广与你分享，让我们一起走进Angular JS 2的世界。如果你曾经使用过Angular JS 1并且对其有所熟悉，那么你一定不会想错过这个全新的版本。这一次，我们将以WebStorm为工具，一同在Windows 10环境下如何顺畅地进行Angular JS 2的开发。这不仅是一个技术分享，更是一个共同学习的机会。

一、初探Angular JS 2

在踏入Angular JS 2的世界之前，让我们先简单回顾一下Angular JS 1与Angular JS 2之间的主要差异。虽然网上已经有很多相关资料，但我会尽量用简洁明了的语言进行概述。

Angular 2与Angular 1在设计之初就有所不同。Angular 2更加注重移动端开发，并使用了超集语言Typescript。它摒弃了Angular 1中的控制器概念，引入了全新的组件系统。这些变化只是冰山一角，但足以看出Angular 2的革新之处。

二、环境准备

要进行Angular JS 2的开发，我们需要先准备好相应的环境。以下是所需的工具及其版本：

WebStorm：选择2016.3.3版本，这是进行JS和前端开发的一个优秀IDE工具。

Node.js：版本7.4.0，它是进行Angular开发的必备环境。

Angular CLI：版本0.31，它是创建和管理Angular项目的命令行工具。

操作系统：Windows 10 RedStone。

接下来，我们详细介绍一下环境的安装与配置过程。

1. WebStorm的安装相对简单，建议支持正版。

2. Node.js的安装同样直观明了，下载Windows版后按照提示进行安装即可。安装时请记得将nodejs添加到PATH中。安装完成后，可以通过命令`node -v`和`npm -v`来验证安装是否成功。

3. Node.js的配置稍微复杂一些。安装完成后，需要配置prefix和cache目录。之后，还需要配置环境变量，包括NODE_PATH和path。

至此，我们的开发环境已经准备就绪，接下来就可以开始愉快的Angular JS 2开发了。在开发过程中，可能会遇到各种各样的问题，这也是一个学习和成长的过程。希望通过这篇分享，能帮助大家在Angular JS 2的开发道路上更加顺畅。

配置Node.js环境及安装Angular CLI工具

在进行Angular开发之前，我们需要先配置好Node.js环境并安装必要的工具包。以下是详细的步骤：

一、设置Node.js路径

我们需要确定Node.js的安装路径。在命令行中，通过“npm config set prefix”命令进行设置。这个值将作为后续配置的基础路径。

二、配置sass_binary

Angular CLI依赖于node-sass，但默认情况下并不会像其他包一样直接下载，而是需要下载后进行编译。在Windows环境下，可能会遇到下载困难的问题，导致后续的编译出错，甚至提示找不到python和Visual Studio。为了解决这个问题，我们需要手动下载相应的binding.node文件，并将其放到指定目录，例如“C:\win32-x64-51_binding.node”。

接下来，我们通过命令来配置sass_binary_site和sass_binary_path。这些配置可以通过修改用户目录下的“.npmrc”文件进行持久化保存。例如：

```bash

npm config set sass_binary_site "

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

```

三、安装工具包

1. 全局安装阿里pm：

```bash

npm install -g pm --registry=

```

2. 全局安装typescript和typings：

```bash

npm install -g typescript typings

```

3. 全局安装Angular CLI：

注意，新版的Angular已经不再使用angular-cli进行安装，而是使用@angular/cli。安装命令如下：

```bash

npm install -g @angular/cli

```

四、创建Angular工程

在完成以上配置和安装后，我们可以开始创建Angular工程了。使用WebStorm等IDE工具，新建一个Angular CLI工程。在这个过程中，IDE会根据package.json文件自动下载依赖包到工程目录中。具体步骤如下：

1. 打开WebStorm，新建一个Angular CLI工程。注意选择正确的工程目录和名称。

2. 在创建工程的过程中，需要指定Angular CLI的目录。这个目录是angular-cli包中bin目录的上一层目录。如果在选择目录后仍然提示“Please specify angular-cli package”，可以尝试点击工程名称或其他地方触发事件，错误提示就会消失。

3. 等待工程创建完成。这个过程可能会有些慢，因为IDE会根据package.json文件下载依赖的包到工程里面。耐心等待下载完成即可开始开发。在开发过程中如果遇到任何问题，可以参考官方文档或者社区论坛寻求帮助。希望这篇文章能帮助你顺利配置好开发环境并成功创建Angular工程！工程完工展示：一个崭新的项目构建完成

让我们来欣赏一下这个刚刚构建完成的项目成果。如果你看到了这篇文章，那就意味着整个工程已经顺利完成，如同巍峨的大楼已经竣工，静待你的与欣赏。

工程结构概览

这个项目犹如一座精心设计的建筑，各个部分组织有序，结构明晰。从前端到后端，从设计到开发，每一个环节都经过精心打磨。现在就让我们深入了解它的结构吧。

3、运行程序步骤

想要启动这个工程，就像启动一台精密的机器一样，需要按照一定的步骤进行。你需要找到package.json文件，这个文件是项目的核心配置文件，包含了项目的所有依赖和脚本命令。

然后，你可以选择右键点击该文件，并选择“Show npm Scripts”，或者通过“Edit Configurations”来添加“npm”。这一步的目的是为了配置项目的运行环境。

点击“start”按钮，启动Web Server。此刻，你的项目就像一台刚刚启动的机车，准备驶向成功的轨道。

启动验证

想知道项目是否成功启动？只需在浏览器中输入 ，如果看到“app works!”的提示，那就意味着你的Angular 2已经正常启动，项目开始运行了。

这就是本文的全部内容，希望这篇文章能对你的学习有所帮助。如果你觉得这个工程对你有帮助，或者觉得我们的分享有价值，请多多支持狼蚁SEO。我们一直在努力，为你带来更好的技术与经验分享。记住，我们始终在这里，与你一同技术的奥秘，共同前行。

现在，让我们共同期待这个工程的未来表现吧！它将带领我们走向新的技术高度，创造出更多的可能性。让我们共同期待它的辉煌表现！