AngularJs: Как объявить приложение и несколько контроллеров, обслуживает и т. Д. c, используя IFFE? - PullRequest
Новая
       76

AngularJs: Как объявить приложение и несколько контроллеров, обслуживает и т. Д. c, используя IFFE?

1 голос
/ 18 февраля 2020

Знаменитый 1032 * 1 «Руководство по стилю» Джона Папы говорит об использовании IIFE, чтобы избежать подобных var myApp = angular.module('myApp',[]); и загрязнении глобального пространства имен.

Приведенный пример:

регистратор. js

(function() {
    'use strict';

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

    function logger() { }
})();

хранилище. 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') дважды, что, безусловно, не может быть хорошей вещью (на самом деле, я читал ранее столь высоко оцененный вопрос, в котором говорилось, что это плохая вещь, и что должна быть одна ссылка - но это будет глобальный, что тоже плохо).

Что это такое? Или я могу объявить мои angular.module('app'), плюс несколько контроллеров, сервировок, фабрики, директивы, в отдельных файлах, в отдельных IIFE ? Если да, то как?

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

Не нужно ли объявлять модуль хотя бы один раз?

Да, сначала необходимо создать модуль с зависимостями:

app. js

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

Это необходимо сделать до добавления любых последующих сценариев к этому. Его не нужно заключать в IIFE , поскольку он не объявляет глобальные переменные.

Чтобы избежать загрязнения глобального пространства имен, в IIFE необходимо заключить следующее :

регистратор. js

(function() {
    'use strict';

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

    function logger() { }
})();

С другой стороны

хранилище. js

'use strict';

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

Для этого не требуется IIFE , поскольку он не объявляет какие-либо глобальные переменные или функции.

В обоих примерах избегается загрязнение глобального пространства имен.

Для получения дополнительной информации см.

1 голос
/ 18 февраля 2020

angular.module('app') без массива, так как 2-й параметр является геттером, его можно использовать несколько раз.

Чтобы улучшить это, вам нужен какой-то инструмент для сборки, например, мы используем веб-пакет (он обернет все в IIFE для вас, кстати) и теперь это выглядит так:

logger. js: 

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

хранилище. js: 

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

модуль. js: 

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