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

前端之家收集整理的这篇文章主要介绍了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都是一样的。 现在的趋势确实是响应式设计比较流行,所以还是应该尽量采用它,上面这种分开的设计,尽量在迫不得已的情况下使用。

猜你在找的Angularjs相关文章