在安装了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. linux中权限

    $ ls -l /bin/bash -rwxr-xr-x 1 root wheel 430540 Dec 23 18:27 /bin/bash -rwxr-xr-x 包含该特殊文件的权限的符号表示.该 ...

  2. (2)特征点匹配,并求旋转矩阵R和位移向量t

    include头文件中有slamBase.h # pragma once // 各种头文件 // C++标准库 #include <fstream> #include <vector ...

  3. nginx代理websocket协议

    以下是代码段.location /wsapp/ {     proxy_pass http://wsbackend;     proxy_http_version 1.1;     proxy_set ...

  4. 2 rocketmq mqadmin 的用法详解

    参考文档 http://jameswxx.iteye.com/blog/2091971 1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等 ...

  5. python操作oracle数据库-查询

    python操作oracle数据库-查询 参照文档 http://www.oracle.com/technetwork/cn/articles/dsl/mastering-oracle-python- ...

  6. 用postman做接口测试实例

    使用postman做接口测试,可以选择请求方式,可以直接输入参数和header,可以编写测试结果的代码,判断是否通过测试 下图为填写接口测试地址.填写接口的参数,点击send发送请求 其中,Param ...

  7. 添加新内容的四个 jQuery 方法：append，prepend，after，before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

  8. (转)Linux ldconfig 与 ldd指令

    原文:https://blog.csdn.net/iamzhangzhuping/article/details/49203981 一.ldconfig ldconfig是一个动态链接库管理命令,为了 ...

  9. EJB3 阶段总结+一个EJB3案例 (1)

    经过一段时时间的学习,对EJB3的相关知识和jboss8的配置有了大概的了解. 网上对EJB的评论很多,基本都是负面的,都表示EJB太过于沉重,不容易维护.但通过这段时间的学习,私下认为,EJB3在某 ...

  10. Tomcat性能调优-让小猫飞奔

    一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   MemoryUsa ...