AngularJS：多個模塊vs多個控制器

仍然試圖圍繞着AngularJS的野獸，想要堆棧溢出的意見。如果我正在設計一個具有SPA功能的角度的應用程序，我希望有一些區域可以擁有「全局」功能，例如$ scope.showMenu變量，它可以用ng-class綁定到a側欄菜單，以便點擊時它會滑出。AngularJS：多個模塊vs多個控制器

擁有可用於應用程序中所有後續視圖的變量和函數的集合，它們將在何處出現？

我從閱讀模塊的想法是，我應該做一個父模塊，它有自己的控制器，其中包含我所有的全局水平函數和變量和自定義指令。

然後在「內部」內容（瀏覽時）每個頁面都應該有自己的模塊，並附上控制器，服務和指令？

因此我的應用程序看起來可能像下面

HTML

<body ng-app="global" ng-controller="globalController"> 
    {{globalTest}} 
    <div ng-controller="pageOneController"> 
     {{pageOneTest}} 
    </div> 

</body>

<script> 
    angular.module('global',['pageOne']); 
    angular.module('global').controller('globalController', globalController); 
    globalController.$inject = ['$scope']; 
    function globalController($scope) { 
     $scope.globalTest = "global test"; 
    } 


    angular.module('pageOne',[]); 
angular.module('pageOne').controller('pageOneController', pageOneController); 
    pageOneController.$inject = ['$scope']; 
    function pageOneController($scope) { 
      $scope.pageOneTest = "page one test"; 
    }

Plunker - http://plnkr.co/edit/wxja7smqOJiSbUi7mfu4?p=preview

這是關於製作大型Web應用程序的正確「角度方法」嗎？或者只有一個「模塊」並擁有多個控制器會更好？

來源

2015-11-18 mls3590712

最好的辦法是將全局代碼放入工廠/服務中，並在需要代碼的地方注入該服務。

例如：

angular.module('something') 
    .factory('something', function() { 
     return { 
     doSomething: function() {} 
     ...

而在你的控制器，你注入後，您可以在做類似的東西附加到你的範圍：

$scope.myControllerFn = something.doSomething

來源

2015-11-18 20:22:54 Pytth

我不完全理解這將如何工作。如果我有一個帶有ng-class = {'show-menu'：showMenu == true}的綁定實例的側邊菜單，並且$ scope.showMenu在我的控制器中，那麼工廠調用如何更改控制器的作用域變量？我所說的假設函數將是簡單的事情（不是調用服務或任何東西）。例如：$ scope.openMenu = function（）{$ scope.showMenu = true; }。如果我把這個功能放在工廠裏，我不知道它是如何工作的？ – mls3590712

好吧，對於你的側邊欄例子來說，最好的方式就是使用像UI路由器這樣的東西來正確反映你的應用的不同UI狀態。另一件事是，你也有一個關於如何讓父控制器包裝一切的大概想法。那麼我的問題是，如何將這些內容全部扔到$ rootScope上？使用工廠/服務來做到這一點，通過允許您將它們放在需要它們的地方，並允許更易於編寫單元測試，您可以保持全局範圍「清潔」。 – Pytth

對於單頁應用（SPA ），我傾向於把我所有的控制器放在一個模塊中。當使用多個控制器時，我會使用controller as binding語法。

<body ng-app="global" ng-controller="globalController as global"> 
    {{global.Test}} 
    <div ng-controller="pageController as child"> 
     {{child.Test}} 
    </div> 

</body>

來源

2015-11-19 00:33:46 georgeawg

AngularJS：多個模塊vs多個控制器

回答

相關問題