2014-09-23 13 views
10

Ben javascript, typescript kullanarak AngularJS uygulamasını yazıyorum. Ayrıca bina için homurdanıyorum. Aslında ben ng boilerplate ile başladım.Köşeli modül içinde json yapılandırma dosyası nasıl okunur?

Şimdi benim uygulamasında bazı değişkenler yapılandırılabilir olmak istiyorum

{ 
    "app": "abc", 
    "login": "xyz" 
} 

aşağıda- gibi config.json dosya şey olduğunu varsayalım. Şimdi benim javascript dosyaları bu yapılandırma okuyabilir nasıl

var loginUrl : string = "def?pqr="+config.app; 

- Yani bazı yerde ben gibi bir şey kullanabilirsiniz? En iyi uygulama yanıtını arıyorum. Ben de grunt build adımında ikame ile iyiyim.

Not: Yapılandırma dosyası istemcinin kendisinde bulunur, yani sunucudan ayrı olarak yüklenmesine gerek yoktur.

cevap

7

, bir açısal sabit modülünde (sunucu ile ortak) bir yapılandırma dosyası enjekte etmek hırıltı kullanmak

Ben bir config.tpl.js sahip:

angular.module('app.config', []) 

.constant('appConfig', { 

    // clientside specific constants 
    var1      : 'value1', 
    var2      : [1,2,3], 
    sharedVars     : /* @echo SHARED_VARS */ 
}); 

Sonra benim gruntFile içinde:

preprocess: { 
    options: { 
     context: { 
      SHARED_VARS: grunt.file.read('config.json'), 
     } 
    }, 
    config: { 
     src: 'src/config.tpl.js', 
     dest: 'src/config.js' // true file generated and loaded in index.html 
    } 
}, 

Tha Bir açısal sabit modülde tam bir yapılandırma dosyası enjekte edebilir veya sadece istediğiniz varlıkları seçebilirsiniz. Burada

+0

SharedVars gerektirmedim, bu yüzden istemci tarafında belirli sabitleri kullandım. Bunun anlamı ben grunt-preprocess –

+1

Nice kullanmak ve yüklemek zorunda kalmazsınız, bu çözüm beklendiği gibi çalışır. Yine de 'sharedVars:/* @echo SHARED_VARS * /' ile bir hatam oldu. Bu oldukça açık çünkü bir yorum. Hatanın tespit edilmesinden kaçınmanın bir yolu var mı? – C0ZEN

+0

@ C0ZEN yankı içeren dosyayı sadece bir şablon dosyası, olduğu gibi kullanmamanız gerekiyor. Kullanmanız gereken, oluşturulan src/config.js dosyası. –

5

İstemci tarafı kodu için, json dosyasını sunucudan almak için $http.get kullanmalısınız. json dosyasını varsayarsak yapacağını /manage/config.json de http erişilebilir:

$http.get('/manage/config.json').then((res)=>{ 
    var config = res.data; 
}); 

$ http otomatik json sizin için ayrıştırma gelmez. grunt-preprocess kullanma

: Benim durumumda

+1

yapılandırma dosyası istemci kendisinde mevcut olan uygulama modülü foo'dur varsayalım budur. Bunu açıklığa kavuşturacağım. –

3

i

var initInjector = angular.injector(['ng']); 
    var $http = initInjector.get('$http'); 
    var configModule = angular.module('portalConfig', []); 
    $http.get('../config/Settings.json').then(
      function (response) { 

       configModule.value('config', response.data); 
      } 
     ); 

yaptı ve daha sonra

angular.module('foo',['portalConfig'])  
İlgili konular