如何在不使用全局范围的情况下分离angularjs文件 [英] How to separate angularjs files without using global scope

问题描述

我看过这篇文章模块声明的AngularJS最佳实践吗?但是我对为模块，控制器，服务等声明和分离angularJS文件的最佳方法仍然有些困惑.

I've seen this post AngularJS best practices for module declaration? But I am still a little confused about the best way to declare and separate angularJS files for modules, controllers, services etc.

我知道在IIFE中包装控制器和服务是个好习惯，因为这样可以防止它们在范围之外使用.最好将控制器和模块分成单独的文件进行组织.

I understand it is good practice to wrap controllers and services in IIFEs because it prevents them from being used out of scope. And it is good practice to separate your controllers and modules into separate files for organization.

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

My question is, if I have a controller file

myCtrl.js

myCtrl.js

(function(){
  "use strict";

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

指令文件

myDirective.js

myDirective.js

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

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

What would be the best practice for declaring the module in its own file

myModule.js

myModule.js

应该将其保留在全局范围内，以便任何人都可以按以下方式访问它:

Should it be left at global scope so anything can access it as follows:

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

或者是否有办法将其包装在IIFE之类的文件中，以使其不受全局范围影响，但仍可供其他文件访问?

Or is there a way to wrap this in something like an IIFE to keep it from global scope and yet still be accessible to the other files?

推荐答案

在控制器和指令摘要中，不需要任何IIFE，因为没有任何东西暴露给全局范围.

In controller and directive snippets IIFEs aren't needed because nothing is exposed to global scope.

var app = ...不应暴露于全局范围.可以使用模块获取器:

var app = ... shouldn't be exposed to global scope. Module getter can be used instead:

var app = angular.module("myApp")

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

This requires to preserve the order of loaded JS files. The module should be defined first with angular.module("myApp", []), only then then module units can be defined.

除非应用程序使用JS模块(AMD，CommonJS，ES6)以实现模块化，否则遵循每个文件一个模块"的模式将非常有益.这样可以大大提高可测试性，并且永远不会遇到与模块相关的竞争条件:

Unless the app uses JS modules (AMD, CommonJS, ES6) for modularity, it is beneficial to follow 'one module per file' pattern. This allows to considerably improve testability and never run into module-related race conditions:

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

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

In this case it doesn't matter in which order module files are loaded.

这篇关于如何在不使用全局范围的情况下分离angularjs文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！