详解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的值添加到

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)

    自己学习使用了Angular JS 1一段时间,由于没有具体的项目进行尝试加上其它研究工作的影响,就搁置了一段时间.在与同事讨论技术选型时,才知道Angular JS 2的差别之大(孤陋了,莫见笑),所以决定弄弄Angular 2.WebStorm是进行JS和前端开发的不二之选的IDE工具,虽然目前版本已经更新了,但是由于Angular 2的成熟度还没那么高,所以用WebStorm进行Angular 2的工程创建,还是没有其他语言的方便.自己尝试用WebStorm搭建Angular 2的工程,虽

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

    人一旦上了年纪,记忆力就变得越来越不好. 最近写了许多的博文,倒不是为了给谁看,而是方便自己来搜索,不然一下子又忘记了. 如果恰巧帮助到了你,也是我的荣幸~~~~~~~~~~~~ 废话不多说,看正题~~~~ 首先打开你的webstorm.这里插一句话,尽量保证你的webstorm是比较新的版本,在webstorm的右下角会有提示你更新的.因为就目前来看,我们的angualr2.0项目是采用typescript来编写的,而最新版本的webstorm都只能支持到typescript2.0.8,而ty

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

  • windows 64位下MySQL 8.0.15安装教程图文详解

    windows 64位下MySQL 8.0.15安装教程图文详解

    先去官网下载点击的MySQL的下载 下载完成后解压  解压完是这个样子 配置系统环境变量 复制解压后的mysql到C盘或者其他磁盘下 我们去系统的环境变量的path里添加一个mysql的配置  指向mysql的bin目录   配置初始化的my.ini文件的文件 解压后的目录并没有的my.ini文件,没关系可以自行创建在安装根目录下添加的my.ini(新建文本文件,将文件类型改为的.ini),写入基本配置: [mysqld] # 设置3306端口 port=3306 # 设置mysql的安装目录

  • 详解Swoole跟传统的web开发的区别

    详解Swoole跟传统的web开发的区别

    一.swoole的运行模式 1.1.传统web开发模式 PHP web开发采用的方式是LAMP/LNMP架构,即Linux.Nginx,Mysql和PHP.这里以nginx来举例,大致结构为: 当请求进入时,web server将请求转交给PHP-FPM,PHP-FPM是一个进程池架构的FastCGI服务,内置PHP解释器.FPM负责解释执行PHP文件生成响应,最终返回给web server,展现至前端.PHP文件中实现了许多业务逻辑,包括Mysql和Nosql的访问,调用第三方应用等等. 这样

  • 详解 IOS下int long longlong的取值范围

    详解 IOS下int long longlong的取值范围 32bit下: unsigned int 0-4294967295 int -2147483648-2147483647 unsigned long 和int一样 long 和int一样 long long的最大值:9223372036854775807 long long的最小值:-9223372036854775808 unsigned long long的最大值:1844674407370955161 __int64的最大值:92

  • 详解Linux下读取位图的注意事项

    详解Linux下读取位图的注意事项 在Linux下读取位图遇到的问题,很好地体现了linux与Windows操作系统的不同.按理说位图格式与操作系统无关,读取也应该无关,实际上在位图读到内存中时已经不同.下面主要介绍自己在Linux下操作位图遇到的问题. (一).位图结构 位图一开始是两个结构体,包括位图的详细信息,是读取后面数据的关键.所以读取位图首先要正确读取这两个结构体:BITMAPFILEHEADER和BITMAPINFOHEADER.其具体定义为: typedef struct tag

  • 详解linux下利用crontab创建定时任务

    Linux下可以利用crontab创建定时任务. 常用搭配 crontab -e 编辑任务 crontab -l 查看所有任务[该用户] crontab -r 取消所有任务[该用户] 任务格式 × × × × × +命令(具体任务) 前5个参数表示时间,依次为: 参数 范围 分钟 0-59 小时 0-23 日期 1-31 月份 1-12 星期 0-6(0代表星期日) 特殊符号 为了精确表示定时,需要一些特殊符号来描述具体的任务执行时间.有以下几个符号: "/" 代表每,每隔多长时间 &

  • 详解微信第三方小程序代开发

    详解微信第三方小程序代开发 微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 注意事项:如果在调试过程中返回了错误码请到小程序代开发api页面查看,   小程序代开发使用的域名是你申请第三方时候填写的域名, 小程序代码模板最多只有50个,可以删除然后重新添加. 准备工作: 申请微信第三方并且权限那边要选上代开发,第三方申请成功之后就是准备小程序了,需要两个小程序,一个作为小程序代码库,一个作为用

  • 详解C# Protobuf如何做到0分配内存的序列化

    题目很简单, 就是IMessage对象怎么变成Byte[] 答案1: msg.ToByteArray() 这肯定不符合我们的要求 答案2: using var memoryStream = new MemoryStream(); using var codedOutputStream = new CodedOutputStream(memoryStream); msg.WriteTo(codedOutputStream); codedOutputStream.Flush(); memoryStr

  • 详解RedisTemplate下Redis分布式锁引发的系列问题

    详解RedisTemplate下Redis分布式锁引发的系列问题

    自己的项目因为会一直抓取某些信息,但是本地会和线上经常一起跑,造成冲突.这其实就是我们常说的分布式集群的问题了,本地和线上的服务器构成了集群以及QPS为2的小并发(其实也不叫并发,不知道拿什么词形容?). 首先,分布式集群的问题大家都知道,会造成数据库的插入重复问题,会造成一系列的并发性问题. 解决的方式呢也大概如下几点,百度以及谷歌上都能搜到的解决方式: 1:数据库添加唯一索引 2:设计接口幂等性 3:依靠中间件使用分布式锁,而分布式锁又分为Redis和Zookeeper 由于Zookeepe

随机推荐