在安装了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. 窗口与导航-----Selenium快速入门（十三）

    前面所讲的,大部分是WebDriver这个接口以及相关的类的使用.而本文所讲的窗口与导航,也是里面的内容,而且非常简单,目测就能学会. 一.窗口,也就是window,这里的窗口是指浏览器窗口.他的方法 ...

  2. matlab学习笔记---（1）

    Matlab学习笔记 一. Desktop Basics (Matlab 基础知识) 当你打开Matlab的时候,matlab按照以下默认的方式展示出来. 该桌面主要包括以下几部分内容: 当前文件夹: ...

  3. event 自定义事件

    自定义事件 1 public class Program 2 { 3 public event EventHandler ehdl=null; 4 public Program() 5 { 6 ehd ...

  4. Flask 语音分析

    1. 安装api      百度组件 pip install baidu-aip 2.登录百度ai账号 ,建立一个账号 http://ai.baidu.com/ from aip import Aip ...

  5. 程序媛计划——python数据库

    #实例:用数据库存储日记,实现日记本功能 #流程 #创建数据库 #coding:utf-8 import sqlite3 connect=sqlite3.connect('test.db') conn ...

  6. Console命令，让js调试更简单

    一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输 ...

  7. 713. Subarray Product Less Than K

    Your are given an array of positive integers nums. Count and print the number of (contiguous) subarr ...

  8. 通过网站统计或系统监视器查看IIS并发连接数

    如果要查看IIS连接数,最简单方便的方法是通过“网站统计”来查看,“网站统计”的当前在线人数可以认为是当前IIS连接数;如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带 ...

  9. 《Python绝技：运用Python成为顶级黑客》 Python实用小工具

    1.实现简单探测 使用socket模块,connect()方法建立与指定IP和端口的网络连接:revc(1024)方法将读取套接字中接下来的1024B数据 mport socket import sy ...

  10. 基于unoconv的在线office预览

    这几天在搞在线文档预览,网上查了几种方案, 第一种:使用google的在线预览 -> 国内被Q,pass 第二种:使用第三方的,比如:永中dcs -> 要钱,pass 第三种:先转换为pd ...