Мы видели, как пишем этот тип кода на всех языках сценариев сервера:
if ( env == “development” ) { //do development stuff } else if ( env == “production” ) { // do production stuff }
Что, если мы хотим выполнять те же задачи во внешнем интерфейсе? Может использоваться для обслуживания рабочего приложения через папку dist
и промежуточного приложения из папки src
. Или может быть использование некоторых переменных среды из серверной части. Или многие другие варианты использования, которые помогают упростить и ускорить разработку и оптимизировать производство.
Это возможно в AngularJS с помощью Grunt. Grunt - отличный инструмент, который помогает автоматизировать несколько задач, выполнение которых вручную может занять много времени.
Идея состоит в том, чтобы запустить приложение AngularJS с использованием grunt и создать задачу grunt, которая создает угловые константы. Эти угловые константы будут определять, будет ли среда production
или development
. Вот пошаговое руководство, как это сделать:
- Настройте grunt для вашего проекта. См. Оригинальное ворчание Руководство по началу работы. Это прекрасно объяснили даже новичку.
- Настройте
ng-constant
для вашего проекта. Это грубый инструмент, который помогает вам автоматически создавать файлы угловых констант. Его репозиторий на github не требует пояснений. - После настройки
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 }; }]);
Вот и все. Есть много других методов и инструментов, которые помогут в этом, но я считаю этот метод самым лучшим и простым.
Дополнительные предложения приветствуются.
Всего наилучшего для вашего ракетно-скоростного развития.