AngularJS实际项目应用——动态模块切换设计

发布时间：2020-12-17 09:36:24 所属栏目：安全来源：网络整理

导读：有这样一个需求，就是根据后台一个API或者参数确定前台展示的功能模块：菜单会不同，点击菜单，切换页面，页面内容也会不同。比如云计算中虚拟化的后台可能是KVM，openstack或者esxi或者其它，那么针对这几个平台创建虚拟机的页面会不一样，因为需要的参数会

有这样一个需求，就是根据后台一个API或者参数确定前台展示的功能模块：菜单会不同，点击菜单，切换页面，页面内容也会不同。比如云计算中虚拟化的后台可能是KVM，openstack或者esxi或者其它，那么针对这几个平台创建虚拟机的页面会不一样，因为需要的参数会有很大不同。

功能的实现主要是利用requirejs的路径配置来切换不同的功能模块。

看一下目录结构：

首先，在bootstrap app前，通过调用API也好还是从session中取到参数也好，拿到一个类型，然后放到window上，比如叫virtualType，值要和目录名对应起来。

然后，在requirejs的配置文件中：

(function(window){
        var appPath=window.contextPath+ '/static/js/'+(window.isMobile?'app_m':'app')+'/';
        var globalConfig = {
            	virtualApiUrl :  window.contextPath + "/" +  window.virtualType + "/v1/",	modulesPath: appPath + 'modules-' + window.virtualType,};

        window.globalConfig = window.globalConfig || globalConfig;

})(window);

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

通过在requirejs.config里面配置一个modules路径，在controller里面define引用其他依赖时，都通过modules这个路径，requirejs就会自动把目录对应到modules-esxi或者modules-lhv下了。

define(['require','angular','ngload!modules/hardware/disk/hardware-disk.module','modules/hardware/disk/disk.service'],function(require,ng,module){......})

还有菜单也需要根据不同的类型处理一下。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!