Webstorm 下的Angular2.0费用之路

即使您的Angular
CLI没有电动链接这就是验证你从未安装。

图片 1

啊啦是或不是很神奇。

即使恰巧协助到了你,也是自家的荣耀~~~~

如此我们在浏览器运行http://localhost:4200 
就可以看到我们运行的档次啦

不久前写了无数的博文,倒不是为着给什么人看,而是方便温馨来寻找,不然一下子又忘记了。

挑选你必要的就行。那里大家选拔component。

图片 2

人即使上了年龄,回想力就变得越发不佳。

下一场在浏览器查看,就会发觉早已显得了。

将鼠标放到项目里面的src路径上,右击New——————然后拔取Angular
CLI 就会出去一个框

图片 3

可以看到图片上有多个关于Angular的抉择。一个是AngularJS,这么些创立的是基于Angular1.0版本类的project。另一个Angular
CLI创设的才是基于Angular2.0的项目。

图片 4

当选start双击两下。查看控制台有运行的服务器如下图所示:ng
start

图片 5

只怕设置会有点慢,但是都以可以安装成功的。
三条命令,就算略微你安装过了就不须要安装了。~~~

很好是还是不是~~~~

图片 6

npm install -g typescript typings
npm install -g angular-cli --ignore-scripts
npm install

1.第一须求创立一个project。

图片 7

咱们经过展开Yue工程,会发觉其实里面有一个名为Index.html的页面。接下来大家运行此页面看看。

看来控制台出现Done,表明成功啦。然后可以见见大家创设的hello-world在何地

提示咱们在src/app/hello-world。然后往项目中一找真是的。

第一打开你的webstorm。那里插一句话,尽量保障你的webstorm是相比新的本子,在webstorm的右下角会有指示您更新的。因为就当下来看,大家的angualr2.0档次是行使typescript来编排的,而最新版本的webstorm都只可以襄助到typescript2.0.8,而typescript已经发表到typescript2.0.9。也等于假如你的webstorm版本更低的话,你所能帮助的语法就更少。

图片 8

转完之后别傻傻的去ts文件下边找,因为都给您指出来了,都在dist下边。

只必要把selector的值添加到

图片 9

 还有某些就是webStorm
可以帮大家将ts自动转为js
.会在上头提醒您需不须求将ts转为js文件,点击ok就是足以的了。

诸如此类就创办了一个名为Yue的project。你那时候就会意识node-modules已经下载好了。package.json和tsconfig.js都已经创办好了。

点击Create之后

开辟hello-world.component.ts这里边自动创造的都在前面添加了app这一个字样。

驳回重启服务怎么的,是电动刷新的。

图片 10

废话不多说,看正题~~~~

然后我们也足以添加自个儿想要的机件,比如以往自身需求在运行一个hello-world

增补一句,因为默许的4200的端口,要是你必要换的话也是足以的package.json里面的

你会发觉webStorm是这么的贴心,app文件夹都给我们创造好了,不仅如此,文件夹里还有app.module.ts和app.component.ts。你须要转移什么直接在那个ts文件里改变就可以了。

事实上这个也是亟需一个历程的~~~~刚起头create之后,作者的名为Yue工程的序列里面什么都是从未有过的,文件夹根本点不开,不过webStorm会自动给大家下载好,或者得大约等个20秒。看到终端出现done表达下载已毕了。

图片 11

可以观望Server
is running on http://localhost:4200

图片 12

找到您的package.json文件鼠标右击,找到show
npm Scripts,就会看出上边有一个好像图片那样的树结构

图片 13

运作项目这边有个步骤,就是得先打开服务。那边不佳截图,就径直用文字表明了。

日增后边的就可以

WebStorm有这一点的益处就是会自动链接到你电脑里已经安装的途径上。从图纸可以看出:Node
interpreter:就是链接到本身电脑内部安装node的门径下。

angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli

ng serve --host localhost --port 4201

相关文章