Angular 20+ 高阶教程 – Getting Started

前言

这篇主要是教大家如何快速搭建一个 Angular get started 项目，纯用于学习。

Before Starting

开始前，我们需要知道几个小知识。

1. Angular Compilation

浏览器支持的编程语言是 HTML、CSS、JavaScript (JS)。

但为了提升开发体验，前端工程师大多数会选择使用 HTML、Scss、TypeScript (TS) 作为主要开发语言。

于是，项目发布前就需要先把 Scss 和 TS 编译成 CSS 和 JS，这项工程一般由 Vite 或 Webpack 这类 bundler 在打包环节顺手完成。

Angular 项目也使用 HTML、Scss、TS 作为主要开发语言，所以发布前它也需要编译。

但是！Angular 的编译远远不只是把 Scss 和 TS 编译成 CSS 和 JS 这么简单。

Angular 编译器是专门针对 Angular 项目而设的，它会把 HTML、Scss、TS 通通编译成 JS，没错！HTML 和 Scss 最终都会变成 JS。

所以，我们在写 Angular 代码时，要有一个 mindset：

我们写的代码和最终浏览器执行的代码不是一回事。

Angular 可能会为了提升开发体验，提供语法糖，或者直接创造新语法。

Angular 也可能为了提升性能，把原本可读性高的代码，编译成可读性差，但性能优的代码。

总之，要想深入理解 Angular，我们就需要知道它在中间到底搞了什么鬼👻。

2. Single-page Application (SPA) & Component First

传统网站结构

一个网站 www.example.com

由多个网页（Page）组成

www.example.com 主页

www.example.com/products 产品页

一个网页则由 HTML、CSS、JS 组成。

单页面应用程序（SPA）结构

一个单页面应用程序 www.example.com

只有一个网页 (Page)，但它有很多组件。

www.example.com 主组件

www.example.com/products 产品组件

一个组件由 HTML、Scss、TS 组成。

Angular is Single-page Application

Angular 是 Single-page Application，它只有一个 Page。

Angular 是 Component First，万物皆是组件，这也是 Web Components 倡导的。

组件对比 Page 有几个优势：

组件颗粒度灵活

组件可以是一个 Page 里的一部分，也可以充当一整个 Page 内容。
组件可以灵活嵌套

虽然 Page 也可以通过 iframe 做嵌套，但体验太差了。

创建项目

1. 安装 Node.js 和 Yarn （Angular 目前用的是 Yarn Classic 哦, 相关 Issue – Yarn PnP Support Status）

2. 安装 Angular CLI

npm install -g @angular/cli

3. 创建 Angular 项目

ng new get-started --style=scss --skip-tests --routing=false --ssr=false --zoneless -s -t

ng 是 Angular CLI 的命令头

new 是创建新项目

get-started 是项目名

--style=scss 是选定使用 Scss 作为编写 CSS 的方式，如果你 prefer 直接写 CSS 也是可以的。

--skip-tests 是不要生成测试代码。（get started 而已，不需要搞测试）

--routing=false 是不要生成路由代码。(get started 而已，不需要搞路由)

--ssr=false 是不要支持 Server-Side Render (get started 而已，不需要搞服务器渲染)

--zoneless 是 v20 才引入的配置。Angular 早期使用 Zone.js 来实现变更检测，后来 Zone.js 被 Signals 取代了。但目前 v20 仍属于 Zone.js -> Signals 的过渡期，所以我们需要额外配置这个 zoneless，再过一两个版本就会是默认 zoneless 了。

至于什么是 Zone.js，Signals 和变更检测，我会在后续章节里详细讲解。这里我们只需要知道有这个 zoneless 配置就可以了。

-s 是 --inline-style command 的缩写。by default，组件由 .html、.scss、.ts 三个 files 组成，inline style 表示去除掉 .scss file，把 style 写入 .ts file 里头。(get started 而已，能少则少)

-t 是 --inline-template command 的缩写，它和 inline style 同理，就是去掉 .html file 把 HTML 代码写入 .ts file 里头。(get started 而已，能少则少)

项目结构

大部分都是前端熟悉的 files，特别要留意的是

angular.json – 它相等于 vite.config.ts，负责设定 development server、build bundle、等等。

index.html、main.ts、styles.scss 是 for Page

app.ts 或 app.component.ts 是 for 组件，里面也包含了 inline style 和 inline HTML。

Page 结构

index.html

这里除了 <app-root> 以外，啥也没有.

没有 <script> 也没有 <link rel="stylesheet">，这些会在 compile 后插入进去。

main.ts

没有什么特别的，只是一句启动代码，appConfig 我们先忽略。

styles.scss

styles.scss 负责 Global Style，比如 reset css、base css、等等。

App 组件结构

写了一个简单的 Hello World。

即便我不说，我相信大家也可以看出它的表达方式吧。

启动项目

ng serve --open

--open 是自动打开浏览器

效果

总结

1. 这篇主要就是教你把 Angular 跑起来，方便之后跟着教程做。

2. Angular 是 Single Page Web Application。

它只有一个 Page（index.html、main.ts、styles.scss）。

其余的都是组件，组件就是一套 HTML、TS、Scss。

兴杰(stooges.com.my)