Plik konfiguracyjny w AngularJS

Question

Jaki jest najlepszy sposób utworzenia pliku konfiguracyjnego (Coś jak konfiguracja internetowa w .net), do przechowywania adresów URL i innych stałych, które mogą się różnić podczas wdrażania aplikacji?

Answer 1

pomocą metody .constant():

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

jak w this example.

Następnie możesz po prostu wstrzyknąć tam, gdzie potrzebujesz stałych.

Możesz mieć różne pliki definiujące różne stałe dla rozwoju lub produkcji, a następnie użyj narzędzia takiego jak Grunt, aby użyć tego lub tego pliku odpowiednio do środowiska.

Załóżmy masz tego rodzaju struktury folderu:

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

dev.js i prod.js definiuje samą .constant() usługi z różnymi wartościami. Następnie można uzyskać właściwy plik być łączone z gruntFile tak:

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' 
    } 
    } 
}); 

Uruchamiając grunt dostaniemy plik myapp.js zawierający dobre stałe.

Edit: z Gulp można zrobić to tak:

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

IMHO, nie lubię obsługi plików konfiguracyjnych z biegaczy zadaniowych. Powoduje, że musisz przebudować całą aplikację, aby zmienić linię lub dwie za każdym razem, gdy potrzebujesz innej konfiguracji.

Używanie .config kątowego jest dobrą rzeczą i chciałbym zrobić coś takiego (pożyczek na przykładzie pierwszej odpowiedzi) Nazwa

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

zróbmy to jak app.config.js

i będzie to powiązane w .html tuż po minified skryptu jak ten

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

można tylko wtedy edytować app.config.js f ile bez ponownego uruchamiania jakichkolwiek zadań. Dzięki temu możesz mieć różne pliki app.config.js na różnych komputerach/środowiskach bez ponownego budowania aplikacji ponownie.

Answer 3

Myśląc nieszablonowo, nie chcesz używać programu .constant, ponieważ jest on związany z aplikacją. Użyj konfiguracji, która znajduje się poza aplikacją i masz większą kontrolę nad konfiguracjami env. Podałem poniżej link wyjaśniający pułapki konfiguracji w samej konstrukcji kątowej.

(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())()); 

Prosty przykład gdzie zewnętrzny plik konfiguracyjny steruje stanem aplikacji i wstrzykuje wartości na zewnątrz zamiast w środku.

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