layui+angular

Angular.Admin --- 大道至简重剑无锋
--

[Angular.Admin](http://zoujingli.oschina.io/angular.admin) 是一个基于 `RequireJs`+`AngluarJs`+`Layui` 搭建的`Web`前端开发平台。

模块清晰简洁，易于学习上手，让高端`WEB`搭建起步变得更简单。

项目对`Layui`组件部分进行了重新封装，基于`Angular`方式实现。

**关于重构**：项目基于新架构进行重构，旧版本已经切换到 [old-master](https://git.oschina.net/zoujingli/Angular.Admin/tree/old-master/) 分支。

参考文档：
--
* [Angular](http://www.runoob.com/angularjs/angularjs-tutorial.html)
* [Layui](http://www.layui.com/doc)

更新日志
--
```
2016-12-08
-------------------------------------------------
1. 整合 Layui

2. 封装 select checkbox radio 组件

2016-11-23
-------------------------------------------------

1. 合并模块

2. 分离 provider与 plugs ，优化页面依赖

2016-11-20
-------------------------------------------------

1. 完成表单自定义组件 myForm ,支持自动验证与提交

在form元素上添加属性 data-auto=true ，绑定自动提交事件

input元素上可设置 data-tips 属性，用于指定错误时的显示内容

2016-11-19
-------------------------------------------------

1. 完成 require 与 angular 组合启动应用

2. 完成基于 ngRoute 的自动路由机制

3. 完成 angular 模块自定加载与注册

```

使用方法
--
##### 1. 下载代码到你的`webroot`目录
```shell
git clone http://git.oschina.net/zoujingli/Angular.Admin.git

cd Angular.Admin
```

##### 2. 使用`HTTP`访问项目中的`index.html`
```link
http://zoujingli.oschina.io/angular.admin

```

index.html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title data-ng-bind="app.site.title">loading...</title>
        <link rel="shortcut icon" data-ng-href="{{app.site.icon}}" />
        <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
        <link href="script/plugs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
        <link href="theme/css/common.css" rel="stylesheet" type="text/css"/>
        <link href="theme/css/login.css" rel="stylesheet" type="text/css"/>
        <link href="theme/css/animate.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="view-container" data-ng-view=""></div>
        <script src="require.min.js"></script>
        <script src="script/bootstrap.js"></script>
    </body>
</html>

bootstrap.js

/* global require, layui */

var API_URL = 'http://localhost/service/public/index.php/';
var API_URL = 'https://service.cuci.cc/';
var API_AUTH = 'user/api/token.html';

var script = document.scripts[document.scripts.length - 1].src, baseUrl = script.substring(0, script.lastIndexOf("/"));

/**
 * 应用启动文件
 *
 * @author Anyon <[email protected]>
 * @date 2016/11/04 16:10
 */
require.config({
    waitSeconds: 0,
    baseUrl: './',
    map: {'*': {'css': '//cdn.bootcss.com/require-css/0.1.8/css.min.js'}},
    paths: {
        'app.config': ['script/config'],
        'debug': ['script/plugs/debug'],
        'myView': ['script/provider/my-view'],
        'myForm': ['script/provider/my-form'],
        'myDialog': ['script/provider/my-dialog'],
        'layui': ['script/plugs/layui/layui'],
        'pace': ['//cdn.bootcss.com/pace/1.0.2/pace.min'],
        'jquery': ['//cdn.bootcss.com/jquery/1.12.4/jquery.min'],
        'supersized': ['script/plugs/supersized/js/supersized.3.2.7'],
        'angular': ['//cdn.bootcss.com/angular.js/1.5.9/angular.min'],
        'ngCookies': ['//cdn.bootcss.com/angular.js/1.5.7/angular-cookies.min'],
        'ngSanitize': ['//cdn.bootcss.com/angular-sanitize/1.5.8/angular-sanitize.min'],
        'ngRoute': ['//cdn.bootcss.com/angular.js/1.5.8/angular-route.min'],
        'ui.bootstrap': ['//cdn.bootcss.com/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min']
    },
    shim: {
        'angular': {exports: 'angular'},
        'supersized': {deps: ['jquery', 'css!script/plugs/supersized/css/supersized.css']},
        'ui.bootstrap': {deps: ['angular', 'css!//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css']},
        'pace': {deps: ['css!//cdn.bootcss.com/pace/1.0.2/themes/green/pace-theme-flash.min.css']},
        'layui': {deps: ['css!script/plugs/layui/css/layui.css', 'jquery']},
        'debug': {deps: ['jquery']},
        'myView': {deps: ['angular']},
        'myForm': {deps: ['angular', 'myDialog', 'jquery']},
        'myDialog': {deps: ['angular', 'layui']},
        'ngRoute': {deps: ['angular']},
        'ngCookies': {deps: ['angular']},
        'ngSanitize': {deps: ['angular']},
    },
    deps: ['angular'],
    urlArgs: "v=" + (new Date()).getTime()
});

/**
 * 加载进度显示
 * @returns {undefined}
 */
require(['pace'], function (pace) {
    pace.start({document: false});
});

/**
 * 应用启动器
 * @param {type} angular
 * @returns {undefined}
 */
require(['angular', 'ngRoute', 'ngCookies', 'myView', 'myForm', 'myDialog', 'layui'], function (angular) {

    // Layui 初始化
    layui.config({dir: baseUrl + '/plugs/layui/'});
    layui.use(['layer', 'laydate', 'element']);

    // 创建APP应用
    var app = angular.module('app', ['ngRoute', 'myView', 'myDialog', 'myForm', 'ngCookies']);

    // 应用启动配置
    app.config(['$routeProvider', '$viewProvider', '$locationProvider', function ($routeProvider, $viewProvider, $locationProvider) {
            $locationProvider.html5Mode(false);
            $viewProvider.registerView('login.html');
            $routeProvider.otherwise('login.html');
        }]);

    // 应用初始化动作
    app.run(['$location', '$view', '$form', '$rootScope', '$templateCache', '$cookies', '$http', '$httpParamSerializerJQLike', '$dialog',
        function ($location, $view, $form, $rootScope, $templateCache, $cookies, $http, $httpParamSerializerJQLike, $dialog) {
            // 模块初始化赋值
            angular.$view = $view;
            angular.$http = $http;
            angular.$dialog = $dialog;
            angular.$location = $location;
            angular.$cookies = $cookies;
            angular.$rootScope = $rootScope;
            angular.$form = $form;
            $rootScope.$location = $location;
            angular.$httpParamSerializerJQLike = $httpParamSerializerJQLike;

            // 页面全局属性定义
            $rootScope.app = {
                layout: {
                    class: {body: 'body'}
                },
                site: {
                    url: "http://www.cuci.cc ",
                    title: 'Angular.Admin',
                    icon: 'http://static.cdn.cuci.cc/2016/0421/3586e898350c0890cf41a4828175d468.ico',
                    copyright: '©版权所有 ' + new Date().getFullYear() + ' 楚才科技 | 粤ICP备14082924号',
                    company: '广州楚才信息科技有限公司'
                },
                menuLeft: true,
                menu: [
                    {id: 1, icon: '', 'title': '系统信息', 'href': 'javascript:void(0);', active: true, sub: [
                            {id: 10, icon: '', 'title': '后台首页', 'href': '#user/index.html', active: true},
                            {id: 11, icon: '', 'title': '系统配置', 'href': 'javascript:void(0);', active: false, sub: [
                                    {id: 110, icon: '', 'title': '网站信息', 'href': 'javascript:void(0);', active: false},
                                    {id: 111, icon: '', 'title': '网站配置', 'href': 'javascript:void(0);', active: false},
                                ]
                            },
                            {id: 12, icon: '', 'title': '二级菜单12', 'href': 'javascript:void(0);', active: false},
                            {id: 13, icon: '', 'title': '二级菜单13', 'href': 'javascript:void(0);', active: false},
                        ]
                    },
                    {id: 2, icon: '', 'title': '单页表单演示', 'href': '#user/form.html', active: false},
                    {id: 3, icon: '', 'title': '一级菜单3', 'href': 'javascript:void(0);', active: false, sub: [
                            {id: 30, icon: '', 'title': '二级菜单31', 'href': 'javascript:void(0);', active: true, sub: [
                                    {id: 301, icon: '', 'title': '三级菜单311', 'href': 'javascript:void(0);', active: false},
                                    {id: 301, icon: '', 'title': '三级菜单312', 'href': 'javascript:void(0);', active: false},
                                ]
                            },
                            {id: 31, icon: '', 'title': '二级菜单32', 'href': 'javascript:void(0);', active: false},
                            {id: 32, icon: '', 'title': '二级菜单33', 'href': 'javascript:void(0);', active: false},
                        ]
                    },
                ]
            };

            // 顶部菜单点击
            $rootScope.topMenuOnClick = function (menu) {
                var index = parseInt(menu.$index);
                if ($rootScope.app.menu[index].href && $rootScope.app.menu[index].href.indexOf('javascript') < 0) {
                    $rootScope.app.menuLeft = false;
                    return window.location.href = $rootScope.app.menu[index].href;
                }
                $rootScope.app.menuLeft = true;
                for (var i in $rootScope.app.menu) {
                    $rootScope.app.menu[i].active = (parseInt(i) === parseInt(index));
                    if ($rootScope.app.menu[i].sub) {
                        for (var m in $rootScope.app.menu[i].sub) {
                            console.log($rootScope.app.menu[i].sub[m].href);
                            if ($rootScope.app.menu[i].sub[m].href && $rootScope.app.menu[i].sub[m].href.indexOf('javascript') < 0) {
                                window.location.href = $rootScope.app.menu[i].sub[m].href;
                                break;
                            }
                            if ($rootScope.app.menu[i].sub[m].sub) {
                                for (var n in $rootScope.app.menu[i].sub[m].sub) {
                                    if ($rootScope.app.menu[i].sub[m].sub[n].href && $rootScope.app.menu[i].sub[m].sub[n].href.indexOf('javascript') < 0) {
                                        window.location.href = $rootScope.app.menu[i].sub[m].sub[n].href;
                                        break;
                                    }
                                }
                            }
                        }
                        break;
                    }
                }
            };

            // 全局退出登录
            $rootScope.logout = function () {
                $dialog.confirm('确定要退出登录吗？', function () {
                    $cookies.remove('token');
                    window.location.href = 'index.html';
                });
            };

            // 页面跳转前的处理
            $rootScope.$on("$locationChangeStart", function () {
                console.log('Start Location : ' + $location.$$path);
                if ($location.$$path.length > 0) {
                    // 动态注册路由
                    $view.registerView($location.$$path);
                    // 需要登录的场景
                    if ($location.$$path !== '/login.html' && !angular.$cookies.get('token')) {
                        $dialog.tips('抱歉，需要登录后才能进入！');
                        window.location.href = 'index.html';
                    } else if (angular.$cookies.get('token') && $location.$$path === '/login.html') {
                        if (window.location.href.indexOf('admin.html') > 0) {
                            angular.$view.goto('user/index.html');
                        } else {
                            window.location.href = 'admin.html';
                        }
                    }
                }
            });

            // 页面跳转成功后清除缓存
            $rootScope.$on('$locationChangeSuccess', function () {
                $templateCache.removeAll();
                layui.use(['element'], function (element) {
                    element().init();
                });
            });

            // 页面标题修正，兼容苹果设备
            $rootScope.$watch('app.site.title', function (title) {
                document.title = title;
                var iframe = document.createElement("iframe");
                iframe.title = '', iframe.width = 0, iframe.height = 0;
                iframe.setAttribute("src", "empty.html");
                iframe.addEventListener('load', function () {
                    setTimeout(function () {
                        document.body.removeChild(iframe);
                    }, 0);
                });
                document.body.appendChild(iframe);
            });
        }
    ]);
    // 启动应用
    angular.bootstrap(document, [app.name]);
});

猜你喜欢