AngularJS实际项目应用——移动端设计

按照现在主流的做法，采用响应式设计，应该不在区分移动端和PC端，但由于项目历史遗留的问题，或者说为了开发速度，还是需要单独的移动端设计。其实我觉得单独的移动端开发也有好处，可以充分利用移动端的各种设计模式以及用户使用习惯，最大限度的使用移动框架的各种组件。

本项目采用了分开的设计，看一下项目总体目录结构：

移动端的代码都在app_m下面，里面的目录结构和app几乎一样，但可以省略一些文件，直接去引用app下面的文件，后面在说。

先看程序加载的时候需要进行哪些区分（index.jsp）：

        browserDetect.init();
        window.isMobile=browserDetect.isMobile;

        if(window.isMobile){
            loadCss("static/css/angular-material.min.css");
            loadCss("static/css/style-cloud-platform-admin-m.css");
        }
        else{
            loadCss("static/css/style.css");
            loadCss("static/css/style-cloud-platform-admin.css");
        }

移动端使用的是angular material库；PC端使用的是bootstrap库，bootstrap的css都压缩到了style.css中了。

然后最重要是requirejs的config文件配置：

(function(window){
        var appPath=window.contextpath+ '/static/js/'+(window.isMobile?'app_m':'app')+'/';
        var globalConfig = {
		modulesPath: appPath + 'modules',};
        window.globalConfig = window.globalConfig || globalConfig;

})(window);

requirejs.config({
    baseUrl: window.globalConfig.appPath,paths:{
		'modules': globalConfig.modulesPath,......

在配置文件里需要动态的设置路径，然后把modules路径映射到app_m下，用define引入依赖的时候，一定要使用modules路径打头，这样requirejs就可以正确去加载对应的文件了。

在app_m下的app,js里，需要针对移动的库做一些特殊的配置，剩下几乎和app目录下的app.js一样，这里确实会有很多重复的代码，应该可以进行优化。

还有就是在移动端的controller里面可以直接引用PC的service代码：

'modules/../../app/modules/hardware/server/server.service'

比如同样在hardware的server.controller里面，通过上面的路径用define方式，就可以把PC端的service文件引入进来了，因为service都是一样的。 现在的趋势确实是响应式设计比较流行，所以还是应该尽量采用它，上面这种分开的设计，尽量在迫不得已的情况下使用。