README - ChinaSS/Util GitHub Wiki

##前端系统说明文档 使用requireJS进行文件模块调用, angularJS框架进行页面开发

index.jsp

• 单页面系统入口页面,提供整个系统页面的基本布局;
• 加载requireJS&main.js;
• 声明JS全局函数getServer(), 由java写入系统根路径, 向JS提供调用并返回根路径;

main.js

• 主页面入口JS文件;
• 配置requireJS公共的路径、模块依赖等参数;
• 加载公共模块(如homeApp,Ace等),声明主页面控制模块HomeApp,并执行ace模块初始化;
• 加载应用模块的路径配置文件appPath.js;
• 声明JS全局函数getStaticPath(), 返回全局静态资源路径;

homeApp.js

• AngularJS框架的入口文件;
• 声明HomeApp模块, 配置公共控制器和指令;
• 加载应用模块的指令文件directive.js和路由文件routerMap.js, 并写入HomeApp模块;

appPath.js

• 应用模块的路径配置文件, 配置每个应用模块的根路径;

routerMap.js

• 应用模块的路由配置文件;
• 配置参数, 将控制器名称、控制器路径、路由路径以及模板路径统一映射;

directive.js

• 应用模块的指令配置文件;
• 配置参数, 将指令名称、指令功能函数统一映射;

##文件结构/调用关系

index.jsp
    requireJS
    main.js
        homeApp.js
            angularJS
            directive.js
                modal_directive.js
                ......
                ......
            routerMap.js
        appPath.js

##应用模块开发 注意事项

• 模块路径以static/目录为根目录
• 模块文件中所有静态模板的路径格式为getStaticPath()+'模板路径', 路由配置文件appPath.js中的模板路径不需要添加getStaticPath()返回值前缀
• 模块文件中所有通过requireJS引入的css,json等非JS文件, 路径格式为getStaticPath()+'路径'

前端开发基本都是在'static/app/'目录下进行, 以system/下的resource子模块为例:

###模块结构/文件结构 每个模块都有一个 Ctrl 文件和一个 Support 文件, 其功能如下:

• 模型定义和方法调用在 Ctrl 文件中
• 数据处理和方法实现在 Support 文件中

    app/
        system/
            resource/
                view/
                    resourece.html
                    resoureceEdit.html
                resoureceCtrl.js
                resoureceSupport.js
        appPath.js
        routerMap.js
        directive.js
        ......

###路径配置 appPath.js中配置应用模块根路径, 路径最后的.js可以省略

//路径配置对象
paths : {
    //系统模块配置
    "Resource":"app/system/resource"
}

###路由配置 routerMap.js中配置路径、模板以及控制器

路由配置文件中的模板路径已经过处理, 不需要添加getStaticPath()返回值前缀

//路由配置数组
configs : [
   /*
    * 资源管理
    * ResourceCtrl
    */
   {
       ctrlName : "ResourceCtrl", //控制器名称
       ctrlUrl : "Resource/resourceCtrl", //控制器文件路径
       routerPath : '/resource', //路由路径
       templateUrl : 'app/system/resource/views/resource.html' //路由模板
   }
]

###指令配置 directive.js中配置angularJS指令的名称和功能函数,仅供熟悉angularJS指令的开发人员使用;

//指令配置数组
directives : [
    /*
     * resourceTree
     */
    {
        name: 'resourceTree', //指令名称
        func: ['$http', function ($http) { //指令功能函数
            return {
                restrict: 'A',
                link: function ($scope, element, attrs) {
                    //功能代码
                }
            }
        }]
    }
]