Webstorm 下的Angular2.0开发之路
人一旦上了年纪,记忆力就变得越来越不好。
最近写了许多的博文,倒不是为了给谁看,而是方便自己来搜索,不然一下子又忘记了。
如果恰巧帮助到了你,也是我的荣幸~~~~~~~~~~~~
废话不多说,看正题~~~~
首先打开你的webstorm。这里插一句话,尽量保证你的webstorm是比较新的版本,在webstorm的右下角会有提示你更新的。因为就目前来看,我们的angualr2.0项目是采用typescript来编写的,而最新版本的webstorm都只能支持到typescript2.0.8,而typescript已经发布到typescript2.0.9。也就是如果你的webstorm版本更低的话,你所能支持的语法就更少。
1.首先需要创建一个project。
可以看到图片上有两个关于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之后
这样就创立了一个名为Yue的project。你这时候就会发现node-modules已经下载好了。package.json和tsconfig.js都已经创建好了。
其实这些也是需要一个过程的~~~~刚开始create之后,我的名为Yue工程的项目里面什么都是没有的,文件夹根本点不开,但是webStorm会自动给我们下载好,可能得大概等个20秒。看到终端出现done说明下载完成了。
你会发现webStorm是如此的贴心,app文件夹都给我们创建好了,不仅如此,文件夹里还有app.module.ts和app.component.ts。你需要改动什么直接在这些ts文件里改动就可以了。
还有一点就是webStorm 可以帮我们将ts自动转为js .会在上方提示你需不需要将ts转为js文件,点击ok就是可以的了。
转完之后别傻傻的去ts文件下面找,因为都给你提出来了,都在dist下面。
我们通过展开Yue工程,会发现其实里面有一个名为Index.html的页面。接下来我们运行此页面看看。
运行项目这边有个步骤,就是得先开启服务。这边不好截图,就直接用文字说明了。
找到你的package.json文件鼠标右击,找到show npm Scripts,就会看到下面有一个类似图片这样的树结构
选中start双击两下。查看控制台有运行的服务器如下图所示:ng start
可以看到Server is running on http://localhost:4200
这样我们在浏览器运行http://localhost:4200 就可以看到我们运行的项目啦
补充一句,因为默认的4200的端口,如果你需要换的话也是可以的package.json里面的
ng serve --host localhost --port 4201
增加后面的就可以
啦啦是不是很神奇。
然后我们也可以添加自己想要的组件,比如现在我需要在运行一个hello-world
将鼠标放到项目里面的src路径上,右击New——————然后选择Angular CLI 就会出来一个框
选择你需要的就行。这里我们选择component。
看到控制台出现Done,说明成功啦。然后可以看到我们创立的hello-world在哪里
提示我们在src/app/hello-world。然后往项目中一找真是的。
打开hello-world.component.ts这里边自动创建的都在前面添加了app这个字样。
只需要把selector的值添加到
然后在浏览器查看,就会发现已经显示了。
不容重启服务怎么的,是自动刷新的。
很好是不是~~~~
Webstorm 下的Angular2.0开发之路相关推荐
- 攀岩时代:HMS Core 6.0与移动开发之路
今年的东京奥运会中,一些全新运动项目首次进入奥运是一大看点.其中就包括科技界经常用以比喻自己的:攀岩. 刚刚加入奥运大家庭的攀岩运动,需要选手在陡峭的崖壁,甚至负角度情况下,在仅有的几个发力点支撑下向 ...
- Qt开发之路39---Qt pro项目检测编译器版本(64位或32位)
方案一:利用QT_ARCH contains(QT_ARCH, x86_64){message("64-bit") }else{message("32-bit" ...
- 04_HUD_Qt_for_Python开发之路2
欢迎来到我的博客,希望这篇文章对你有所帮助,如果觉得不错,请点赞搜藏哈. 文章目录 HUD_Qt_for_Python开发之路2 1 设置程序名称 2 隐藏窗口标题栏 3 设置窗口透明裁剪 4 修改下 ...
- 我的App开发之路:从零开始到上线赚钱
我的App开发之路:从零开始到上线赚钱 背景介绍 本人从第一次写代码赚钱开始,到现在已经12年了,使用过多种操作系统.编程语言. 现在作为一名个人开发者,开发一些小应用. 本文就应用软件开发做个简单总 ...
- H5前端开发以及小程序开发之路
好久没写博客了,今天心血来潮.总结下.近一年的前端开发之路. 首先,用了ionic+cordova技术框架开发纯粹的混合APP(得有angular的基础知识),一个商城项目,也用了vue,编写单页面, ...
- Qt开发之路44---Qt Creator 设置移动控件的最小距离
一:问题 Qt Creator编辑UI时,按上下左右间移动控件默认最小是10个像素点,可不可以设置小一些? 二:方法,配置更改 工具-选项-设计师-表单-栅格X/栅格Y,调整大小!如下图 三:方法,属 ...
- 05_HUD_Qt_for_Python开发之路3
欢迎来到我的博客,希望这篇文章对你有所帮助,如果觉得不错,请点赞搜藏哈. 文章目录 HUD_Qt_for_Python开发之路3 1 UI文件与Python结合 1.1 将UI文件编译为一个Pytho ...
- 记本阶段建站心得,是走无限做垃圾站之路还是真正的开发之路
不知不觉,上班有三个月了,三个月除却一些公司里杂七杂八的事,我做了四个站,第一个是六安市志愿者会员管理系统,比较简单,用TP开发,从前台设计.布局,到数据库设计,再到后台代码,改了又改,最后花了近一个 ...
- 我的Java开发之路
最近有一位小伙伴通过公众号给我留言, "我参加工作没多久,看着圈里的技术大牛,特别羡慕,也渴望成为技术大牛,想让您分享一下从小白到大牛是怎样练成的,我该如何提高自己" 首先,谢谢这 ...
最新文章
- html5和html的区别是什么(精问)
- Android:手把手教你 实现Activity 与 Fragment 相互通信(含Demo)
- jfinal整合quartz实现定时任务的两种方式
- 路由器配置——OSPF协议(2)
- 聊聊高并发(二十五)解析java.util.concurrent各个组件(七) 理解Semaphore
- 滑动窗口1——无重复字符的最长字串
- java web几百万分页_举例详解用Java实现web分页功能的方法
- 灵敏度和稳定性能兼具 新气体传感器技术适用于工业应用
- 高校计算机教研室工作计划,2017高校教研室工作计划
- rebar3 的使用
- 微软为啥让免费升Win10?
- python进阶小技巧
- 【Code】浅谈Pascal转C++
- 理解PPAPI的设计
- linux飞行模式问题解决
- 002 姜子牙留计不成,玄子清相府献计
- Reapp 混合应用 - 帮助构建前所未所的强大应用(Reapp Hybrid apps - help you build powerful apps like never before)
- 【Windows】CVE-2017-11882漏洞利用
- 《R数据科学》学习笔记|Note5:使用dplyr进行数据转换(下)
- PS|001制作1寸照片
热门文章
- preventDefault, stopPropagation, stopImmediatePropagation 三者的区别
- HTML5 CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
- 多比图形控件教程:基于Flex/Javascript的网页绘图控件
- Java集合——题目
- (Access denied for user 'root'@'localhost' (using password: NO))
- DES加密/解密类。
- 基于Linux的集群系统(五) Linux集群系统的实现
- VMware 修复多款产品中的高危漏洞
- 如何避免开源安全噩梦?
- 谷歌和 Zyxel 各修复一个已遭利用的 0day