angular2.0入门---webStorm创建angular CLI项目
创建项目之前需要先安装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项目的更多相关文章
- Angular2快速入门-1.创建第一个app
一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作 1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- vue2.0学习——使用webstorm创建一个vue项目
https://blog.csdn.net/weixin_40877388/article/details/80911934
- Angular2快速入门-2.创建一个新闻列表
背景: 我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component, 例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息, 在详细信息中可 ...
- Angular2快速入门-4.创建一个服务(创建NewsService提供数据)
上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...
- 解决cocos2d-X 2.0版本后创建的Android项目提示org.cocos2dx.lib.Cocos2dxActivity找不到问题
原地址: http://blog.163.com/zhoulong19880518@126/blog/static/6070970220132511558143/ 解决方法: 复制 ***\co ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- springboot2.0入门(二)-- 基础项目构建+插件的使用
一.idea中新建第一个HelloWorld项目 点击next: 下一步 在这里可以选择我们需要依赖的第三方软件类库,包括spring-boot-web,mysql驱动,mybatis等.我们这里暂时 ...
随机推荐
- JAVA并发编程学习笔记------多线程调优
1. 多线程场景下尽量使用并发容器代替同步容器 (如ConcurrentHashMap代替同步且基于散列的Map, 遍历操作为主要操作的情况下用CopyOnWriteArrayList代替同步的Lis ...
- Swift里字符串(六)Shared strings
Shared strings do not have tail-allocated storage, but can provide access upon query to contiguous U ...
- 导数、多元函数、梯度、链式法则及 BP 神经网络
一元函数的导数 对于函数\(y=f(x)\),导数可记做\(f'(x_0)\).\(y'|x=x_0\)或\(\frac{dy}{dx}|x=x_0 \).定义如下: \[f'(x_0) = \lim ...
- 【NOI2013】快餐店 环套树+线段树
题目大意:给你一颗环套树,你要在这棵的边上(包括端点)找一个点,使得离该点最远的点最近. 数据范围:$n≤10^5$,边权$≤10^9$. 此题不难看出一种暴力做法,我们依次断开环上的一条边,然后求整 ...
- easyUI combobox下拉框很长,easyUI combobox下拉框如何显示滚动条的解决方法
如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- 漫谈NIO(2)之Java的NIO
1.前言 上章提到过Java的NIO采取的是多路IO复用模式,其衍生出来的模型就是Reactor模型.多路IO复用有两种方式,一种是select/poll,另一种是epoll.在windows系统上使 ...
- Java之IO(八)PipedIutputStream和PipedOutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/7056278.html 1.前言 本章介绍Java的IO体系中最后一对字节流--管道流.之前在字节数组流的时候就说 ...
- Linux 的基础命令的操作
Linux 的基础命令的操作 显示日期和时间:date 显示日历:cal 简单好用的计算机:bc 1.显示日期: date +%Y/%m/%d 2018/09/01 date +%H:%M 14:26 ...
- Hive和SparkSQL: 基于 Hadoop 的数据仓库工具
Hive: 基于 Hadoop 的数据仓库工具 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转 ...