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 并返回给浏览器
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