第二章 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%;
}

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