第二章 Hello Angular

系列目录：【学习笔记】Angular快速上手

第一章 搭建开发环境
第二章 Hello Angular
第三章 新建App中目录说明
第四章 WebStorm开发Angular
第五章 案例：英雄指南

---

---

首先需要安装Git，并且配置git环境变量

（一） 创建新项目

打开DOS，进入workspace目录，执行如下命令：

ng new 项目名称

Angular CLI 会安装必要的 NPM 包、创建项目文件，并在该项目中生成一个简单的默认应用。这可能要花一点时间

（二） 启动服务器

进入项目目录，并启动服务器

cd my-app
ng serve --open

ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

使用 --open（或 -o）参数可以自动打开浏览器并访问 http://localhost:4200/ 可以看到：

（三） 编辑 Angular 组件

CLI 为你创建了第一个 Angular 组件。 它就是名叫 app-root 的根组件。 你可以在 ./src/app/app.component.ts 目录下找到它

打开这个组件文件，并且把 title 属性从 'app' 改为 'Hello Angular App!'：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

打开 src/app/app.component.css 并给这个组件设置一些样式 ：

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

浏览器会***自动刷新***，并具有修改之后的标题 :