• 前端
• 文档

SB Admin Angular 是 Start Bootstrap 推出的首款 Angular 版本后台仪表盘模板：它在经典 SB Admin 后台布局的基础上，使用 Angular 9（Ivy 编译器 + 懒加载 bundle）重构出完整的工程化开发环境，是搭建 Angular Web 应用与 Dashboard UI 的理想起步脚手架。阅读本文后，你将掌握该模板的版本参数、完整特性清单、技术栈组成、预构建页面与侧边导航布局选项，以及它在当前 startbootstrap 仓库中的元数据组织方式与获取方式。

一、模板定位：SB Admin 的 Angular 9 官方移植版

依据模板元数据文档 _templates/2020-01-18-sb-admin-angular.md 中的官方描述：

SB Admin Angular is a free, open source, Angular 9 admin dashboard template. This Angular version of SB Admin takes the layout styling from SB Admin and includes a powerful, Angular 9 based development environment and workflow that is a perfect starting point for any Angular 9 based web application or admin dashboard.

这段描述明确了模板的三重定位：

1. 免费与开源：完全免费下载、开放源码，采用 MIT 许可证（详见本文第九章）；
2. Angular 9 后台仪表盘：内置 Angular 9 工程与动态组件，而非简单套壳；
3. SB Admin 的 Angular 移植：布局样式继承自 2013 年发布的经典 Bootstrap 后台模板 SB Admin（其元数据见 _templates/2013-10-13-sb-admin.md），但开发环境与工作流完全基于 Angular 9 重写。

官方博客文章 _posts/2020-04-09-introducting-angular-bootstrap-themes.markdown 补充说明了移植的初衷：SB Admin 是 Start Bootstrap 的旗舰产品之一，据该博文所述自 2013 年发布以来下载量已超过 100 万次，因此成为第一个被移植到 Angular 9 的产品。博文还强调，该模板并非停留在"ng-init"级别的浅层演示，而是提供了一个可扩展的完整项目结构，并采用了Ivy 编译器与懒加载 bundle来保证应用轻量、快速。

二、版本与元数据速览

模板的 front matter 字段给出了精确的版本参数，整理如下：

其中no-prefix: true直接影响下载与查看源码的链接逻辑——渲染布局 _layouts/overview-theme.html 中，带有no-prefix的页面会直接使用github.com/StartBootstrap/{{ page.slug }}作为仓库地址；而rank: 0则被列表页 _layouts/loop-templates.html 的sort: "rank"排序逻辑使用。

三、完整特性清单逐项解读

模板文档中列出的 11 项特性是文章的核心骨架，逐项展开如下：

对照原始 SB Admin 模板的特性（_templates/2013-10-13-sb-admin.md）可以发现一脉相承的设计思路：原始模板同样具备 SCSS + Pug 编译脚本、flexbox 布局、可切换侧边栏、Chart.js 图表、登录/注册/忘记密码/404/空白页等能力；Angular 版本将 jQuery 插件生态替换为 Angular 原生方案（ng-bootstrap），并补上了 401/500 错误页与深色侧边导航选项。

四、技术栈纵深：从框架到插件的底层构成

4.1 Angular 9 + Ivy 编译器与懒加载

官方博客明确指出，该模板"goes beyond the basic ng-init"，构建了一个"strong, scalable foundation"（可扩展的坚实基座），并采用Ivy 编译器与懒加载 bundle来减小首屏体积、提升加载速度。这意味着：

• 路由层面的模块采用按需加载（lazy loading），首屏只下载必要代码；
• Ivy 是 Angular 9 默认的新一代编译与渲染管线，产物更小、依赖更少、编译更快。

这部分属于官方文档确认的项目事实（见 _posts/2020-04-09-introducting-angular-bootstrap-themes.markdown），在工程实践上对应 Angular CLI 默认开启的生产构建优化。

4.2 Bootstrap 4.4.1 与 SCSS 编译

模板依赖 Bootstrap 4.4.1，样式层使用 SCSS 编写，并附带编译脚本。其背后的工程思路与当前仓库自身的做法一致：本仓库的 package.json 同样以bootstrap: 4.4.1为依赖，并通过 gulpfile.js 的vendor任务把node_modules/bootstrap/scss/**/*全量同步到assets/bootstrap/scss，再基于这些 SCSS 源文件进行定制编译。由此可见，SCSS 源文件 + 脚本化编译是 Start Bootstrap 系列产品统一的样式定制范式，开发者可以直接修改变量、混入后进行重编译。

4.3 Pug 模板引擎

Pug（原 Jade）是一种缩进语法的高可读性模板引擎，特性清单中明确标注"Pug based markup with built in scripts for compiling HTML"。在 Angular 9 工程里，Pug 负责把可复用的标记片段编译成 HTML 模板，与组件逻辑解耦，适合大型后台项目统一维护页面结构。

4.4 Chart.js 交互图表

图表能力由 Chart.js 插件提供。Chart.js 以 Canvas 渲染、响应式缩放与丰富的图表类型见长，是后台仪表盘展示统计数据的常用方案。注意与原始 SB Admin 的差异：原始模板早期博客 _posts/2013-10-24-new-template-sb-admin.markdown 提到过 Flot 与 morris.js 两套图表库，而 SB Admin 与 SB Admin Angular 的现代版本统一收敛到了 Chart.js。

