AngularJS中的configuration文件
什么是创buildconfiguration文件(类似于.net中的webconfiguration)的最佳方式,用于存储url以及在应用程序部署期间可能会有所不同的其他常量?
使用.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'));
恕我直言,我不喜欢用任务跑步者处理configuration文件。 因为每次需要不同的configuration时,您都需要重新构build整个应用程序,以便更改一行或两行。
使用angular的.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
文件,而无需重复构build应用程序
在盒子外面思考,你并不是真的想使用.constant,因为它与应用程序绑定在一起。 使用位于应用程序之外的configuration,您可以更好地控制envconfiguration。 我已经提供了一个链接,下面解释在angular度构build本身configuration的陷阱。
(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() )());
只是一个简单的例子,其中一个外部configuration文件控制应用程序的状态,并注入外面的值,而不是内部。
https://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/