用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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
详解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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP Document 代码注释规范
2009/04/13 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
python中的计时器timeit的使用方法
2017/10/20 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
小区门卫管理制度
2014/01/29 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
初一语文教学反思
2016/03/03 职场文书
导游词之峨眉山
2019/12/16 职场文书
Oracle笔记
2021/04/05 Oracle
AI:如何训练机器学习的模型
2021/04/16 Python
MySQL数据迁移相关总结
2021/04/29 MySQL
python创建字典及相关管理操作
2022/04/13 Python