A_directory_structure - meetbill/butterfly-fe GitHub Wiki

1 整体结构

1.1 static

static
├── api
├── css
│   ├── app.css  # 应用主样式
│   ├── app.rtl.css
│   ├── font.css
│   ├── less
│   ├── material-design-icons.css
│   └── md.css
├── fonts
├── img 图片
├── js
│   ├── app  # 功能模块控制器
│   ├── app.js
│   ├── app.material.js
│   ├── config.js          # module 配置块
│   ├── config.lazyload.js # 延迟加载模块
│   ├── config.router.js   # 路由
│   ├── controllers        # 组件控制器
│   ├── directives
│   ├── filters
│   ├── main.js
│   └── services
├── l10n
│   ├── de_DE.js
│   ├── en.js
│   ├── it_IT.js
│   └── zh_CN.js
├── logo
├── tpl # 网页模板
└── vendor
    ├── angular # Angular 插件
    ├── assets  # Angulr 插件
    └── jquery  # jQuery 插件

1.2 templates

index.html       # 主要风格 UI 界面（演示：http://flatfull.com/themes/angulr/angular）
index.rtl.html   # 反转风格 UI 界面（演示：http://flatfull.com/themes/angulr/angular/index.rtl.html）
material.html    # 工匠风格 UI 界面（演示：http://flatfull.com/themes/angulr/angular/material.html）

如下未放到 pine-Angulr

音乐平台 UI 界面：http://flatfull.com/themes/angulr/angular/#/music/home

2 内部代码

2.1 配置

static/js/main.js

$scope.app

此处的 $scope.app 是全局变量，AppCtrl 这个控制器是放到了 index.html 中

配置了 app 名称（name）、版本（version）以及颜色（color） 和界面配置（settings）

// config
$scope.app = {
    //name: 'Angulr UI',
    name: 'Pine',
    version: '2.2.1',
    // for chart colors
    color: {
      primary: '#7266ba', // 深蓝色
      info:    '#23b7e5', // 青色
      success: '#27c24c', // 绿色
      warning: '#fad733', // 橘黄色
      danger:  '#f05050', // 红色
      light:   '#e8eff0', // 灰白色
      dark:    '#3a3f51', // 黑色
      black:   '#1c2b36'  // 黑色
    },
    settings: {
      themeID: 1,
      navbarHeaderColor: 'bg-black',
      navbarCollapseColor: 'bg-white-only',
      asideColor: 'bg-black',
      headerFixed: true,   // 冻结顶部，如果设置为 false，则网页内容过长时，往上翻时，顶部会被翻上去
      asideFixed: false,   // 冻结侧边栏
      asideFolded: false,  // 折叠侧边栏
      asideDock: false,    // 顶部停靠侧边栏，设置为 true 时，菜单栏会移动到顶部
      container: false     // 盒模型布局
    }
}

颜色查看工具

$scope.app.settings

// 本地储存
$scope.app.settings = $localStorage.settings;

// 监听 settings 变化
$scope.$watch('app.settings', function(){},true)

$scope 里的 $watch 方法

$scope.langs

配置了语言（langs）

2.2 路由

Angulr 使用 UI-Router 实现路由

static/js/config.router.js

ui-router 使用

路由嵌套

路由嵌套包括了状态嵌套和视图嵌套，状态嵌套就是在注册状态时，建立状态树（父子状态关系）；视图嵌套，就是在父状态的模板中需要有一个 ui-view 标签，它用来加载子状态的模板内容。

Angulr 的路由嵌套使用的 . 来进行嵌套

templateUrl: layout // 这个 layout 就是主页面的左侧栏以及顶栏
var layout = "static/tpl/app.html";
-------------------------------------------------Include
static/tpl/blocks/header.html ------------ 头
static/tpl/blocks/aside.html-------------- 左侧菜单

3 html 文件

├── tpl
│   ├── app.html
│   ├── app_calendar.html
│   ├── app_dashboard_v1.html
│   ├── app_dashboard_v2.html
│   ├── app_dashboard_v3.html
│   ├── apps_contact.html
│   ├── apps_note.html
│   ├── apps_note_material.html
│   ├── apps_todo.html
│   ├── apps_weather.html
│   ├── blank.html
│   ├── blocks
│   │   ├── aside.html           #【必须】左侧栏，包含[左侧导航]、[左侧底部显示] 两部分
│   │   ├── aside.music.html
│   │   ├── aside.right.html
│   │   ├── header.html          #【必须】界面顶部，顶部导航栏，Logo 在此处配置
│   │   ├── header.music.html
│   │   ├── material.aside.html
│   │   ├── material.header.html
│   │   ├── material.layout.html
│   │   ├── material.nav.html
│   │   ├── nav.html             #【必须】左侧导航栏
│   │   ├── page_footer.html     # 界面底部展示
│   │   └── settings.html        #【必须】布局设置
│   ├── docs.html
│   ├── form_editor.html
│   ├── form_elements.html
│   ├── form_fileupload.html
│   ├── form_imagecrop.html
│   ├── form_select.html
│   ├── form_slider.html
│   ├── form_validation.html
│   ├── form_wizard.html
│   ├── form_xeditable.html
│   ├── layout.html
│   ├── layout_app.html
│   ├── layout_footer_fullwidth.html
│   ├── layout_footer_mobile.html
│   ├── layout_fullwidth.html
│   ├── layout_mobile.html
│   ├── mail.detail.html
│   ├── mail.html
│   ├── mail.list.html
│   ├── mail.new.html
│   ├── material
│   │   ├── button.html
│   │   ├── card.html
│   │   ├── color.html
│   │   ├── dialog.tmpl.html
│   │   ├── form.html
│   │   ├── icon.html
│   │   ├── list.html
│   │   ├── ngmaterial.html
│   │   └── toast.tmpl.html
│   ├── modal.form.html
│   ├── modal.html
│   ├── music.detail.html
│   ├── music.genres.html
│   ├── music.home.html
│   ├── music.html
│   ├── music.mtv.detail.html
│   ├── music.mtv.html
│   ├── music.player.html
│   ├── music.playlist.html
│   ├── page_404.html
│   ├── page_forgotpwd.html
│   ├── page_invoice.html
│   ├── page_lockme.html
│   ├── page_post.html
│   ├── page_price.html
│   ├── page_profile.html
│   ├── page_search.html
│   ├── page_signin.html
│   ├── page_signup.html
│   ├── table_datatable.html
│   ├── table_editable.html
│   ├── table_footable.html
│   ├── table_grid.html
│   ├── table_smart.html
│   ├── table_static.html
│   ├── table_uigrid.html
│   ├── ui_bootstrap.html
│   ├── ui_buttons.html
│   ├── ui_chart.html
│   ├── ui_googlemap.html
│   ├── ui_grid.html
│   ├── ui_icons.html
│   ├── ui_jvectormap.html
│   ├── ui_portlet.html
│   ├── ui_scroll.html
│   ├── ui_sortable.html
│   ├── ui_timeline.html
│   ├── ui_toaster.html
│   ├── ui_tree.html
│   └── ui_widgets.html

4 tips

4.1 左侧菜单栏图标颜色

static/css/app.css

其中 info 可替换为 primary/info/success/warning/danger/dark

text-info
text-info-lt
text-info-lter
text-info-dk
text-info-derk