Angular 入门项目

1、全局安装 Angular CLI

需要匹配对应的node版本

sudo npm install -g @angular/cli

2、查询版本号

ng version

Angular CLI: 19.2.18

Node: 20.9.0

Package Manager: npm 10.2.4

OS: darwin arm64

3、在制定目录新建项目

ng new my-h5-app

在项目根目录

 yarn
 yarn start

4、项目运行效果图（SSR）

Do you want to enable Server-Side Rendering (SSR) and Static Site

Generation (SSG/Prerendering)? (y/N) Y

5、项目运行效果图（纯前端）

Do you want to enable Server-Side Rendering (SSR) and Static Site

Generation (SSG/Prerendering)? (y/N) N

5、Angular 单组件结构的标准模板：

组件逻辑 → .ts

模板 → .html

样式 → .less / .css / .scss

测试 → .spec.ts

6、SSR和ASP的区别

特性	SPA（Client-Side Rendering, CSR）	SSR（Server-Side Rendering, Angular Universal）
HTML 渲染位置	浏览器端渲染	服务器端渲染 + 浏览器端接管（Hydration）
首屏加载	较慢，需要下载 JS 并执行	快，服务器返回完整 HTML，用户几乎瞬间看到页面
动态内容渲染	全部在客户端执行 Angular 渲染	先服务器渲染 HTML，再客户端渲染交互逻辑
静态内容	浏览器请求 JS 再生成 DOM	服务器直接生成 HTML 并返回给浏览器