详解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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php执行sql语句的写法
2009/03/10 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
使用Python制作微信跳一跳辅助
2018/01/31 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
项目合作计划书
2014/01/09 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
经费申请报告范文
2015/05/18 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL