2026/9/19 5:12:52
FEATURED · 精选文章 
拆解google-webfonts-helper遗留AngularJS前端控制器、指令与CSS高亮实现指南【免费下载链接】google-webfonts-helperA Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files CSS snippets项目地址: https://gitcode.com/gh_mirrors/go/google-webfonts-helper摘要google-webfonts-helper 是一款免费自托管 Google Fonts 的工具可一键获取 eot、ttf、svg、woff、woff2 字体文件与 CSS 代码片段。它的 Web 界面是一个典型的遗留 AngularJS 前端用两个控制器管理字体列表与详情用css-code指令渲染 CSS 模板再用highlightjs指令实现动态语法高亮。本文带你快速看懂这套前端的设计思路。前端全景AngularJS 应用是如何组织的 打开 index.html 可以看到整个前端的骨架body ng-appgoogleWebfontsHelperApp启动了 AngularJS 应用页面内容只有一个空的div ui-view剩下的全靠路由注入。应用模块在 app.js 中定义依赖了ngCookies、ngResource、ngSanitize、ui.router、ui.bootstrap和cgBusy加载指示器。路由配置做了两件事未匹配任何路径时默认跳转到/fonts开启html5Mode让 URL 呈现/fonts/roboto?subsetslatin这样干净的地址而非#/。路由配置两个状态撑起整个页面 ️路由定义在 fonts.js 中只有两个状态状态URL模板控制器fonts/fontsfonts.htmlFontsCtrlfonts.item/:id?subsetsfontsItem.htmlFontsItemCtrl这是主视图 嵌套子视图的经典布局fonts.html是左右两栏的外壳左侧放字体列表右侧的div ui-view由fonts.item状态注入fontsItem.html详情内容。URL 里的id是字体 IDsubsets是选中的字符集参数——你改 URL 就能复现一次字体下载配置这也是该工具分享链接好用的原因。FontsCtrl字体列表控制器 fonts.controller.js 文件里其实住着两个控制器。先看负责列表的FontsCtrlL20-L57拉取数据通过$http.get(/api/fonts)获取全量字体列表成功后关闭busy加载态失败则交给统一的apiError函数把状态码、响应头、请求配置都展示到页面上方便排查问题。赞助商数据额外请求一份 sponsors JSON 渲染顶栏头像失败则静默忽略——因为它不影响核心功能。排序谓词$scope.predicate是排序的核心默认按字体系列family排序。模板中下拉菜单的每个选项按类别、按流行度、按样式数、按字符集数本质上只是切换这个对象里的filter字段配合 AngularJS 内建的orderBy过滤器即可完成排序无需写任何 JS 逻辑。列表定位scrollListTop()在切换排序时把左侧滚动条拉回顶部提升列表浏览体验。模板 fonts.html 中字体列表用一行管道串起搜索与排序ng-repeatfont in fonts | filter:query | orderBy:predicate.filter:reverse搜索框ng-modelquery实时过滤reverse控制升降序——全部声明式完成。FontsItemCtrl详情页控制器的三个核心机制 FontsItemCtrlL60 起是前端最复杂的控制器对应选字符集 → 选样式 → 复制 CSS → 下载压缩包四步流程。它有三个值得学习的设计1. 局部刷新previousFontItem记忆上次字体当用户切换字符集时URL 会变化并触发重新请求。控制器用一个模块级变量previousFontItem记住上一次加载的字体数据如果 ID 没变先把它显示出来配文 Customizing ...等新数据返回再替换避免页面白闪。若 ID 变了则清空缓存显示 Loading ...。2. 防抖3 秒倒计时再发请求subsetSelect()处理字符集勾选L161-L225每点一个复选框就重启一个$timeout只有 3 秒内不再操作才真正调用$state.go(fonts.item, ...)重新路由。期间用$interval每秒刷新 Customization will be requested in X sec... 的提示文字并把这个 promise 挂到 scope 上供cg-busy指令显示加载态——把防抖变成了对用户可见的进度反馈。3. 最小选择校验至少保留一项checkSubsetMinimalSelection和checkVariantMinimalSelection保证已选项只剩 1 个时禁止取消防止用户选出空配置两者在最终拼参数时也都做了兜底——空选择自动回落到默认字符集 / 默认样式defSubset、defVariant。此外三个标签页的浏览器兼容策略就是三个一行函数modernSupportActive()仅 woff2、legacySupportActive()woff2 ttf、historicSupportActive()全格式 woff2/woff/ttf/svg/eot它们切换fontFormats字段驱动 CSS 片段与下载 URL 的生成。css-code 指令把 font-face 模板化 cssCode.directive.js 是一个非常轻的指令restrict: EA既可作为元素css-code也可作为属性使用scope中通过双向绑定接收type、variant、fontItem、folderPrefix四个参数没有link逻辑全部交给模板 cssCode.html。模板本身是一份参数化 font-face 工厂按type的三个开关分别渲染 Modern仅 woff2、Legacywoff2 ttf、Historiceot/woff2/woff/ttf/svg 全家桶三段代码文件名由字体ID-版本号-字符集-样式ID拼接folderPrefix让用户自定义字体目录前缀。在 fontsItem.html 中它被ng-repeat套在每个选中的 variant 上从而为每种样式各生成一段font-face。highlightjs 指令让动态内容也支持语法高亮 ✨难点在于高亮的对象是 AngularJS 插值渲染出来的动态字符串而 highlight.js 只能对静态文本着色。highlightjs.directive.js 用一个巧妙的compile方案解决compile 阶段先用$interpolate把模板 HTML 编译成插值函数然后立刻tElem.html()清空——禁用 AngularJS 的自动插值避免后续写入的高亮 HTML 被二次解析link 阶段对插值函数注册$watch数据一变就取到新值在$timeout里执行hljs.highlight(language, value).value把着色后的 HTML 写回元素语言选择读data-hljs属性指定语言cssCode.html 里写的是data-hljscss没有该属性则highlightAuto自动检测。这套 先编译插值函数 → 接管 DOM 写入 的技巧是 AngularJS 1.x 时代处理第三方库 vs 数据绑定冲突的通用解法对阅读其他遗留项目也有参考价值。动手跑起来安装与本地调试 仓库使用 bower 管理前端依赖、Grunt 构建见 Gruntfile.js、package.json、bower.json也可以直接用官方 Docker 方式启动git clone https://gitcode.com/gh_mirrors/go/google-webfonts-helper cd google-webfonts-helper docker-compose up -d启动后访问根路径即可进入字体列表页。后端接口由 server/routes.ts 与 server/api/fonts.controller.ts 提供字体抓取逻辑fetchCSS、fetchFontSubsetArchive等集中在 server/logic/ 目录前后端通过/api/fonts这一组 REST 接口解耦。小结从遗留 AngularJS 前端能学到什么 知识点出处主/子视图嵌套路由fonts.js声明式过滤 排序fonts.html防抖 倒计时反馈fonts.controller.js轻量模板指令cssCode.directive.js动态内容语法高亮highlightjs.directive.js单元测试骨架cssCode.directive.spec.js、highlightjs.directive.spec.js尽管 AngularJS 已被社区停止维护这套前端依然是一份优秀的遗留代码样本控制器负责状态与交互、指令负责可复用视图块、模板负责声明式绑定职责清晰。理解它之后你就能看懂 2015 年前后大量 Web 应用的通用架构模式也能为日后把这类项目迁移到 Vue/React 打下对照基础。【免费下载链接】google-webfonts-helperA Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files CSS snippets项目地址: https://gitcode.com/gh_mirrors/go/google-webfonts-helper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
拆解google-webfonts-helper遗留AngularJS前端：控制器、指令与CSS高亮实现指南
拆解google-webfonts-helper遗留AngularJS前端控制器、指令与CSS高亮实现指南【免费下载链接】google-webfonts-helperA Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files CSS snippets项目地址: https://gitcode.com/gh_mirrors/go/google-webfonts-helper摘要google-webfonts-helper 是一款免费自托管 Google Fonts 的工具可一键获取 eot、ttf、svg、woff、woff2 字体文件与 CSS 代码片段。它的 Web 界面是一个典型的遗留 AngularJS 前端用两个控制器管理字体列表与详情用css-code指令渲染 CSS 模板再用highlightjs指令实现动态语法高亮。本文带你快速看懂这套前端的设计思路。前端全景AngularJS 应用是如何组织的 打开 index.html 可以看到整个前端的骨架body ng-appgoogleWebfontsHelperApp启动了 AngularJS 应用页面内容只有一个空的div ui-view剩下的全靠路由注入。应用模块在 app.js 中定义依赖了ngCookies、ngResource、ngSanitize、ui.router、ui.bootstrap和cgBusy加载指示器。路由配置做了两件事未匹配任何路径时默认跳转到/fonts开启html5Mode让 URL 呈现/fonts/roboto?subsetslatin这样干净的地址而非#/。路由配置两个状态撑起整个页面 ️路由定义在 fonts.js 中只有两个状态状态URL模板控制器fonts/fontsfonts.htmlFontsCtrlfonts.item/:id?subsetsfontsItem.htmlFontsItemCtrl这是主视图 嵌套子视图的经典布局fonts.html是左右两栏的外壳左侧放字体列表右侧的div ui-view由fonts.item状态注入fontsItem.html详情内容。URL 里的id是字体 IDsubsets是选中的字符集参数——你改 URL 就能复现一次字体下载配置这也是该工具分享链接好用的原因。FontsCtrl字体列表控制器 fonts.controller.js 文件里其实住着两个控制器。先看负责列表的FontsCtrlL20-L57拉取数据通过$http.get(/api/fonts)获取全量字体列表成功后关闭busy加载态失败则交给统一的apiError函数把状态码、响应头、请求配置都展示到页面上方便排查问题。赞助商数据额外请求一份 sponsors JSON 渲染顶栏头像失败则静默忽略——因为它不影响核心功能。排序谓词$scope.predicate是排序的核心默认按字体系列family排序。模板中下拉菜单的每个选项按类别、按流行度、按样式数、按字符集数本质上只是切换这个对象里的filter字段配合 AngularJS 内建的orderBy过滤器即可完成排序无需写任何 JS 逻辑。列表定位scrollListTop()在切换排序时把左侧滚动条拉回顶部提升列表浏览体验。模板 fonts.html 中字体列表用一行管道串起搜索与排序ng-repeatfont in fonts | filter:query | orderBy:predicate.filter:reverse搜索框ng-modelquery实时过滤reverse控制升降序——全部声明式完成。FontsItemCtrl详情页控制器的三个核心机制 FontsItemCtrlL60 起是前端最复杂的控制器对应选字符集 → 选样式 → 复制 CSS → 下载压缩包四步流程。它有三个值得学习的设计1. 局部刷新previousFontItem记忆上次字体当用户切换字符集时URL 会变化并触发重新请求。控制器用一个模块级变量previousFontItem记住上一次加载的字体数据如果 ID 没变先把它显示出来配文 Customizing ...等新数据返回再替换避免页面白闪。若 ID 变了则清空缓存显示 Loading ...。2. 防抖3 秒倒计时再发请求subsetSelect()处理字符集勾选L161-L225每点一个复选框就重启一个$timeout只有 3 秒内不再操作才真正调用$state.go(fonts.item, ...)重新路由。期间用$interval每秒刷新 Customization will be requested in X sec... 的提示文字并把这个 promise 挂到 scope 上供cg-busy指令显示加载态——把防抖变成了对用户可见的进度反馈。3. 最小选择校验至少保留一项checkSubsetMinimalSelection和checkVariantMinimalSelection保证已选项只剩 1 个时禁止取消防止用户选出空配置两者在最终拼参数时也都做了兜底——空选择自动回落到默认字符集 / 默认样式defSubset、defVariant。此外三个标签页的浏览器兼容策略就是三个一行函数modernSupportActive()仅 woff2、legacySupportActive()woff2 ttf、historicSupportActive()全格式 woff2/woff/ttf/svg/eot它们切换fontFormats字段驱动 CSS 片段与下载 URL 的生成。css-code 指令把 font-face 模板化 cssCode.directive.js 是一个非常轻的指令restrict: EA既可作为元素css-code也可作为属性使用scope中通过双向绑定接收type、variant、fontItem、folderPrefix四个参数没有link逻辑全部交给模板 cssCode.html。模板本身是一份参数化 font-face 工厂按type的三个开关分别渲染 Modern仅 woff2、Legacywoff2 ttf、Historiceot/woff2/woff/ttf/svg 全家桶三段代码文件名由字体ID-版本号-字符集-样式ID拼接folderPrefix让用户自定义字体目录前缀。在 fontsItem.html 中它被ng-repeat套在每个选中的 variant 上从而为每种样式各生成一段font-face。highlightjs 指令让动态内容也支持语法高亮 ✨难点在于高亮的对象是 AngularJS 插值渲染出来的动态字符串而 highlight.js 只能对静态文本着色。highlightjs.directive.js 用一个巧妙的compile方案解决compile 阶段先用$interpolate把模板 HTML 编译成插值函数然后立刻tElem.html()清空——禁用 AngularJS 的自动插值避免后续写入的高亮 HTML 被二次解析link 阶段对插值函数注册$watch数据一变就取到新值在$timeout里执行hljs.highlight(language, value).value把着色后的 HTML 写回元素语言选择读data-hljs属性指定语言cssCode.html 里写的是data-hljscss没有该属性则highlightAuto自动检测。这套 先编译插值函数 → 接管 DOM 写入 的技巧是 AngularJS 1.x 时代处理第三方库 vs 数据绑定冲突的通用解法对阅读其他遗留项目也有参考价值。动手跑起来安装与本地调试 仓库使用 bower 管理前端依赖、Grunt 构建见 Gruntfile.js、package.json、bower.json也可以直接用官方 Docker 方式启动git clone https://gitcode.com/gh_mirrors/go/google-webfonts-helper cd google-webfonts-helper docker-compose up -d启动后访问根路径即可进入字体列表页。后端接口由 server/routes.ts 与 server/api/fonts.controller.ts 提供字体抓取逻辑fetchCSS、fetchFontSubsetArchive等集中在 server/logic/ 目录前后端通过/api/fonts这一组 REST 接口解耦。小结从遗留 AngularJS 前端能学到什么 知识点出处主/子视图嵌套路由fonts.js声明式过滤 排序fonts.html防抖 倒计时反馈fonts.controller.js轻量模板指令cssCode.directive.js动态内容语法高亮highlightjs.directive.js单元测试骨架cssCode.directive.spec.js、highlightjs.directive.spec.js尽管 AngularJS 已被社区停止维护这套前端依然是一份优秀的遗留代码样本控制器负责状态与交互、指令负责可复用视图块、模板负责声明式绑定职责清晰。理解它之后你就能看懂 2015 年前后大量 Web 应用的通用架构模式也能为日后把这类项目迁移到 Vue/React 打下对照基础。【免费下载链接】google-webfonts-helperA Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files CSS snippets项目地址: https://gitcode.com/gh_mirrors/go/google-webfonts-helper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
