用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)


Posted in Javascript onDecember 05, 2018

自己学习使用了Angular JS 1一段时间,由于没有具体的项目进行尝试加上其它研究工作的影响,就搁置了一段时间。在与同事讨论技术选型时,才知道Angular JS 2的差别之大(孤陋了,莫见笑),所以决定弄弄Angular 2。WebStorm是进行JS和前端开发的不二之选的IDE工具,虽然目前版本已经更新了,但是由于Angular 2的成熟度还没那么高,所以用WebStorm进行Angular 2的工程创建,还是没有其他语言的方便。自己尝试用WebStorm搭建Angular 2的工程,虽然在网上看了一些仁兄的帖子,很有帮助,但是感觉关键的、核心的问题没有说清楚(也可能是由于用Node不是很久,知识浅薄),所以搭建过程特别是在Windows上也是磕磕绊绊,总是有些问题。相信其他人也会遇到同样的问题,所以将问题梳理总结如下。

一、前序

既然是使用Angular JS 2,那么先简单说下 1 和 2 的主要区别。这方面内容,网上很多,我就借用其他仁兄的一些资料,具体来源可以查看:参考资料

Angular 1与 Angular 2之间的一些差别

Angular2使用了javascript的超集‘Typescript',所以angular1和angular2从设定之初就是不一样的;

Angular1.x在设计之初主要是针对pc端的,对移动端支持较少(当然也有其他一些衍生框架如ionic),而Angular2是设计包含移动端的;

Angular 1的核心概念是scope,但是angular2中没有scope,angular2使用zone.js来记录监测变化;

Angular 1 中的控制器在angular2中不再使用,也可以说控制器在angular2中被‘Component'组件所替代:

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

二、环境准备

  • WebStorm 2016.3.3
  • Nodejs 7.4.0
  • angular-cli 0.31
  • Windows 10 RedStone

WebStorm安装很简单,破解不是本文重点,建议还是支持正版。

(1)Nodejs安装

这一步很简单,下载Windows版的Nodejs,进行按照提示安装即可,记得选择将nodejs增加到PATH一项,如果界面上没有,应该就是默认帮你搞定了,可以忽略我这句废话。

通过命令,验证是否安装成:

node -v
npm -v

如果正常显示版本号,即安装成功。

(2)Nodejs配置

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

1、配置prefix和cache目录

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

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

这个值就是上一步中,通过 “npm config set prefix” 设置的值。可以,用下面命令查看

npm config get prefix

在”用户变量”中,修改path

修改用户变量中的path,添加C:\Program Files\nodejs\node_global\。

这个值就是上一步中,通过 “npm config set prefix” 设置的值。

3、配置sass_binary

angular cli 是要依赖node-sass的,默认情况下,不会像其它包一样直接下载,而是要下载后进行编译的。在Windows下,首先要通过git下载win32-x64-51_binding.node,但是不知道是被墙还是什么原因,下不下来,就会导致后面的编译出错,以及提示找不到python和Visual Studio的问题。如下:

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

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

将下载的binding.node放到指定目录,例如:

C:\win32-x64-51_binding.node

配置路径:通过命令配置

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

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

当然以上prefix, cache,sass_binary_site, sass_binary_path等,也可以通过修改下面文件进行配置

C:\<username>\.npmrc

prefix=C:\Program Files\nodejs\node_global
cache=C:\Program Files\nodejs\node_cache
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
sass_binary_path=C:\win32-x64-51_binding.node

(3)安装工具包

1、全局安装阿里cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、全局安装typescript

npm install -g typescript typings

3、全局安装angularjs-cli

npm install -g @angular/cli

新版已经不用angular-cli进行安装,而是使用@angular/cli,参见官网

三、创建工程

1、打开WebStorm新建一个Angualr CLI 工程

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

  • nodejs如果安装好,WebStorm会自己扫描到指
  • 定工程目录和名称
  • 指定angular-cli的目录

很多帖子只说指定angular-cli的目录,没有说清楚具体是哪个目录。但是最开始我在指定的时候,一直还提示“Please specify angular-cli package”。还以为是angualr-cli没有安装对。

通过尝试发现:

(a)具体的目录,就是angular-cli包中,bin目录的上一层目录

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

(b)如果目录选择完成后,还提示:“Please specify angualr-cli package”,就点击一下工程名称那一栏或其它地方。因为选择angular-cli目录,不会触发事件,所以错误提示一直在,点了其它地方,触发一下事件,提示就会消失,“Create”按钮就可以使用。

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

2、等待工程创建完成

以上工作完成,就是等待新建一个angular 2工程。这个过程有点慢,主要是IDE会根据package.json下载依赖的包到工程里面。

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

如果出现上图,就说明工程创建完成,工程结构如下

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

3、运行程序

选择package.json, 右键选择“Show npm Scripts”,或者用“Edit Configurations”,添加“npm”

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

点击“start” 启动 Web Server

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

在浏览器?入 http://localhost:4200 ,若出? app works! ,表示 Angular 2 已经正常启动。

用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
js module大战
Apr 19 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 #Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
关于RxJS Subject的学习笔记
Dec 05 #Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 #Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 #Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 #Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python使用minimax算法实现五子棋
2019/07/29 Python
python实现代码统计程序
2019/09/19 Python
python getpass实现密文实例详解
2019/09/24 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
医院检讨书范文
2014/02/01 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
接待员岗位职责范本
2015/04/15 职场文书
文明礼仪倡议书
2015/04/28 职场文书
父亲节感言
2015/08/03 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python