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

前端之家收集整理的这篇文章主要介绍了AngularJS实际项目应用——动态模块切换设计前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

看一下目录结构:


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

然后,在requirejs的配置文件中:

  1. (function(window){
  2. var appPath=window.contextPath+ '/static/js/'+(window.isMobile?'app_m':'app')+'/';
  3. var globalConfig = {
  4. virtualApiUrl : window.contextPath + "/" + window.virtualType + "/v1/", modulesPath: appPath + 'modules-' + window.virtualType,};
  5.  
  6. window.globalConfig = window.globalConfig || globalConfig;
  7.  
  8. })(window);
  9.  
  10. requirejs.config({
  11. baseUrl: window.globalConfig.appPath,paths:{
  12. 'modules': globalConfig.modulesPath,......
通过在requirejs.config里面配置一个modules路径,在controller里面define引用其他依赖时,都通过modules这个路径,requirejs就会自动把目录对应到modules-esxi或者modules-lhv下了。
  1. define(['require','angular','ngload!modules/hardware/disk/hardware-disk.module','modules/hardware/disk/disk.service'],function(require,ng,module){......})
还有菜单也需要根据不同的类型处理一下。

猜你在找的Angularjs相关文章