Конфигурационный файл в AngularJS

Как лучше всего создать файл конфигурации (что-то вроде web config в .net), для хранения URL-адресов и других констант, которые могут отличаться во время развертывания приложения?

3 67
angularjs

3 ответа:

использовать .constant() способ:

angular.module('app').constant('MONGOLAB_CONFIG', {
  baseUrl: '/databases/',
  dbName: 'ascrum'
});

как и в .

тогда вы можете просто ввести его там, где вам нужны константы.

вы можете иметь разные файлы, определяющие различные константы для разработки или производства, а затем использовать такой инструмент, как Grunt, чтобы использовать тот или иной файл в соответствии с окружающей средой.

предположим, у вас есть такая структура папок:

|-js/
|  |-app.js
|  |-anotherfile.js
|  |-...
|
|-env/
|  |-dev.js
|  |-prod.js
|
|-index.html

dev.js и prod.js определяет то же самое .constant() сервис с разными значениями. Затем вы можете получить правильный файл, который будет объединен с gruntFile следующим образом:

grunt.registerTask('default', ['concat']);

grunt.initConfig({
  env : process.env.NODE_ENV,
  src: {
    javascript: ['js/*.js'],
    config: ['env/<%= env %>.js']
  },
  concat: {
    javascript: {
      src:['<%= src.config %>', '<%= src.javascript %>'],
      dest:'myapp.js'
    }
  }
});

под управлением grunt вы получили бы myapp.js файл, содержащий хорошие константы.

Edit: С глотком вы можете сделать это так:

var paths = [
  'env/' + process.env.NODE_ENV + '.js',
  'js/**/*.js',
];

var stream = gulp.src(paths)
  .pipe(plugins.concat('main.js'))
  .pipe(gulp.dest('/output'));
84

IMHO, мне не нравится обрабатывать конфигурационные файлы с помощью Task runners. Потому что вам нужно будет перестроить все ваше приложение, чтобы просто изменить строку или две каждый раз, когда вам нужна другая конфигурация.

С помощью .config угловой-это хорошо, и я бы сделал что-то вроде (заимствование из примера первого ответа)

angular.module('app').constant('MONGOLAB_CONFIG', {
  baseUrl: '/databases/',
  dbName: 'ascrum'
});

назовем это как app.config.js

и это будет связано .html сразу после мини-скрипта, например это

<script src="js/app-38e2ba1168.js"></script> //the application's minified script
<script src="/app.config.js"></script>

вы можете просто отредактировать app.config.js файл без повторного запуска каких-либо задач. Так что вы можете иметь разные app.config.js файлы на разных машинах/сред без повторного создания приложения снова и снова

9

нестандартное мышление, вы действительно не хотите использовать .константа, поскольку она привязана к приложению. Используйте конфигурацию, которая находится за пределами приложения, и у вас есть больше контроля над конфигурациями env. Я предоставил ссылку ниже, объясняющую подводные камни конфигураций в самой угловой сборке.

(function hydrateConfiguration() {
"use strict";
var xhr = new XMLHttpRequest();
xhr.open("get", "conf.json", window);
xhr.onload = function () {
    var status = xhr.status;
    if (status === 200) {
        if (xhr.responseText) {
            var response = JSON.parse(xhr.responseText);
            window.ss_conf = response;
        }
    } else {

        console.error("messages: Could not load confguration -> ERROR ->", status);
    }
};

xhr.send() )());

просто простой пример, где внешний конфигурационный файл управляет состоянием приложения и вводит значения снаружи, а не внутри в.

https://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/

2