Мы видели, как пишем этот тип кода на всех языках сценариев сервера:

if ( env == “development” ) {
     //do development stuff
}
else if ( env == “production” ) {
    // do production stuff
}

Что, если мы хотим выполнять те же задачи во внешнем интерфейсе? Может использоваться для обслуживания рабочего приложения через папку dist и промежуточного приложения из папки src. Или может быть использование некоторых переменных среды из серверной части. Или многие другие варианты использования, которые помогают упростить и ускорить разработку и оптимизировать производство.

Это возможно в AngularJS с помощью Grunt. Grunt - отличный инструмент, который помогает автоматизировать несколько задач, выполнение которых вручную может занять много времени.

Идея состоит в том, чтобы запустить приложение AngularJS с использованием grunt и создать задачу grunt, которая создает угловые константы. Эти угловые константы будут определять, будет ли среда production или development. Вот пошаговое руководство, как это сделать:

  1. Настройте grunt для вашего проекта. См. Оригинальное ворчание Руководство по началу работы. Это прекрасно объяснили даже новичку.
  2. Настройте ng-constant для вашего проекта. Это грубый инструмент, который помогает вам автоматически создавать файлы угловых констант. Его репозиторий на github не требует пояснений.
  3. После настройки ng-constant зарегистрируйте в Gruntfile.js две отдельные задачи grunt: одну для разработки, другую для производства. Если вы все еще не знаете, как это сделать или где находится ваш Gruntfile.js, значит, вы недостаточно читали о grunt, сделайте это. Задачи должны выглядеть примерно так:
grunt.registerTask('dev', [
    'ngconstant:development'
]);
grunt.registerTask('prod', [
    'ngconstant:production'
]);

4. В приведенном выше коде ngconstant:development и ngconstant:production являются конфигурациями ворчания. Создайте эти конфигурации с помощью ng-constant readme. Они должны выглядеть примерно так:

grunt.initConfig({
 ngconstant: {
    // Options for all targets
    options: {
        space: '  ',
        wrap: '\'use strict\';\n\n {\%= __ngModule %}',
        name: 'constants'
    },
    // Environment targets
    development: {
        options: {
            dest: './path/to/new/constants/file.js'
        },
        constants: {
            ENV: {
                name: 'dev'
            }
        }
    },
    production: {
        options: {
            dest: './path/to/new/constants/file.js'
        },
        constants: {
            ENV: {
                name: 'prod'
            }
        }
    }
 }
});

5. Вот и все. Теперь обслуживайте свое приложение angular с grunt dev или grunt prod в зависимости от среды, в которой вы хотите его запустить. Константы angular можно легко ввести в его контроллеры, директивы, службы и т. Д. Например, в этой настраиваемой директиве angular:

angular.module('myApp')
    .directive('myDirective', function (ENV) {
        var templateUrl;
        if ('dev' === ENV.name) {
            templateUrl = '/path/to/view/in/dev/mode.html';
        }
        else if ('prod' === ENV.name) {
            templateUrl = './path/to/view/in/prod/mode.html';
        }
        return {
            restrict: 'A',
            controller: 'FormConfirmationCtrl',
            controllerAs: 'fc',
            template: templateUrl
        };
    }]);

Вот и все. Есть много других методов и инструментов, которые помогут в этом, но я считаю этот метод самым лучшим и простым.

Дополнительные предложения приветствуются.

Всего наилучшего для вашего ракетно-скоростного развития.