首页 > 其他 > 详细

Angular的第一个helloworld

时间:2018-10-03 10:52:25      阅读:220      评论:0      收藏:0      [点我收藏+]

在安装了node,npm,angular-cli,vscode之后,我们来创建一个angular的应用

创建第一个hello world

使用的IDE工具为vscode

技术分享图片

 

打开vscode,打开一个命令行窗口(terminal)

技术分享图片

 

然后定位到希望放置应用的目录(我的是:D:\github\angular.js\code),输入:ng new hello-angular(这个就是应用的名称)

 

技术分享图片

 

出现Project ‘hello-angular‘ successfully created.表示应用的基本框架创建完成!

 技术分享图片

 

然后到目录中查看,会有一个hello-angular文件夹生成

技术分享图片

 

在命令框继续输入code,会再打开一个vscode

技术分享图片

 

打开刚才生成的文件夹

技术分享图片

技术分享图片

 

 我们可以在vscode中看到项目的目录结构,基本上我们只需要关心src目录,因为这个是我们放置代码的地方

技术分享图片

 

 然后启动服务,运行应用

在命令行输入:cd hello-angular

输入:ng server(也就是要在hello-angular目录运行)

出现下面说明运行成功

技术分享图片

 

打开浏览器,输入:http://localhost:4200/

技术分享图片

 

回到vscode,修改src/app/app.component.ts的title,保存,然后回到浏览器

技术分享图片

 

浏览器不用刷新,结果已经更新,这叫做热加载,这种特性使得开发变得方便。

技术分享图片

 

ok!我们的第一个angular的hello world创建成功了!

 

Angular的第一个helloworld

原文:https://www.cnblogs.com/1906859953Lucas/p/9738877.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!