Question

我已经看过这篇文章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）进行模块化，否则遵循“每个文件一个模块”模式是有益的。这样可以显着提高可测试性，并且永远不会遇到与模块相关的竞争条件：

(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.module（ “对myApp”，[ “依赖性”]）

angular.module（ “对myApp”）。控制器（ “myCtrl”，函数（）{}）要么 angular.module（ “对myApp”）。服务（ “为MyService”，函数（）{}）

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

2 个答案: