创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli)。打开命令窗口输入 npm install -g angular-cli ,等待安装完成,就可以打开webStorm创建项目了。

1.首先需要创建一个project。

可以看到图片上有两个关于Angular的选择。一个是AngularJS,这个创建的是基于Angular1.0版本类的project。另一个Angular CLI创建的才是基于Angular2.0的项目。

WebStorm有这点的好处就是会自动链接到你电脑里已经安装的路径上。从图片可以看出:Node interpreter:就是链接到我电脑里面安装node的路径下。

location路径是你创建项目保存的地址,可以自己随意定义,路径选好之后点击Create,然后webstrom就会开始自动安装依赖,这可能会需要一会儿,等待安装完成会看到项目结构如下图:

就这样我们就创建成功了。

webStorm 可以帮我们将ts自动转为js .会在上方提示你需不需要将ts转为js文件,点击ok就可以了。

项目创建好了,怎么运行呢?运行项目这边有个步骤,就是得先开启服务。

找到你的package.json文件鼠标右击,找到show npm Scripts,就会看到下面有一个类似图片这样的树结构

双击start服务器就运行起来了,这时你会看到控制台如下图:

可以看到Server is running on http://localhost:4200

这样我们在浏览器运行http://localhost:4200  就可以看到我们运行的项目啦

angular2.0入门---webStorm创建angular CLI项目的更多相关文章

  1. Angular2快速入门-1.创建第一个app

    一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作   1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...

  2. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  3. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  4. vue2.0学习——使用webstorm创建一个vue项目

    https://blog.csdn.net/weixin_40877388/article/details/80911934

  5. Angular2快速入门-2.创建一个新闻列表

    背景: 我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component, 例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息, 在详细信息中可 ...

  6. Angular2快速入门-4.创建一个服务(创建NewsService提供数据)

    上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...

  7. 解决cocos2d-X 2.0版本后创建的Android项目提示org.cocos2dx.lib.Cocos2dxActivity找不到问题

    原地址: http://blog.163.com/zhoulong19880518@126/blog/static/6070970220132511558143/ 解决方法:    复制 ***\co ...

  8. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  9. springboot2.0入门(二)-- 基础项目构建+插件的使用

    一.idea中新建第一个HelloWorld项目 点击next: 下一步 在这里可以选择我们需要依赖的第三方软件类库,包括spring-boot-web,mysql驱动,mybatis等.我们这里暂时 ...

随机推荐

  1. 【pkuwc2018】 【loj2537】 Minmax DP+线段树合并

    今年年初的时候参加了PKUWC,结果当时这一题想了快$2h$都没有想出来.... 哇我太菜啦.... 昨天突然去搜了下哪里有题,发现$loj$上有于是就去做了下. 结果第一题我5分钟就把所有细节都想好 ...

  2. Codeforces Round #556 (Div. 2)

    比赛链接 A 贪心 #include <cstdlib> #include <cstdio> #include <algorithm> #include <c ...

  3. Java执行Shell脚本“No such file or directory” (win->Linux)异常的可能原因

    转自:http://blog.csdn.net/zlpdaisy/article/details/6134314 用Runtime.getRuntime().exec()方法执行Linux的一个She ...

  4. linux安装扩展总结

    ---恢复内容开始--- 1.安装php 模块安装命令. wget http://pear.php.net/go-pear 执行 php go_pear 如果是php7 wget http://pea ...

  5. 7-nginx-keepalived配置主从双击热备

    nginx的高可用解决方案 keepalive 是 VRRP 协议的完美实现, 通过vip(虚拟ip)来实现主从双击热备, 自动切换的高可用方案, nginx的主从是通过keepalived实现的 通 ...

  6. logback 日志打印输出

    slf4j 其实是一个日志的抽象层, 其本质仍然需要真正的实现 他可以解决代码中独立于任意特定的日志类库, 可以减少很多维护日志的麻烦, 除此之外, 还有占位符的特性, {}, 类似于String#f ...

  7. 直接用php.exe命令还执行php程序跟直接在网页上访问php程序的区别

    1.直接使用php.exe命令执行php程序的格式: php test.php 2.因为没有经过apache或iis这种服务器,所以一些基于服务器的变量是不能使用的, 如$_SERVER,$_ENV等 ...

  8. golang基础--reflect反射

    反射的知识点比较晦涩,后期会对此知识点展开深入的分析及示例代码展示 反射可达大提高程序的灵活性,使得inferface{}有更大的发挥余地 反射使用TypeOf和ValueOf函数从接口中获取目标对象 ...

  9. RabbitMQ上手记录–part 4-节点集群(单机多节点)

    现在互联网应用动不动就说要HA,好像不搞个HA都不好意思说自己的应用能承载高并发,大用户量访问.RabbitMQ这个经典的消息组件,也必然逃不掉单点失效的尴尬局面.当然在RabbitMQ在被广泛应用于 ...

  10. grafana安装

    1 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.2.4-1.x86_64.rpm2 sudo ...