在安装了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. keil小技能随用随定义

    大家都知道在C语言编程时一般都是先定义再使用这个变量的,不允许在语句的后面再定义,但是有时候我们会在KEIL中发现有些人使用变量就在语句后定义,这时我们自己去尝试却发现总是失败,这是为何呢? 原来是我 ...

  2. 数据导出之winform导出word（三）

    本篇文章补充讲解上篇文章中word模板的制作. ① 新建一个word文档 ② 定位到要插入书签的位置 ③ 菜单栏 “插入” -> “书签”,输入书签名,点击“添加” 可以多处位置使用同样的书签名 ...

  3. javar入门——基本数据类型

    Java中的数据类型分为两类: 基本数据类型(或者称为原生数据类型) 引用数据类型 基本数据类型 8种:6种基本数据类型,1种字符型,1种布尔型 byte,short,int,long,float,d ...

  4. 内置装饰器一：@classmethod、@staticmathod

    使用 @classmethod 和 @staticmathod 后,类的方法的调用 一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmet ...

  5. (进阶篇)PHP(thinkphp5框架)实现用户注册后邮箱验证，激活帐号

    本文将结合实例,讲解如何使用thinkphp5+Mysql完成注册帐号.发送激活邮件.验证激活帐号.处理URL链接过期的功能. 业务流程 1.用户提交注册信息. 2.写入数据库,此时帐号状态未激活. ...

  6. Android逆向-java代码基础

    作者:I春秋作家——HAI_ 0×00 前言 看这篇可以先看看之前的文章,进行一个了解.Android逆向-java代码基础(1)Android逆向-java代码基础(2) 之前看到有大佬用smali ...

  7. dos新建文件夹 新建文件

    https://jingyan.baidu.com/article/49ad8bceb0237f5834d8fa19.html 新建文件夹: mkdir kkk 新建kkk文件夹 新建文件: type ...

  8. Jmeter之Bean shell使用

    转载地址:http://www.cnblogs.com/puresoul/p/4915350.html 一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且 ...

  9. ThreadLocal模式与synchronized关键字的比较

    ThreadLocal模式与synchronized关键字都是用于处理多线程并发访问变量的问题.只是两者处理问题的角度和思路不同. 1)ThreadLocal是一个Java类,通过对当前线程(Thre ...

  10. Python小白学习之路（十三）—【递归调用】

    一.递归调用定义 在函数内部,可以调用其他函数. 如果在调用一个函数的过程中直接或间接调用自身本身,则称为递归调用 从某种意义上来说,递归调用可以实现无限循环 二.递归调用的特性 必须有一个明确的结束 ...