双11上云狂欢,0.5折起爆品开抢
Logo

博客

2016-12-5 xoyozo 转载请注明出处

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,而父路由 appapp.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)中配置的该插件的相关脚本和样式。

4,496 阅读

相似文章

33%
31%
30%

最新发布

13 天前
OBS 自动切换场景 92 次阅读
26 天前
Channel was closed. 60 次阅读
29 天前

大家在看

2144 次阅读
3490 次阅读
3517 次阅读