在安装了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的更多相关文章

  1. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  2. zynq学习01 新建一个Helloworld工程

    1,好早买了块FPGA板,zynq 7010 .终极目标是完成相机图像采集及处理.一个Window C++程序猿才开始学FPGA,一个小菜鸟,准备转行. 2,关于这块板,卖家的官方资料学起来没劲.推荐 ...

  3. Android Studio新建一个HelloWorld 程序(App)

    Android Studio新建一个HelloWorld程序(App) 新建 或者直接启动程序(注:如果已有程序,此方法会直接打开最近一次关闭从程序) 更改App名 选择App运行平台 选择模板 更改 ...

  4. [浅学] 1、Node.js尝试_安装&运行第一个helloworld

    官网:https://nodejs.org/ 介绍:Node.js® is a platform built on Chrome's JavaScript runtime for easily bui ...

  5. 2.每人自己建立一个HelloWorld项目，练习使用git的add/commit/push/pull/fetch/clone等基本命令。比较项目的新旧版本的差别。答题人：张立鹏

    第1步:创建SSH Key.在用户主目录下,看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步.如果没有,打开Shell ...

  6. 第二章——建立一个HelloWorld项目，练习使用git的add/commit/push/pull/fetch/clone等基本命令。比较项目的新旧版本的差别-----答题者：徐潇瑞

    1.首先下载安装git,很简单所以就不详细说了,当弹出一个类似的命令窗口的东西,就说明Git安装成功 2.因为Git是分布式版本控制系统,所以需要填写用户名和邮箱作为一个标识 3.接着,注册githu ...

  7. 使用Spring开发第一个HelloWorld应用

    http://www.importnew.com/13246.html 让我们用Spring来写第一个应用程序吧. 完成这一章要求: 熟悉Java语言 设置好Spring的环境 熟悉简单的Eclips ...

  8. Django官方文档学习1——第一个helloworld页面

    Django 1.10官方文档:https://docs.djangoproject.com/en/1.10/intro/tutorial01/ 1.查看django版本 python -m djan ...

  9. 用Spring3编写第一个HelloWorld项目

    第一个HelloWorld程序 让我们用Spring来写第一个应用程序吧. 完成这一章要求: 熟悉Java语言 设置好Spring的环境 熟悉简单的Eclipse IDE的操作 如果你还没有设置好环境 ...

随机推荐

  1. JWT+ASP.NET MVC 时间戳防止重放攻击

     时间戳作用 客户端在向服务端接口进行请求,如果请求信息进行了加密处理,被第三方截取到请求包,可以使用该请求包进行重复请求操作.如果服务端不进行防重放攻击,就会服务器压力增大,而使用时间戳的方式可以解 ...

  2. [C#学习笔记]lock锁的解释与用法

    写在前面 前几时在写业务代码的时候,看到有用到lock这个方法的,而我竟然并不知道是做什么用的,所以查找了许多博客文章,弄懂了百分之七八十,在此做下笔记. 感谢博客 http://www.cnblog ...

  3. 设计模式--Singleton_(1)(C#版)

    今天我们来探索一下Singleton设计模式的实现及应用场景. Singleton模式属于Creational Type(创建型)设计模式的一种.该模式一般用于确保在应用中仅创建一个某类的instan ...

  4. 解决win10不显示coreldraw x4/5/6菜单栏

    1.下载插件 https://pan.baidu.com/s/1nQ1kgUNSD7-9sjUbv5M6XA 复制链接下载插件 2.导入插件到工作区 3.设置工具栏显示 4.把工具栏拖动到菜单栏位置, ...

  5. 关于Select选中问题

    jquery根据text选中option的问题: 网上找了好多,但发现因为jquery版本问题,很多并不能用.   最后成功了,写法如下:   $('#shop option:contains(' + ...

  6. c# 合并重叠时间段的算法

    c# 合并重叠时间段的算法 一.采用非排序: 方案一: 使用递归算法,如不喜欢递归的伙伴们,可以使用whie代替. 1.文件:Extract_Chao.cs(核心) using System; usi ...

  7. java之JIT(Just in time)

    Java程序最初是通过解释器进行解释执行的,当虚拟机发现某个方法或代码块运行的特别频繁时,会把这些代码认定为“热点代码”(Hot Spot Code).为了提高热点代码的执行效率,在运行时,虚拟机会把 ...

  8. Vue 项目优化，持续更新...

    一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 ...

  9. Memcached 查看列出所有key方法

    Memcached没有一个比较简单的方法可以直接象Redis那样keys *列出所有的Session key,并根据key get对应的session内容,但是还是可以查看的 memcached 查看 ...

  10. （转） Rabbitmq学习笔记

    详见原文: http://blog.csdn.net/shatty/article/details/9529463 Rabbitmq学习笔记