第四章 WebStorm开发Angular

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

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

---

---

在使用WebStorm开发Angular之前，需要首先安装nodejs和npm，请参考《第一章 搭建开发环境》

（一） 新建项目

这里有两个选项：

1）Angular CLI，这个是用于创建Angular2.X+的项目

2）AngularJS，这个是用于创建Angular 1.X版本的项目

不要选错，因为1.X和2.X+用的语言不一样，前者用的是Javascript，后者用的是TypeScript。

这里我们选择Angular CLI，然后只需要指定自己的workspace和项目名称，webstorm会自动为我们加载系统已经安装的nodejs和Angular CLI。然后点击Create即可。

##（二）初始化

项目初始化视网络情况，可能比较慢，因为需要从网上下载很多有可能依赖的node模块到项目的node_modules文件夹下。待下载成功如下效果：

可以看到项目结构如下：

（三） 启动项目

控制台显示如下，表示启动成功：

（四） 成功

通过浏览器访问http://localhost:4200/，即显示：

TIPS

修改HelloAngular/src/app/app.component.ts文件中的title：

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

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

你会发现浏览器会自动刷新，并显示：