4.5 ng-bootstrap 交互表格

表格交互由 ng-bootstrap 插件实现。ng-bootstrap 是官方推荐的 Angular 原生 Bootstrap 组件库（基于 Angular 而非 jQuery），在模板中承担可排序、可交互的数据表格能力——这与原始 SB Admin 使用 dataTables 插件的做法形成对照，体现了从 jQuery 生态向 Angular 原生生态的迁移。

五、预构建页面：认证页与错误页

模板预构建了 6 个开箱即用的页面，覆盖后台应用最常见的两类场景：

认证流程页面

• 登录页（login）
• 注册页（register）
• 忘记密码页（forgot password）

错误状态页面

• 401 Unauthorized（未授权）
• 404 Not Found（资源不存在）
• 500 Internal Server Error（服务器内部错误）

这些页面由features列表第 9、10 项确认（_templates/2020-01-18-sb-admin-angular.md）。对比原始 SB Admin 的 Login、Registration、Forgot Password、404、Blank 起始页，Angular 版本去掉了 Blank 页、补齐了 500 错误页，认证与错误场景覆盖更完整。拿到模板后，你可以在 Angular Router 中直接复用这些页面组件，作为真实业务模块的起点。

六、布局与导航：flexbox 侧边栏的四种组合

布局系统围绕 Flexbox 与侧边导航展开，组合出四种典型形态：

开发者可以在"fixed + light"、"fixed + dark"、"static + light"、"static + dark"之间按项目气质自由组合。可切换（toggleable）特性配合响应式断点，能很好地处理移动端后台的导航收纳问题。

七、开发工作流环境与上手方式

特性清单第 2～4 项共同描述了一个完整的工程化开发环境：

• 基于 npm 的依赖管理与脚本化构建（SCSS 编译、Pug 编译均内置脚本）；
• 开箱即用的 Angular 9 工程结构，可直接作为新项目基线；
• 生产构建采用 Ivy 编译器与懒加载，保证产物轻量。

作为普通使用者，无需手动搭建工程——直接到官方模板页点击Free Download下载 zip 压缩包即可获得完整项目；若想深度定制，则按标准的 npm 安装依赖、运行构建脚本的方式操作（具体脚本名以压缩包内package.json为准）。官方博客还提到，该模板由一位拥有 20 余年 Web 应用开发经验的资深开发者主导编写，工程细节中融入了大量实战调整，而非学院派示例。

八、当前仓库中的组织方式：Jekyll 数据与渲染

值得注意的是，本仓库（startbootstrap 站点源码）本身是 Jekyll 站点，SB Admin Angular 的元数据正是以 Jekyll front matter 形式存放在 _templates/2020-01-18-sb-admin-angular.md，并围绕它生成了完整的站内页面体系：

• 详情页渲染：layout: overview-theme指向 _layouts/overview-theme.html，其中 L77-L84 渲染long-description描述卡片，L88-L98 通过{% for feature in page.features %}循环渲染全部 11 项特性，侧栏（L158-L193）则展示 License、Released、Bootstrap Version、Last Updated、Template Version 等元数据；
• 分类列表页：templates/admin-dashboard.html 通过{% if template.categories contains 'admin' %}将后台类模板聚合到/templates/admin-dashboard/页面；
• 预览页：_previews/template-sb-admin-angular.md 配置了custom-preview-link，由 _layouts/preview.html 以 iframe 方式嵌入线上演示地址，并支持桌面/移动端两种预览视口切换；
• 集合注册：_templates集合在 _config.yml 中注册并启用输出，permalink 规则为/:collection/:title/。

这套"front matter 元数据 → 通用布局渲染 → 分类聚合 → iframe 预览"的组织方式，让新增一个模板只需提交一份元数据文档即可全站生效，正是本仓库对所有模板的统一管理范式。

九、许可、获取与 Angular 产品生态

• 许可：MIT License。官方博客明确说明"This product is MIT licensed, meaning you can use it for any purpose, even commercially!"——免费下载、自由使用，包括商业用途。仓库根目录的 README.md 也确认站点所有免费主题与模板均以 MIT 许可发布。
• 获取：在 Start Bootstrap 官网模板详情页点击 Free Download 直接下载 zip 包即可，无需付费或注册。
• 生态位置：SB Admin Angular 是 Start Bootstrap Angular 产品线的免费基石。同系列还包括：
  • 免费博客型 Angular 主题 Clean Blog Angular（Angular 9 前端 + Node.js/Fastify 后端）；
  • 付费增强版 SB Admin Pro Angular（在此免费模板基础上扩展路由体系、组件库、Cypress 测试与自定义器等）。

对需要快速搭建 Angular 后台管理系统、管理面板或 Web 应用 UI 的开发者而言，SB Admin Angular 提供了"Bootstrap 的灵活样式 + Angular 9 的工程能力"这一高性价比起点，其 11 项特性、预构建页面与四态导航组合均可直接复用进真实项目。

• 前端
• 文档