angularjs的設計理念是鼓勵多模塊的,每個模塊可以依賴于其它模塊,這樣可以用模塊的概念匹配業務功能。所以在設計angularjs的程序時,可以根據一定的業務規則進行模塊劃分。
一般來講,一個angularjs的程序都會有一個app模塊,也就是程序的入口點。當然如果功能較少,一個app模塊就足夠了,剩下的service和controller等其他組件都可以掛到這個app上。但是程序一擴張,就需要更好的模塊設計來處理模塊之間的依賴關系,以及模塊與外部組件之間的依賴關系(結合requirejs)。
在這個項目中,模塊是根據菜單關系進行切割的,比如系統管理是個一級菜單,然后下面會有多個二級菜單,例如有一個LDAP管理子菜單。下面是這個功能的目錄結構:
可以看到,在一級菜單下面會有一個app-system.module.js的文件,這個文件里會結合ui-router-extras庫用來動態加載一級菜單下的路由配置。然后ldap二級菜單下會有一個system-ldap.module.js文件,這個文件里沒有什么業務功能邏輯,但ldap下面的那些controller都會掛到這個模塊下。
看一下具體的代碼:
app-system.module.js
define(["require", "angular", 'utils/routerHelper', 'modules/system/system.routes', "angular-select"], function (require, ng, routerHelper, routerCfg) { var module = angular.module('app.system', ['ngAnimate', "ui.router", "ui.bootstrap", "ui.select",'ngSanitize']); routerHelper.call(module, routerCfg); return module; });具體怎么動態加載路由,下篇文章在講。這個文件主要的作用:1)通過requirejs加載一級菜單下需要的一些公用外部組件,2)把一級菜單下依賴的其它angularjs模塊加載進來,3)可以在這個文件里繼續掛載一級菜單下需要的公用directive或者filter等其他angularjs組件譬如可以繼續這樣寫:
...module.constant("INDEX_COLORS",[].concat(Highcharts.getOptions().colors)); module.factory('randomColorUtils', ['INDEX_COLORS',function(INDEX_COLORS){ return { generateColors : function(objs){ angular.forEach(objs,function(val,key){ val.color = INDEX_COLORS[key % INDEX_COLORS.length]; }); } }}]);module.directive('optionsExtAttr', ['$parse','$timeout',function ($parse,$timeout) {...}]);...然后這個模塊下的所有子菜單功能就可以使用這些組件了。system-ldap.module.js
define(["require","angular"], function(require,ng) { var module = angular.module('app.system.ldap',[]); return module;});這個例子看,此模塊沒有實質性的意義,但其實可以有和上一層模塊同樣的作用,就是處理二級菜單下獨有的依賴以及angularjs組件。最后看一下ldap里面的組件怎么掛到app.system.ldap上:
define(['require','angular','ngload!modules/system/ldap/system-ldap.module','modules/system/ldap/ldap.service'], function(require,ng,module){ module.controller('LDAPCtrl',['$scope','ldapSrv','uiGridUtils','modalUtils', function($scope,ldapSrv,uiGridUtils,modalUtils){ }])})這里需要借助angularAMD的ngload組件把module動態load進來。至于app.system模塊怎么load進來,在介紹程序啟動入口的文章中在詳細寫。
如果有三級,甚至四級菜單,需不需要在往下創建單獨的module文件,個人認為可能沒有必要了,因為module文件太多了,也沒有啥實質作用。當然了如果業務邏輯特別復雜, 也可以繼續建module文件,沒什么硬性的要求。
上面這種模塊劃分只是給了一種參考實現,未必適用各種項目,其實劃分模塊的目的主要是讓功能模塊和業務模塊相對應,利于后期維護擴展。
|
新聞熱點
疑難解答