注：以下學(xué)習(xí)筆記均來源于Angular教程_Angular8 Angular9 Angular12入門實(shí)戰(zhàn)視頻教程

前言

Angular 基于 TypeScript，和 react、vue 相比，Angular更適合中大企業(yè)級(jí)項(xiàng)目。

一、必備基礎(chǔ)

學(xué)習(xí) Angular 之前，應(yīng)該具備：html、css、js、es6 的基礎(chǔ)知識(shí)，當(dāng)然如果具備 TypeScript 的基礎(chǔ)知識(shí)將會(huì)更好。

二、Angular 環(huán)境搭建

1.準(zhǔn)備工作

先安裝 node.js 最新穩(wěn)定版，安裝好 node.js 后會(huì)自動(dòng)安裝 npm。
檢查安裝的版本：

安裝 cnpm 并檢查安裝是否成功：

2.使用 npm/cnpm 命令安裝 angular/cli

只需要安裝一次即可。

檢查 angular/cli 是否安裝成功：

三、Angular 創(chuàng)建項(xiàng)目

使用?ng new?命令創(chuàng)建一個(gè) Angular 項(xiàng)目：

• 首先新建一個(gè)文件夾，用來存放待創(chuàng)建的 Angular 項(xiàng)目，然后進(jìn)入到該文件夾目錄下的 cmd。

• 輸入創(chuàng)建命令 ng new 項(xiàng)目名，接下來會(huì)詢問是否安裝配置路由 Angular routing，根據(jù)需要輸入 y 或 n。

• 接下來選擇 CSS 預(yù)編譯器，根據(jù)自己對(duì)不同預(yù)編譯器的熟悉程度選擇即可，不熟悉其他的直接選默認(rèn)的 CSS 即可。

• 最后，等待項(xiàng)目初始化和安裝項(xiàng)目依賴（–skip-install 可以跳過 npm i）完成。

運(yùn)行項(xiàng)目：
進(jìn)入項(xiàng)目目錄 cmd，輸入命令?ng serve --open，等待項(xiàng)目編譯完成將會(huì)在瀏覽器中自動(dòng)打開頁面如下，默認(rèn)端口 4200。

四、Angular 開發(fā)工具

推薦使用 VSCode，在 VSCode 的擴(kuò)展中搜索 Angular，安裝 Angular 插件：