2017-08-02 72 views
3

我有幾個定義的模塊。我不想將它們全部加載到我的應用程序中。相反,我想根據配置文件加載它們。例如如何根據angularJS中的配置文件加載模塊

模塊1:

angular.module('section1', []) 

單詞數:

angular.module('section2', []) 

在每個模塊的,它將有自己的HTML模板和業務邏輯。然後在app.module.js中:

angular.module('app', ['module1', 'module2']); 

模塊1和模塊2都將加載在一起。我不想硬編碼,相反,我將有一個配置文件,是這樣的:

[{'module1': true}, {'module2':false}] 

最終,每當應用程序啓動的時候,我讀的配置文件,然後決定哪些模塊將被加載和哪些模塊不會。在上面的例子中,模塊1將被加載,而模塊2則不會被加載。

我該怎麼做?

回答

1

你可以manually bootstrap角js應用程序。它將幫助您添加條件並決定要加載哪個模塊

以下是您如何以角度進行手動引導。

angular.element(function() { 
    if(/* condition */ { 
    angular.bootstrap(document, ['module1']); 
    } else { 
    angular.bootstrap(document, ['module2']); 
    } 
}); 
+0

您是否在實踐中完成了這項工作?我非常有興趣只加載適用於用戶配置文件有權訪問的角色的模塊。從角度角度來看,還有什麼更多? (當然,我可以根據如何根據配置文件生成模塊陣列來填寫詳細信息)。有沒有可以提供的小樣本?將非常感激! – flyer

+1

https://docs.angularjs.org/guide/bootstrap - 你可以查看更多細節。 –

+0

謝謝。我檢查了ng-app上的源代碼並通過它進行了調試,這對我的用例來說非常基本。真的只是歸結爲這2條線,這是類似於你的(配置結束爲{strictDi:true}) config.strictDi = getNgAttribute(appElement,'strict-di')!== null; bootstrap(appElement,模塊?[module]:[],config); – flyer

1

您可以在定義角模塊並將數組作爲變量傳遞之前構建模塊依賴項數組。如果你完全控制了配置文件以及它們是如何加載的,那麼配置文件可能就是依賴關係的數組。像這樣:

var config = ['module1', 'module2']; 
angular.module('app', config); 

這是假設你有多個配置文件,然後加載你想要的那個特定的上下文。因爲它的配置的角度應用程序定義之前(因此自舉)

var config = { 
    'profileA': [ 'module1' ], 
    'profileB': [ 'module2' ] 
}; 
var currentProfile = 'profileA'; 
angular.module('app', config[currentProfile]); 

,角止跌」:

如果你想在一個文件中的所有模塊依賴的配置,你可以像這樣格式化不關心你的模塊依賴來自哪裏。只要實際模塊的.js文件已被加載。不過,如果瀏覽器未刷新,您將無法更改配置文件。