如何在不使用全局范围的情况下分离 angularjs 文件

Question

我已经看过这篇帖子 AngularJS best practices for module declaration? 但我仍然对声明和分离模块、控制器、服务等的 angularJS 文件的最佳方法感到有些困惑。

我知道将控制器和服务包装在 IIFE 中是一种很好的做法，因为它可以防止它们被超出范围使用。最好将控制器和模块分离到单独的文件中以进行组织。

我的问题是，如果我有一个控制器文件

我的Ctrl.js

(function(){
  "use strict";

  app.controller("myCtrl", ['$scope', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  }]);
})();

指令文件

myDirective.js

(function(){
  "use strict";
  app.directive("w3TestDirective", function() {
    return {
      template : "I was made in a directive constructor!"
    };
  });
})();

在自己的文件中声明模块的最佳做法是什么

myModule.js

是否应该将其保留在全局范围内，以便任何东西都可以按如下方式访问它：

var app = angular.module("myApp", []);

或者有没有办法将它包装在像 IIFE 这样的东西中，以使其不受全局范围的影响，但仍然可以被其他文件访问？

Answer 1

例如，我们可以在角度文件之间建立关系

1. 控制器
2. 服务
3. 工厂
4. 等等

带角度模块

例如： angular.module("myApp",["dependencies"])

angular.module("myApp").controller("myCtrl",function(){}) 要么 angular.module("myApp").service("myservice",function(){})

Answer 2

在控制器和指令中不需要 sn-ps IIFE，因为没有任何东西暴露在全局范围内。

var app = ... 不应暴露在全局范围内。可以使用模块 getter：

var app = angular.module("myApp")

这需要保留加载的 JS 文件的顺序。模块应该先用angular.module("myApp", [])定义，然后才能定义模块单元。

除非应用程序使用 JS 模块（AMD、CommonJS、ES6）来实现模块化，否则遵循“每个文件一个模块”模式是有益的。这可以显着提高可测试性，并且永远不会遇到与模块相关的竞争条件：

(function(){
  "use strict";

  var app = angular.module("myApp.myCtrl", []);

  app.controller("myCtrl", ['$scope', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  }]);
})();

---

angular.module("myApp", ["myApp.myCtrl", "myApp.w3TestDirective"]);

在这种情况下，加载模块文件的顺序无关紧要。