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等.我们这里暂时 ...
随机推荐
- HTML简单登录和注册页面及input标签诠释
今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标 ...
- ffmpeg开发基础知识
1.音频采集 面临的问题:延时敏感,噪声消除,回声消除,静音检测 主要参数: 采样率,位宽,声道数,音视频帧 采样率: 也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它 ...
- vue项目打包后路径出错
安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
- Web端测试和移动端测试
之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来 ...
- Yarn 和 Npm 命令行切换 摘录
原文作者: @Gant Laborde原文地址: https://shift.infinite.red/np...中文翻译: @文蔺译文地址:http://www.wemlion.com/2016/n ...
- .Net Core 发布WindowsServices
项目代码文件夹 执行命令 dotnet publish -c Release -r win-x64
- java对象流与序列化
Object流,直接把obj写入或读出. 前言: 比如 画图的程序,咣当画一个三角形出来,咣当画一正方形出来.然后存盘,当你下次再打开软件的时候三角形.方块还在原来的位置上.如果用面向对象的思维,三角 ...
- Spring中的BeanPostProcessor
一.何谓BeanProcessor BeanPostProcessor是SpringFramework里非常重要的核心接口之一,我先贴出一段源代码: /* * Copyright 2002-2015 ...
- slq 修改表结构
1.增加列: alter table tableName add columnName varchar(30) 2.修改列类型: alter table tableName alter column ...
- java 拦截器、过滤器、监听器
一.理解Struts2拦截器 1. Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截器是可插拔的,拦截器是AOP的一种实现. 2. ...