AngularJs : 如何使用 IFFE 声明一个应用程序和多个控制器、服务等？

Question

John Papa 的著名 Angular 1 Style Guide 说要使用 IIFE，以避免 var myApp = angular.module('myApp',[]); 之类的东西和污染全局命名空间。

给出的例子是：

logger.js

(function() {
    'use strict';

    angular
        .module('app')
        .factory('logger', logger);

    function logger() { }
})();

storage.js

(function() {
    'use strict';

    angular
        .module('app')
        .factory('storage', storage);

    function storage() { }
})();

这是如何工作的？我不需要至少声明一次模块吗？例如 angular.module('app',[]); （包装在 IIFE 中？（而不是 var app = angular.module('app',[]); 以避免全局变量））？

但是例子中angular.module('app')的两个用法，不声明，然后会求值angular.module('app') 两次，这肯定不是一件好事（事实上，我之前读过一个高度赞成的 S.O. 问题，它说这是一件坏事，应该有一个参考 - 但那会成为全球性的，这也是一件坏事）。

它是哪个？或者我可以在单独的文件中声明我的 angular.module('app')，加上一些控制器、服务、工厂、指令，在单独的 IIFEs 中吗？如果可以，怎么做？

Answer 1

angular.module('app')没有数组，因为第二个参数是getter，可以多次使用它。

要改进这一点，您需要一些构建工具，例如我们使用 webpack（顺便说一句，它会将所有内容包装到 IIFE 中）现在它看起来像这样：

logger.js :

export default ['$log', function($log) {}]

storage.js :

export default ['$http', function($http) {}]

module.js :

import logger from './logger.js';
import storage from './storage.js';
angular
        .module('app')
        .factory('logger', logger)
        .factory('storage', storage);

Answer 2

Do I not need to declare the module at least once?

是的，需要先创建带有依赖关系的模块：

app.js

angular.module('app',['ngRoute']);

这必须在添加任何后续脚本之前完成。它不需要包含在 IIFE 中，因为它没有声明任何全局变量。

为避免污染全局命名空间，以下内容需要包含在IIFE中：

logger.js

(function() {
    'use strict';

    angular
        .module('app')
        .factory('logger', logger);

    function logger() { }
})();

---

另一方面

storage.js

'use strict';

angular.module('app')
.service('storage', function storage() {
    var value;
    this.get = function() { return value; };
    this.set = function(val) {
        value = val;
    };
})

这不需要 IIFE 因为它没有声明任何全局变量或函数。

两个示例都避免了污染全局命名空间。

有关详细信息，请参阅

• AngularJS angular.module Method API Reference