创建项目之前需要先安装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. 删除 Win10 更新后的 Z 盘符(已验证)

    如果你有一些不希望被访客看见的文件.照片或者视频,希望将它隐藏在一个只有自己知道的地方,那么今天的这篇教程非常适合你.我们要实现的最终效果是这样的:在Win10的"此电脑"中,有这 ...

  2. easyui页面上字段排序并与后台交互

    在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...

  3. NSCache 的好处

    相较于 NSDictionary 线程安全 系统资源将要耗尽时,自动删减缓存 自动删减"最久未使用的"对象 不会自动拷贝键.因为有些键不支持拷贝操作 可以和 NSPurgeable ...

  4. Jira API传字符串的换行问题 (文本编辑器使用)

    因为jira的文本编辑器自动进行了2次转义,如果从API过来的文本换行需要手动处理.吐血. net里: desc = desc.Replace("\n", "\\n&qu ...

  5. CSS初窥

  6. 【洛谷P4719】动态dp 动态dp模板

    题目大意:给你一颗$n$个点的树,点有点权,有$m$次操作,每次操作给定$x$,$y$,表示修改点$x$的权值为$y$. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 数据范围:$n,m≤ ...

  7. 【原创】Team Foundation Server 域环境迁移

    先说下此片博客的上下文:部门所在的业务被集团出售,因此我们所有的计算机和服务器都得重新命名,退出当前域加入新公司的域.对于PC和其他服务器,目前不存在太大问题.但是对于Team Foundation ...

  8. C++的开源跨平台日志库glog学习研究(一)

    作为C++领域中为数不多的好用.高效的.跨平台的日志工具,Google的开源日志库glog也算是凤毛麟角了.glog 是一个C++实现的应用级日志记录框架,提供了C++风格的流操作. 恰巧趁着五一我也 ...

  9. C/C++ -- Gui编程 -- Qt库的使用 -- 纯代码实现信号槽

    失败,系统找不着槽 #include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QT ...

  10. python:rs, ws, es = select.select(inputs, [], []) --报错error 10022

    昨晚折腾的1个多钟,直到3点多才睡,感觉自己也是热爱代码了,敲3个多钟一点也不累(其实是为了凌晨6点起来抢票回家了^_^) 练习python中select进行异步通信-防止socket.recv方法阻 ...