详解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 相关文章推荐
原生js 秒表实现代码
Jul 24 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
继续学习javascript闭包
Dec 03 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
微信小程序实现通过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
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python求解水仙花数的方法
2015/05/11 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
中学门卫岗位职责
2013/12/26 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
商场总经理岗位职责
2014/02/03 职场文书
中秋节活动总结
2014/08/29 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
手机被没收的检讨书
2014/10/04 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers