# admui

**Repository Path**: source-planning/admui

## Basic Information

- **Project Name**: admui
- **Description**: 基于AngularJs、Bootstrap框架，以及Google Material Design的设计理念，开发的一款适用于后台管理、Dashboard等，类似功能的快速UI开发基础项目。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://guoruifeng.oschina.io/admui/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 72
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AdmUI

![输入图片说明](https://git.oschina.net/uploads/images/2017/0520/235240_4891b6cc_1353370.png "在这里输入图片标题")

>你还在为项目的用户体验和UI的颜值发愁吗？

>曾经，我们也是，公司的各个部门，每做一个项目都要对应的搭一套前端的项目，

>对于只擅长写后台的代码汪来说，这个过程相当的苦恼，各种问题让你抓狂不已，

>我们一怒之下，找了当下比较流行的技术，又不想跟Bootstrap千篇一律，

>于是我们采用了Google Material Design做为设计语言，开发了适用于中后台管理类型的UI Template项目，

>你只需要根据自己的需要，简单的修改几个配置就能搞出一个华丽的前端UI  :tw-1f600: 


>你可以打开这个链接看一下效果，http://guoruifeng.oschina.io/admui/


所以,

AdmUI它是一个中后台管理UI快速开发模板，采用Bootstrap、AngularJS等技术，已完成项目整体基础搭建，只需要在`App/modules`下添加自己的view和js你就可以开始干活了  :tw-1f60b: 。

你需要熟（control+c）悉（control+v）并使用的技术：

1. Bootstrap 3，http://getbootstrap.com
1. AngularJS 1.5.x，https://angularjs.org/
1. AngularJS Material 1.0.4，https://material.angularjs.org/1.1.0/


### 如何开发

Master是基础依赖框架整合分支，最终会生成单独的js和css包，供App开发引用，
Pages是实践项目，包括App开发中所用到的文件。

克隆`pages`分支，在 `app/modules/`目录中添加模块即可，`plugins`是你项目依赖的第三文件组件，运行`npm start`启动项目，默认地址：`localhost:9800`。

#### 环境
1. Node、Npm（介意使用cnpm）
1. grunt、bower


![输入图片说明](https://git.oschina.net/uploads/images/2017/0520/235306_e0ed5ddf_1353370.png "在这里输入图片标题")

### 功能特性

1. 基于 Bootstrap 3
1. 基于AngularJS 1.5.x
1. 以 Google Material Design 为设计语言
1. 支持多Tab切换，可以关闭当前、其它等功能
1. 主菜单动态配置，支持多级
1. 不同的 Material Design Colors ，并且可以在不同的View中使用不同的Color
1. 三种不同的 layouts
1. 集成了AngularJS Material
1. 支持在View中懒加载所需要的依赖文件
1. 响应式实现，适配各种尺寸的屏幕
1. 完全实现了 Material Design Colors
1. 采用 Node、Bower 和 Gulp做为开发工具
1. Less源码
1. 仿Inbox的案例页面
1. 制作了Profile、Gallery、Login、Sample page等页面


## 依赖的技术

 
1. Bootstrap - http://getbootstrap.com
1. jQuery - http://jquery.com
1. AngularJS - https://www.angularjs.org
1. AngularJS Material - https://material.angularjs.org/
1. Bower - http://bower.io/
1. Gulp - http://gulpjs.com/
1. OC Lazy Load for AngularJs - https://github.com/ocombe/ocLazyLoad
1. Animate.css - http://daneden.github.io/animate.css/
1. Flot Chart - http://www.flotcharts.org/
1. magnific-popup - http://dimsemenov.com/plugins/magnific-popup/
1. Full Calendar - http://fullcalendar.io
1. Material Design Icon - http://zavoloklom.github.io/material-design-iconic-font/icons.html
1. SparkLine Chart - http://omnipotent.net/jquery.sparkline/
1. SummerNote - http://summernote.org
1. Malihu Content Scroller - http://manos.malihu.gr/jquery-custom-content-scroller/
1. Angular Loading Bar - http://chieffancypants.github.io/angular-loading-bar/
1. Roboto Font - https://www.google.com/fonts/specimen/Roboto