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

Question

我看过这个 post AngularJS best practices for module declaration? 但我仍然对为模块、控制器、服务等声明和分离 angularJS 文件的最佳方式感到困惑

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

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

myCtrl.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

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

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

var app = angular.module("myApp")

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

除非应用程序使用 JS 模块（AMD、CommonJS、ES6）进行模块化，否则遵循 'one module per file' 模式是有益的。这可以显着提高可测试性，并且永远不会运行进入与模块相关的竞争条件：

(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"]);

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

Answer 2

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

控制器
服务
工厂
等等

使用 angular 模块

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

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

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

How to separate angularjs files without using global scope

javascript

angularjs

module

declaration

iife