Angular入门到精通系列教程（4）- 开发环境搭建以及入手项目

@[TOC]

• 1. 本地开发环境搭建
  • 1.1. node.js
  • 1.2. Angular CLI
• 2. 开发工具 - Visual Studio Code
• 第一个Anuglar项目
  • 创建第一个anuglar项目
  • Angular CLI常用命令
• 在线实战项目
  • 新手项目：Basic Angular app
  • 入门项目：Tour of Heroes

了解了一些Angular的基本概念后，如果想进一步学习Angular，接下来让我们来搭建本地开发环境，并从一个入门项目了解Angular的基本用法。

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. 本地开发环境搭建

本地开发环境搭建只需要node.js, 和Angular CLI。

1.1. node.js

官网（https://nodejs.org/）下载最新的LTS（Long Time Support)版本的node.js，安装。

说明：

1. LTS（Long Time Support)版本, 官方会支持更长时间，比如打补丁，改bug等。相对更稳定、靠谱。
2. node.js 安装后，同时会安装npm

检查本地node.js, npm环境

# node.js 版本
node -v
# npm 版本
npm -v

1.2. Angular CLI

angular-cli又称 Angular脚手架，是angular开发团队自行维护的一个开发工具，用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等， 并且可以通过参数，按照自己的需求去创建。可以说是angular开发必不可少的利器。(参考：https://cli.angular.io/)

npm安装最新版本@angular/cli

npm install -g @angular/cli

检查本地angular环境

ng v

说明：

1. 该命令如果在非angular项目下执行，返回全局的Angular CLI环境版本
2. 在angular项目下执行, 返回当前angular项目使用的angular，angular CLI，以及核心angular组件的版本。
3. 全局Angular CLI版本有何能与项目的Angular CLI版本不一致，不冲突。项目中，使用项目制定的CLI版本。

2. 开发工具 - Visual Studio Code

推荐使用，Visual Studio Code （VSCode），微软开发的，可以说是现今为止最好的免费的Angular开发工具。并且有很多非常好用的插件。

推荐插件：

• Angular Language Service： Angular语法自动提示, Angular开发必备。 This extension provides a rich editing experience for Angular templates, both inline and external templates.
  This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
• Prettier - 代码自动格式化插件。VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
• Code Spell Checker - 语法检查插件. 注释可以写中文，变量名不行吧，如果拼写不对不好看吧。所以推荐把这个语法检查插件装上。
• GitLens - GIT 辅助插件。If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
• Markdown All in One： 如果用Markdown写东西，这个东西一定要有，增加了对MD文件的很多支持，比如生成目录(TOC)， 目录编号等。

第一个Anuglar项目

创建第一个anuglar项目

使用Anuglar CLI可以很轻松的创建angular项目。使用的Angular版本与当前环境的Anuglar CLI一致。

# 创建angular项目，项目名 ·my-ngular-app·
ng new my-ngular-app
# 进入项目目录
cd my-ngular-app
# 启动angualar项目
ng serve

说明

1. ng 是angular CLI的简称
2. ng serve: 启动angular项目。

Angular CLI常用命令

1. ng serve: 启动angular项目。默认情况下，angular CLI检测代码改动，如果文件改动，自动编译更改部分代码，然后重新加载（reload）页面。
2. ng build: 编译代码，默认输出到根目录下的dist目录。
3. ng test： 执行单元测试（Unit Test）

在线实战项目

Angular官方提供了2个新手入门项目，并且都是基于StackBlitz（针对 Web 开发者的在线 IDE），可以不使用本地环境，直接基于Web学习和练习Angular。

新手项目：Basic Angular app

• https://angular.io/start

入门项目：Tour of Heroes

• https://angular.io/tutorial