Question

仍然试图绕过AngularJS的野兽并想要Stack Overflow的意见。如果我正在设计一个具有SPA功能的角度应用程序，我希望有一些我可以拥有的领域＆＃34; global＆＃34;函数类似$ scope.showMenu变量，可以用ng-class绑定到侧栏菜单，这样当它被点击时它会滑出。

拥有可供应用程序中所有后续视图使用的变量和函数的集合，这些将在何处进行？

我从阅读模块的想法是，我应该创建一个父模块，它有自己的控制器，包含我的所有全局级函数和变量以及自定义指令。

然后在＆＃34;内部＆＃34;内容（当导航时）每个页面应该有自己的模块，完成控制器，服务和指令？

因此，我的应用程序可能类似于以下内容

HTML

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

</body>

JS

<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

这是正确的＃34;角度方式＆＃34;打算制作大型Web应用程序？或者只是拥有一个单一的＆＃34;模块＆＃34;并有多个控制器？

Answer 1

您最好的选择是将您的全局代码放入工厂/服务中，并在需要代码的任何地方注入该服务。

例如：

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

在您的控制器中，在注入之后，您可以通过执行以下操作将其附加到您的范围：

$scope.myControllerFn = something.doSomething

Answer 2

对于单页应用程序（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>

AngularJS：多个模块与多个控制器

2 个答案: