AngularJS中的配置文件

Question

在應用程序部署過程中，創建配置文件（類似於.net中的web配置），存儲URL和其他常量的最佳方式是什麼？

Answer 1

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

編輯：與咕嘟咕嘟你可以做這樣的：

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

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

Answer 2

恕我直言，我不喜歡處理與任務亞軍配置文件。因爲每次需要不同的配置時，您都需要重新構建整個應用程序，以便更改一行或兩行。

採用了棱角分明的.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˚F沒有重新運行任何任務。因此，您可以在不同的機器/環境中使用不同的app.config.js文件，而無需重複構建應用程序

Answer 3

在盒子外面思考，您並不真正想要使用.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/