详解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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
js 颜色选择插件
2017/01/23 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
python求解水仙花数的方法
2015/05/11 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
pandas值替换方法
2018/07/10 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
自荐信写法介绍
2014/01/25 职场文书
女生节标语
2014/06/26 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
北京导游词
2015/02/12 职场文书
2015年测量员工作总结
2015/05/23 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
六年级情感作文之500字
2019/10/23 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
Tomcat用户管理的优化配置详解
2022/03/31 Servers
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python