AngularJS中的配置文件

Question 1

创建配置文件（类似于.net中的Web配置），存储URL以及在应用程序部署期间可能会变化的其他常量的最佳方法是什么？

Question 2

使用.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包含良好常量的文件。

编辑：使用Gulp，您可以这样操作：

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

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

Question 3

恕我直言，我不喜欢与任务运行程序一起处理配置文件。因为您将需要重新构建整个应用程序，以便每次需要不同的配置时更改一两行。

使用.configangular的好处是一件好事，我会做类似的事情（从第一个答案的示例中借用）

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在不同的机器/环境上拥有不同的文件，而无需一次又一次地重建应用程序

Question 4

跳出框框思考，您真的不想使用.constant，因为它与应用程序相关。使用位于应用程序外部的配置，您可以对环境配置进行更多控制。我在下面提供了一个链接，解释了角度构建本身中具有配置的陷阱。

(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/