详解Webstorm 下的Angular2.0开发之路(图文)


Posted in Javascript onDecember 06, 2018

人一旦上了年纪,记忆力就变得越来越不好。

最近写了许多的博文,倒不是为了给谁看,而是方便自己来搜索,不然一下子又忘记了。

如果恰巧帮助到了你,也是我的荣幸~~~~~~~~~~~~

废话不多说,看正题~~~~

首先打开你的webstorm。这里插一句话,尽量保证你的webstorm是比较新的版本,在webstorm的右下角会有提示你更新的。因为就目前来看,我们的angualr2.0项目是采用typescript来编写的,而最新版本的webstorm都只能支持到typescript2.0.8,而typescript已经发布到typescript2.0.9。也就是如果你的webstorm版本更低的话,你所能支持的语法就更少。

1.首先需要创建一个project。

详解Webstorm 下的Angular2.0开发之路(图文)

可以看到图片上有两个关于Angular的选择。一个是AngularJS,这个创建的是基于Angular1.0版本类的project。另一个Angular CLI创建的才是基于Angular2.0的项目。

WebStorm有这点的好处就是会自动链接到你电脑里已经安装的路径上。从图片可以看出:Node interpreter:就是链接到我电脑里面安装node的路径下。

如果你的Angular CLI没有自动链接那就是说明你没有安装。

angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli

npm install -g typescript typings
npm install -g angular-cli --ignore-scripts
npm install

可能安装会有点慢,不过都是可以安装成功的。 三条命令,如果有些你安装过了就不需要安装了。~~~

点击Create之后

详解Webstorm 下的Angular2.0开发之路(图文)

这样就创立了一个名为Yue的project。你这时候就会发现node-modules已经下载好了。package.json和tsconfig.js都已经创建好了。

其实这些也是需要一个过程的~~~~刚开始create之后,我的名为Yue工程的项目里面什么都是没有的,文件夹根本点不开,但是webStorm会自动给我们下载好,可能得大概等个20秒。看到终端出现done说明下载完成了。

你会发现webStorm是如此的贴心,app文件夹都给我们创建好了,不仅如此,文件夹里还有app.module.ts和app.component.ts。你需要改动什么直接在这些ts文件里改动就可以了。

详解Webstorm 下的Angular2.0开发之路(图文)

还有一点就是webStorm 可以帮我们将ts自动转为js .会在上方提示你需不需要将ts转为js文件,点击ok就是可以的了。

转完之后别傻傻的去ts文件下面找,因为都给你提出来了,都在dist下面。

详解Webstorm 下的Angular2.0开发之路(图文)

我们通过展开Yue工程,会发现其实里面有一个名为Index.html的页面。接下来我们运行此页面看看。

运行项目这边有个步骤,就是得先开启服务。这边不好截图,就直接用文字说明了。

找到你的package.json文件鼠标右击,找到show npm Scripts,就会看到下面有一个类似图片这样的树结构

详解Webstorm 下的Angular2.0开发之路(图文)

选中start双击两下。查看控制台有运行的服务器如下图所示:ng start

详解Webstorm 下的Angular2.0开发之路(图文)

可以看到Server is running on http://localhost:4200

这样我们在浏览器运行http://localhost:4200 就可以看到我们运行的项目啦

补充一句,因为默认的4200的端口,如果你需要换的话也是可以的package.json里面的

ng serve --host localhost --port 4201

增加后面的就可以

详解Webstorm 下的Angular2.0开发之路(图文)

啦啦是不是很神奇。

然后我们也可以添加自己想要的组件,比如现在我需要在运行一个hello-world

将鼠标放到项目里面的src路径上,右击New——————然后选择Angular CLI 就会出来一个框

详解Webstorm 下的Angular2.0开发之路(图文)

选择你需要的就行。这里我们选择component。

看到控制台出现Done,说明成功啦。然后可以看到我们创立的hello-world在哪里

详解Webstorm 下的Angular2.0开发之路(图文)

提示我们在src/app/hello-world。然后往项目中一找真是的。

详解Webstorm 下的Angular2.0开发之路(图文)

打开hello-world.component.ts这里边自动创建的都在前面添加了app这个字样。

详解Webstorm 下的Angular2.0开发之路(图文)

只需要把selector的值添加到

详解Webstorm 下的Angular2.0开发之路(图文)

然后在浏览器查看,就会发现已经显示了。

详解Webstorm 下的Angular2.0开发之路(图文)

不容重启服务怎么的,是自动刷新的。

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

Javascript 相关文章推荐
详解JavaScript中的表单验证
Jun 16 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 #Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 #Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 #Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 #Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python生成日历实例解析
2014/08/21 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Numpy之reshape()使用详解
2019/12/26 Python
python和php学习哪个更有发展
2020/06/17 Python
python中reload重载实例用法
2020/12/15 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Linux文件系统类型
2012/02/15 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
毕业生优秀推荐信
2013/11/26 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python获取百度热搜的完整代码
2021/04/07 Python