用网络风暴开发Angularjs 2(环境:Windows 10 Angular-cli模式)

我学习和使用Angular JS 1有一段时间了，但是因为没有具体的项目可以尝试，以及其他研究工作的影响，暂时搁置了。在和同事讨论技术选择的时候，我意识到Angular JS 2与众不同(我太无知了，笑不出来)，所以我决定利用Angular JS2。WebStorm是JS和前端开发的最佳IDE工具。虽然现在的版本已经更新了，但是因为Angular 2还没有那么成熟，所以用WebStorm创建Angular 2并不方便。我试图用WebStorm构建Angular 2项目。虽然在网上看了一些亲爱的朋友发的帖子，很有帮助，但是感觉关键和核心问题没有说清楚(可能是因为我很久没有使用Node，知识浅薄)，所以构建过程，尤其是Windows上，磕磕绊绊，总会出现一些问题。相信其他人也会遇到同样的问题，所以我将问题整理归纳如下。

一、前言

既然使用了Angular JS 2，那就简单说一下1和2的主要区别。网上有很多这方面的内容，所以我会向其他好朋友借一些资料。具体来源可查看：参考资料

角度1和角度2的一些区别

Angular2使用的是javascript的超集' ' Typescript '，所以angular1和angular2与设置之初不同；

Angular1.x一开始主要是为pc设计的，对mobile的支持较少(当然还有ion等其他衍生框架)，而Angular2则是为了包含mobile而设计的；

Angular 1的核心概念是scope，但是angular2没有scope，angular2使用zone.js记录监控变化；

Angular 1中的控制器不再用于angular2。也可以说，控制器被angular2中的“组件”组件取代：

二、环境准备

Webstorm 2016 . 3 . 3 nodejs 7 . 4 . 0 Angular-CLI 0.31 Windows 10红石WebStorm安装非常简单，破解不是本文重点，建议支持正版。

(1)Nodejs安装

这一步很简单。下载Windows的Nodejs，按照提示安装。请记住将nodejs添加到PATH中。如果界面上没有人，默认情况下应该这样做。你可以无视我的胡言乱语。

验证是否安装为：

如果node -vnpm -v的版本号显示正常，则安装成功。

(2)节点配置

安装Nodejs后，默认情况下会将node.exe的路径添加到系统的环境变量中。如果没有，请手动添加。除此之外，还需要其他配置。

1.配置前缀和缓存目录

示例目录地址是：c: \程序文件\节点NPM配置集前缀“c: \程序文件\节点j \节点_全局”NPM配置集缓存“c: \程序文件\节点j \节点_缓存2，配置环境变量

右键单击计算机-属性-高级系统设置-环境变量

在系统变量中，设置NODE_PATH

在系统变量中创建新的NODE_PATH，其值为

C: \程序文件\节点\节点_全局\节点_模块

该值是由上一步中的“npm配置集前缀”设置的值。是的，用下面的命令检查它

Npm配置获取用户变量中的前缀，修改路径

修改用户变量中的路径，并添加c: \程序文件\ nodejs \ node _ global \。

该值是由上一步中的“npm配置集前缀”设置的值。

3.配置sass_binary

Angular cli取决于节点sass。默认情况下，它不会像其他包一样直接下载，而是在下载后编译。在Windows下，先通过git下载win32-x64-51_binding.node，但是不知道是被屏蔽了还是什么原因。如果无法下载，会导致编译错误，提示找不到python和Visual Studio。如下所示：

首先要做的是根据错误提示手动下载对应的版本地址：binding.node

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

c : \ win32-x64-51 _ binding . node配置路径：由命令配置

npmconfig set sass _ binary _ site " https://NPM . Taobao . org/mirrors/node-sass/"//使用阿里的镜像npmconfig set sass _ binary _ path " c : \ Win32-x64-51 _ binding . node "当然，上面的前缀、缓存、sass _ binary _ site、sass _ binary _ path等。也可以通过修改以下文件进行配置

C: \用户名\。npmrcprefix=C: \程序文件\ nodejs \ Node _ global cache=c : \程序文件\ nodejs \ Node _ cache ass _ binary _ site=https://npm.taobao.org/mirrors/node-sass/sass _ binary _ path=c : \ win32-x64-51 _ binding . Node(3)安装工具包

1.在全球安装阿里cnpm

npminstall-gcnpm-registry=https://registry.npm.taobao.org 2，全局安装类型脚本

Npm安装-g类型脚本类型3，全局安装

新版本的npm install -g @angular/cli尚未由angular-cli安装，而是由@angular/cli安装，请参见官方网站

第三，创建项目

1.打开网络风暴创建一个新的语言命令行界面项目

如果nodejs安装良好，WebStorm将扫描指定的项目目录和其名称自行指定angular-cli的目录。很多帖子只说目录指定了angular-cli，没有说是哪个目录。但一开始指定的时候，总是提示“请指定angular-CLI包”。我以为angualr-cli没有安装一对。

尝试发现：

(a)特定目录是angular-cli包中bin目录上方的目录

(b)如果选择目录后提示“请指定语言命令行界面包”，请点击项目名称一栏或其他地方。因为选择angular-cli目录不会触发事件，所以错误提示始终存在。如果您单击其他地方并触发事件，提示将消失，并且可以使用“创建”按钮。

2.等待项目完成

以上工作完成，就等着新的angular 2项目了。这个过程有点慢，主要是因为IDE会根据package.json将依赖包下载到项目中

如果出现上图，说明项目已经完成，项目结构如下

3.运行程序

选择程序包. json，右键单击显示npm脚本，或使用编辑配置添加npm

单击开始启动网络服务器

在浏览器中输入http://localhost:4200，如果出现app works！一个，指示Angular 2已正常启动。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。