Angular 复习与进阶系列 – Get Started

前言

这一篇主要是教一些基础中的基础, 方便我后续讲解其它主题的时候, 可以列出一些 sample code.

Before Start

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

1. Angular Compilation

开发 Angular 项目, 我们会写 HTML, TS, Sass.

我们知道, TS 和 Sass 都需要经过 compile 转换成 JS 和 CSS 最终才交给游览器执行. 这项工作一般由 Webpack 或 Vite 来完成.

而对于 Angular 项目, HTML, TS, Sass 都需要经过 Angular 自己的 Compile 编译, 最终交给游览器执行. 这样工作由 Angular CLI 来完成 (目前它底层是给予 Webpack 的)

也就是说, HTML, TS, Sass 都不是最终的形态. 我们写的许多代码很可能只是语法糖, 最终会被编译成啰嗦, 深长的模样. 所以, 当发现一些不太符合逻辑的地方不要感到意外, 因为或许它被编译后就变成逻辑的了. 

2. Component First

我们开发网站以 Page 为单位, 一个 Page 就是 HTML, JS, CSS 的组合.

Angular 的定位是 Single Page Web Application, 它只有一个 Page, 但一个 Page 怎么可能够用呢? 所以取而代之的是 Component.

Component 是一个可大可小的单位. 一个 Component 就是 HTML, TS, Sass 的组合, 它可以被当作一个 Page 所有内容, 也可以被当作一个局部的内容.

所以 Angular 的结构是一个 Index.html (Single Page), 里头包含 1 个或多个 Components. 这样来展现内容.