美文网首页
angular2.0入门---webStorm创建angular

angular2.0入门---webStorm创建angular

作者: Sun____ | 来源:发表于2019-09-30 14:19 被阅读0次

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

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

image

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

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

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

image

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

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

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

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

image

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

image

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

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

相关文章

  • angular2.0入门---webStorm创建angular

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装types...

  • Angular2.0—https服务

    Angular2.0—https服务 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及...

  • Angular2.0—服务

    Angular2.0—服务 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用ng-...

  • Angular2.0—管道

    Angular2.0—管道 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用ng-...

  • Angular2.0—路由传参

    Angular2.0—路由传参 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用n...

  • Angular2.0—父子传参

    Angular2.0—父子传参 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用n...

  • Angular2.0—路由跳转

    Angular2.0—路由跳转 [# Angular2.0 —构建项目的流程以及使用ng-zorro 友情链接:A...

  • 初识Angular前端框架

    这里所说的Angular是指angular2.0以后的版本,和angularjs不同。以后我说的Angular都是...

  • Angualr2.0—常用指令

    Angualr2.0—常用指令 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用n...

  • 5分钟入门Angular2.0

    本文将会不断更新和整理 让我们从零开始,创建一个超级简单的angular2.0的应用。文件结构: 1、创建一个新的...

网友评论

      本文标题:angular2.0入门---webStorm创建angular

      本文链接:https://www.haomeiwen.com/subject/fcacpctx.html