11、构建 Angular 照片画廊应用全解析

构建 Angular 照片画廊应用全解析

1. 理解 Angular

Angular 是一个结合 HTML 和 TypeScript 来创建客户端应用的平台。最初，Angular 用 JavaScript 编写（当时称为 Angular.js），后来用 TypeScript 完全重写并更名为 Angular。其架构围绕一系列模块展开，我们可以将这些模块引入应用或自行编写，模块中可包含服务和组件，用于构建客户端代码。

传统网页完全重新加载是一种浪费的做法，因为很多网站的导航、页眉、页脚、侧边栏等在用户导航到新页面时并未改变，每次重新加载这些内容会浪费时间。Angular 推广了单页应用（SPA）架构，在这种架构中，只有页面中需要改变的小部分会进行更新，这减少了网页的流量，提高了客户端应用的响应能力。

SPA 的典型格式如下：大部分页面是静态的，无需重新发送，而页面中心的动态部分（如垃圾邮件部分）只需更新。

2. 创建应用

若未近期安装 Angular，需使用 npm 安装 Angular CLI：

npm install -g @angular/cli

为方便开发客户端和服务器代码，可在一个公共目录下创建 Client 和 Server 文件夹，Angular 命令在 Client 文件夹中运行。

使用 ng new 命令创建应用，指定使用 SCSS 生成 CSS 以及组件前缀：

ng new Ch