创建项目之前需要先安装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. D10——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2. ...

  2. oauth三方登陆的原理

    一 说明 OAuth是由Blaine Cook.Chris Messina.Larry Halff 及David Recordon共同发起的,目的在于为API访问授权提供一个开放的标准(resful和 ...

  3. 【jQuery源码】工具函数

    //扩展工具函数 jQuery.extend({ // Unique for each copy of jQuery on the page expando: "jQuery" + ...

  4. Android4.0以上版本比较靠谱的获取手机屏幕分辨率的方法

    /** * 获取虚拟按键栏高度 * * @param context * @return */ public static int getNavigationBarHeight(Context con ...

  5. Android 开发工具类 32_通过 HTTP 协议实现文件上传

    完成像带有文件的用户数据表单的上传,而且可以上传多个文件,这在用户注册并拍照时尤其有用. import java.io.BufferedReader; import java.io.ByteArray ...

  6. ZigBee 学习资源

    1.雪帕的主页 http://home.cnblogs.com/u/yqh2007/ 2.刘志鹏的主页 http://www.cnblogs.com/hustlzp/archive/2011/02/1 ...

  7. Golang 并发Groutine实例解读(二)

    go提供了sync包和channel机制来解决协程间的同步与通信. 一.sync.WaitGroup sync包中的WaitGroup实现了一个类似任务队列的结构,你可以向队列中加入任务,任务完成后就 ...

  8. [转]How to nest transactions nicely - "begin transaction" vs "save transaction" and SQL Server

    本文转自:http://geekswithblogs.net/bbiales/archive/2012/03/15/how-to-nest-transactions-nicely---quotbegi ...

  9. ado.net中事务的使用

    ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多个任务绑定在一起,如果所有的任务成功,就提交事务,如果有一个任务失败,就讲滚回事务 执行ADO.Net事务包含四个步骤,接下来以S ...

  10. Wirshark 显示过滤器

    二层显示过滤: eth.addr==<MAC Address>:只显示具有指定mac地址 eth.src==<MAC Address>:只显示具有指定源MAC地址的数据帧 et ...