模块开发流程

1.新建模块

1. 在modules目录下新建模块目录

2. 在模块目录下新建模块文件，exam.html、exam.js，如有样式表需要，可以再新建exam.scss

   1.1文件说明

   .1. html文件为页面内容区域的渲染文件

3. js文件为模块文件，包含控制器注册，业务层处理，如有需要，可以拆分为多个JS文件

2.配置模块

配置模块的步骤 1. 路由配置 2. 模块化加载配置

2.1路由配置

参照modules/common/js/app.js

/**
 * 路由器配置
 * 
 * {
 *         state        : <string>,            //路由器状态名
 *         url            : <string>,            //访问url,为 依赖状态的url + 自身url
 *         views        : <json>,            //路由页面的html模板配置
 *         useModule    : <string>            //使用的RequireJS模块，初始化页面时会加载该模块的依赖文件
 * }
 */
var routerConfig = [
    {
        state    : "index",
        url        : "/",
        views    : {
            '' : {templateUrl : 'modules/common/html/layout.html'},
            'sidebar@index' : {templateUrl : 'modules/common/html/sidebar.html'},
            'top@index' : {templateUrl : 'modules/common/html/top.html'}
        },
        useModule    : 'com'
    },

    {
        state    : "index.app",
        url        : "app",
        views    : {
            'content@index' : {templateUrl : 'modules/app/app.html'}
        },
        useModule    : 'app'
    },

    {
        state    : "index.quota",
        url        : "quota",
        views    : {
            'content@index' : {templateUrl : 'modules/quota/quota.html'}
        },
        useModule    : 'quota'
    }
]

2.2模块化加载配置

参照modules/common/js/app.js

/**
 * requireJS配置
 * 
 * paths : {
 *         <moduleName>        : <string or Array>            //模块的JS文件配置，
 * }    
 * shim : {
 *         <moduleName>        : <string or Array>            //模块的CSS文件配置，
 * }
 */
var requirejsConfig = {
    paths : {
        'com'            : 'modules/common/js/controller/controller',
        'util'            : 'modules/common/js/util',
        'directive'        : 'modules/common/js/directive/directive',
        'service'        : 'modules/common/js/service/service',
        'quota'            : 'modules/quota/quota',
        'app'             : ['modules/app/app']
    },
    shim : {
        'app'            : ['css!modules/app/app.css']
    },
    map: {'*': {'css'    : 'components/require-css/css'}}
};
require.config(requirejsConfig);

3.模块开发

3.1控制器注册

参照modules/app/app.js

/**
 * appController 对应app.html的指令ng-controller="appController"
 * 
 * 这里引入了自定义服务$$host，引入于service模块（modules/common/js/service/main.js）
 */
App.register.controller("appController", function($scope, $$http){
    // AppUtil.call($scope, $$http);

    // $$host.getHost();
    // $scope.getList();
})

3.2控制器业务层注册

参照modules/app/app.js

3.2.1.定义业务层

3.2.2注册业务层

/**
 * 使用Function的call方法注册
 */
App.register.controller("appController", function($scope, $$http){
    AppUtil.call($scope, $$http);
    $scope.getList();
})