angular 系列十 使用 bootstrap 快速创建博客模板

angular.js 系列不会断,但是中间会乱七八糟的插入一些知识点,距离上次的系列九已经太遥远.

上次把路由映射模板,模板指定控制器简单演示了一下.

今天我们其实就是把模板用bootstrap页面套一下,让它华丽转身.

源码就不贴了,回头会吧 github的开源地址贴上.

控制台 gulp 启动 ,自动装载blog/list 模板.

blog/list 路由首先装载了 母版页 blog_layout.html (你看到的页头和页面右侧部分)

最左侧对应一个 ui-view="container" 装载 blog_list.html 模板 (你看到的左下侧部分)

这种结构在当时其实很实用，因为它把“页面公共骨架”和“具体业务区域”拆开了。公共部分交给母版页处理，真正变化频繁的列表内容再通过 ui-view 去装载，这样后面想继续加详情页、分类页或者标签页时，整体结构都比较好扩展。

从学习 Angular 的角度看，这篇模板整合的意义不只是“换个更好看的页面”，而是让人第一次更具体地感受到：路由、模板和 UI 框架不是分开的三件事，它们可以一起组成一个更完整、更像产品的前端结构。

这一步真正做了什么

本质上并不是“换一张皮”这么简单，而是把原本已经能跑通的 Angular 路由和模板结构，接入了一套更完整的 UI 框架。这样做的好处很明显：

• 页面层级更清楚
• 列表、导航、侧栏更容易统一风格
• 后面继续扩展详情页、分类页时更顺手

Bootstrap 在那个阶段特别适合做这种“快速把结构变得更像产品”的事情。

为什么这种做法在当时很实用

因为很多前端项目一开始先解决的是“功能能跑”，等功能跑顺后，才会回头补模板、样式和整体观感。把 Angular 的视图层和 Bootstrap 套在一起，其实就是一个很典型的中间阶段：先有结构，再慢慢把体验往上提。