@bromzh
Drugs-driven development

Как лучше организовать локальные настройки в angular-проекте?

В проекте разрабатывается серверная часть в виде API, к которой прикручен ангуляр-проект. В локальной версии, например, надо указывать 1 путь к апи, в продакшене другой.
Для фронтенда хочется иметь:
  • файл с дефолтными значениями, который включён в репу и в котором хранятся все настройки проекта.
  • файл с локальными настройками, который не отслеживается гитом, но если он имеется, то дефолтные настройки заменяются на настройки из этого файла.

Как это лучше реализовать?
  • Вопрос задан
  • 1279 просмотров
Решения вопроса 1
@bromzh Автор вопроса
Drugs-driven development
Спасибо за ответы, они навели на решение. Сделал так:

За основу взял структуру проекта, которую генерит generator-gulp-angular.
В корне создал папку config, в которой лежат json-файлы с настройками. В default.json описаны всевозможные настройки. В других файлах достаточно лишь переопределить нужное поле:
// config/default.json
{
  "api": {
    "scheme": "http",
    "host": "localhost",
    "port": 8080,
    "root": "/api/v1/"
  }
}
// config/prod.json
{
  "api": {
    "host": "example.com"
  }
}
// config/dev.json
{}

Файл local.json добавлен в гитигнор, но его можно использовать (если он есть).

Далее, написал задачу для gulp, которая в зависимости от окружения генерирует с помощью gulp-ng-config js-файл с ангуляровским модулем:
// gulp/config.js
'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var cjson = require('cjson');
var b2v = require('buffer-to-vinyl');
var gulpNgConfig = require('gulp-ng-config');

module.exports = function (options) {
  function p(name) {
    return [options.config + '/default.json', options.config + '/' + name + '.json'];
  }

  gulp.task('config', function () {
    var env = gutil.env.env || 'dev'; // получаем имя окружения через значение аргумента командной строки, или выставляем его равным dev, если ничего не передавалось
    var config = JSON.stringify({
      config: cjson.load(p([env]), true) // Загружаем json'ы, сливая их в 1 объект
    });

    return b2v.stream(new Buffer(config), 'config.js') // создаём поток из строки
      .pipe(gulpNgConfig('lemonfront.config', { // генерим по JSON'у ангуляровский модуль
        createModule: false
      }))
      .pipe(gulp.dest(options.tmp + '/serve/app/')); // и записываем во временную папку
  });
}

Эта задача стоит в зависимостях у другой (script) и генерит такой файл:
// .tmp/serve/app/config.js
angular.module('app.config')
  .constant('config', {
    "api": {
      "scheme": "http",
      "host": "localhost",
      "port": 8080,
      "root": "/api/v1/"
    }
  });


Далее, добавил этот скрипт в список для инъекции в html. В index.js определил сам модуль и добавил его в зависимости всего проекта, чтобы любой дочерний модуль имел доступ к этим настройкам:
// src/app/index.js
angular.module('app.config', []);
angular.module('lemonfront', [
  'ngAnimate',
  'ngCookies',
  'ngSanitize',
  'ui.router',

  'app.config',
  'app.core'
]);

В ангуляре теперь достаточно внедрить config:
angular.module('...', [])
.factory(SomeService, ['config', function (config) {
  console.log(config.api.host);
}]);

А выбор конфига идёт через аргумент при запуске gulp:
gulp build --env=prod
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Есть такая штука yeoman.io/generators и собственно сам генератор https://github.com/DaftMonk/generator-angular-fullstack
Очень мне нравится организованная структура и использование команды grunt

Запустится dev проект, с дебагами и прочими плюшками.
grunt serve

Запустит production
grunt serve:dist

Для добавления новых модулей достаточно использовать команды:
bower install --save module-name
npm install --save module-name

При запуске эти модули инджектятся в файл index.html а в production версию все файлы минифицируются.

Настройки хранятся в таком виде:
./server/config/environment/development.js - dev версия
./server/config/environment/production.js - prod версия
./server/config/environment/index.js - общие

Из доков по герератору
Server Side
  • angular-fullstack:endpoint


Client Side
  • angular-fullstack:route
  • angular-fullstack:controller
  • angular-fullstack:filter
  • angular-fullstack:directive
  • angular-fullstack:service
  • angular-fullstack:provider
  • angular-fullstack:factory
  • angular-fullstack:decorator


Deployment
  • angular-fullstack:openshift
  • angular-fullstack:heroku


Пример:
$ yo angular-fullstack:endpoint post
[?] What will the url of your endpoint to be? /api/posts
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
делаем файлик config.dev.js или что-то в этом духе и пишем туда что-то в этом духе:

angular.module('app.config', [])
    .constant('API_ENDPOINT', 'http://api-dev.example.com')
;


и делаем от него зависимым наше приложение и используем константы.

Далее есть варианты:
1) при сборке подключать нужный файлик
2) инлайнить файлик с конфигурациями в страницу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы