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

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

在这里插入图片描述


版权声明:本文为jacky2008ing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。