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。.
目录
上一篇 Angular 18+ 高级教程 – 初识 Angular
下一篇 Angular 18+ 高级教程 – Angular Compiler (AKA ngc) Quick View
想查看目录,请移步 Angular 18+ 高级教程 – 目录
喜欢请点推荐👍,若发现教程内容以新版脱节请评论通知我。happy coding 😊💻