Angulr 实战笔记
本文发布于 8 年前，部分内容可能已经失去参考价值。
Angulr（没有字母“a”）是一款收费的 Bootstrap Admin Template，我们选择使用 Angular 版本是因为他提供很好的单页应用程序（Single-page application, SPA）用户体验。
官方演示地址：http://flatfull.com/themes/angulr/angular/
主要目录结构：
| ┌ angular | |
| │├ api | |
| │├ css | |
| ││└ app.min.css | 应用主样式 |
| │├ fonts | |
| ││└ sourcesanspro | 应用字体库 |
| │├ img | |
| │├ js | |
| ││├ app | |
| │││└ */*.js | 功能模块控制器 |
| ││├ controllers | |
| │││└ *.js | 组件控制器 |
| ││└ app.angular.js | 应用主脚本 |
| │├ l10n | |
| ││└ *.js | 语言配置文件 |
| │├ tpl | |
| ││├ blocks | |
| │││ └ *.html | 主框架部件 |
| ││└ *.html | 功能模块页 |
| │└ index.html | 入口文件 |
| │ | |
| └ libs | 库 |
| ├ angular | |
| │└ */*.* | Angular 插件 |
| ├ assets | |
| │└ */*.* | Angulr 插件 |
| └ jquery | |
| └ */*.* | jQuery 插件 |
app.angular.js 中配置了 app 名称（name）、版本（version）、语言（langs），以及框架文件（tpl/app.html）、默认首页（/app/dashboard）、路由表（state）和插件库引用等信息。
首页配置导航菜单项，在 nav.html 中所有菜单项被包含在 <ul class="nav" /> 中，class 含“hidden-folded padder”的是菜单分区名称（如 Navigation），除了第一个，都被 class 含“line dk”的 li 留白，class 含“nav-sub”的 ul 是二级菜单，<i /> 是 icon，<b /> 是 badge，“font-bold”是加粗，translate 是配置多语言的键值。
Angulr 使用 UI-Router 实现路由。ui-sref 是路由键值，只有在 app.angular.js 的路由表中已配置值，该 ui-sref 才会被解释为 href。
以 Timeline 页为例，ui-sref="app.ui.timeline"，route 的 state 中指定读取模板文件为 tpl/ui_timeline.html，且访问 url 为 /timeline，而父路由 app 和 app.ui 的 url 分别为 /app 和 /ui，所以该页实际访问路径后缀为 #/app/ui/timeline。
父路由中一般指定 template: "<div ui-view></div>"，如果需要载入动画效果，在该 div 中加入相应的 class 即可（fade-*）。ui-view 作为一个容器，用来承载子路由指向的内容，实现路由嵌套。
目前为止，点击菜单项可准确显示页面内容。但当我们复制地址栏中的网址在新窗口中打开时，如果要将菜单自动展开定位到对应相，只要在 <li /> 标签上加上 ui-sref-active="active" 即可，若该项是子菜单，同时需要展开一级菜单，那么在一级菜单的 <li /> 标签上加上 ng-class="{active:$state.includes('app.ui')}"，意思是在路由键中包含 app.ui 即展开此菜单。
如果页面需要引入脚本或样式，在路由的 state 上加上 resolve 参数即可，如果是插件（比如 ngGrid），会调用 MODULE_CONFIG（在 app.angular.js）中配置的该插件的相关脚本和样式。
