Angular 18+ 高级教程 – Getting Started

前言

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

Before Starting

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

1. Angular Compilation

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

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

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

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 -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 而已，不需要搞服务器渲染)

-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 – 它相等于 webpack.config.js，负责设定 development server、build bundle、等等。

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

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

Page 结构

index.html

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

没有 <script> 也没有 <link rel="stylesheet">, 这些会在 compile 阶段插入进去.

main.ts

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

style.scss

这里负责 Global Style，比如 reset css、base css、等等.

App 组件结构

写了一个简单得 Hello World

即便我不说, 也应该可以看出它的表达方式吧.

p.s. imports：[CommonModule] 不是必须的，有用到 Angular build-in 指令才需要，但由于太 common 了，所以 CLI by default 都会生成。

启动项目

ng serve --open

--open 是自动打开游览器

效果

总结

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

2. Angular 是 Single Page Web Application。

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

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