AngularJS中的配置文件

时间:2013-07-26 08:22:49

标签: angularjs

创建配置文件(在.net中的Web配置之类的东西),存储网址以及在应用程序部署期间可能会有所不同的其他常量的最佳方法是什么?

3 个答案:

答案 0 :(得分:85)

使用.constant()方法:

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

就像在this example中一样。

然后你可以将它注入你需要常数的地方。

您可以使用不同的文件定义开发或生产的不同常量,然后使用Grunt等工具根据环境使用此文件或该文件。

假设你有这种文件夹结构:

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

dev.jsprod.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'));

答案 1 :(得分:9)

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

使用.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文件,而无需一次又一次地重新构建应用程序

答案 2 :(得分:2)

在盒子外面思考,你并不真的想使用.constant,因为它与应用程序联系在一起。使用位于应用程序外部的配置,您可以更好地控制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/