Pertanyaan Konfigurasi beban AngularJS saat memulai aplikasi


Saya perlu memuat file konfigurasi (format JSON) setelah startup aplikasi AngularJS saya untuk memuat beberapa parameter yang akan digunakan dalam semua panggilan api. Jadi saya bertanya-tanya apakah mungkin untuk melakukannya di AngularJS dan jika ya di mana / ketika saya akan memuat file konfigurasi?

catatan: - Saya perlu menyimpan parameter file konfigurasi dalam layanan, jadi saya perlu memuat konten file json sebelum kontroler apa pun dimuat tetapi dengan unit layanan yang tersedia - Menggunakan file json eksternal adalah keharusan dalam kasus saya di sini karena klien aplikasi harus dapat memperbarui konfigurasi aplikasi dengan mudah dari file eksternal tanpa perlu melalui sumber aplikasi.


49
2018-04-03 00:38


asal


Jawaban:


DIEDIT

Kedengarannya seperti apa yang Anda coba lakukan adalah mengkonfigurasi layanan dengan parameter. Untuk memuat file konfigurasi eksternal secara asinkron, Anda harus mem-bootstrap aplikasi sudut sendiri di dalam pemanggilan ulang beban data lengkap daripada menggunakan pendorong otomatis.

Pertimbangkan contoh ini untuk definisi layanan yang sebenarnya tidak memiliki URL layanan yang ditentukan (ini akan menjadi sesuatu seperti contact-service.js):

angular.module('myApp').provider('contactsService', function () {

    var options = {
        svcUrl: null,
        apiKey: null,
    };

    this.config = function (opt) {
        angular.extend(options, opt);
    };

    this.$get = ['$http', function ($http) {

        if(!options.svcUrl || !options.apiKey) {
            throw new Error('Service URL and API Key must be configured.');
        }

        function onContactsLoadComplete(data) {
            svc.contacts = data.contacts;
            svc.isAdmin = data.isAdmin || false;
        }

        var svc =  {
            isAdmin: false,
            contacts: null,
            loadData: function () {
                return $http.get(options.svcUrl).success(onContactsLoadComplete);
            }
        };

        return svc;
    }];
});

Kemudian, pada dokumen siap, Anda akan membuat panggilan untuk memuat file konfigurasi Anda (dalam hal ini, menggunakan jQuery). Dalam callback, Anda kemudian akan melakukan aplikasi angular Anda. Configig menggunakan data json dimuat. Setelah menjalankan .config, Anda kemudian akan mem-bootstrap aplikasi secara manual. Sangat Penting: jangan gunakan direktif ng-app jika Anda menggunakan metode ini atau angular akan bootstrap itu sendiri Lihat url ini untuk detail lebih lanjut:

http://docs.angularjs.org/guide/bootstrap

Seperti ini:

angular.element(document).ready(function () {
    $.get('/js/config/myconfig.json', function (data) {

        angular.module('myApp').config(['contactsServiceProvider', function (contactsServiceProvider) {
            contactsServiceProvider.config({
                svcUrl: data.svcUrl,
                apiKey: data.apiKey
            });
        }]);

        angular.bootstrap(document, ['myApp']);
    });
});

PEMBARUAN: Berikut adalah contoh JSFiddle: http://jsfiddle.net/e8tEX/


25
2018-04-03 01:07



Saya tidak bisa mendapatkan pendekatan yang disarankan Keith Morris saya untuk bekerja.

Jadi saya membuat file config.js dan memasukkannya ke index.html sebelum semua file angular

config.js

var configData = {
    url:"http://api.mydomain-staging.com",
    foo:"bar"
}

index.html

...
<script type="text/javascript" src="config.js"></script>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

kemudian dalam menjalankan fungsi saya, saya mengatur variabel konfigurasi ke $ rootScope

.run( function run($rootScope) {
    $rootScope.url = configData.url;
    $rootScope.foo = configData.foo;
    ...
})

21
2017-12-31 05:56



Anda dapat menggunakan konstanta untuk hal-hal seperti ini:

angular.module('myApp', [])

// constants work
//.constant('API_BASE', 'http://localhost:3000/')
.constant('API_BASE', 'http://myapp.production.com/')
//or you can use services
.service('urls',function(productName){ this.apiUrl = API_BASE;})

//Controller calling
.controller('MainController',function($scope,urls, API_BASE) {
     $scope.api_base = urls.apiUrl; // or API_BASE
});

// di halaman html menyebutnya {{api_base}}

Ada juga beberapa opsi lain termasuk .value dan .config tetapi mereka semua memiliki keterbatasan. .config sangat bagus jika Anda perlu menghubungi penyedia layanan untuk melakukan beberapa konfigurasi awal. .value seperti konstan kecuali Anda dapat menggunakan berbagai jenis nilai.

https://stackoverflow.com/a/13015756/580487


2
2018-04-03 01:14



Dipecahkan dengan menggunakan konstanta. Seperti penyedia Anda dapat mengkonfigurasinya dalam fase .config. Segala sesuatu yang lain seperti Keith Morris tulis sebelumnya. Jadi kode yang sebenarnya akan terlihat seperti ini:

(function () {
var appConfig = {

};

angular.module('myApp').constant('appConfig', appConfig);
})();

lalu di app.bootstrap.js

(function () {

angular.element(document).ready(function () {

    function handleBootstrapError(errMsg, e) {
        console.error("bootstrapping error: " + errMsg, e);
    }

    $.getJSON('./config.json', function (dataApp) {
        angular.module('myApp').config(function (appConfig) {
            $.extend(true, appConfig, dataApp);
            console.log(appConfig);
        });

        angular.bootstrap(document, ['myApp']);

    }).fail(function (e) {
        handleBootstrapError("fail to load config.json", e);
    });

});
})();

0
2018-02-27 19:12



Untuk file json config, ada contoh praktik di blog Jaco Pretorius. Pada dasarnya:

angular.module('plunker', []);
angular.module('plunker').provider('configuration', function() {
  let configurationData;

  this.initialize = (data) => {
    configurationData = data;
  };

  this.$get = () => {
    return configurationData;
  };
});

angular.module('plunker').controller('MainCtrl', ($scope, configuration) => {
  $scope.externalServiceEnabled = configuration.external_service_enabled;
  $scope.externalServiceApiKey = configuration.external_service_api_key;
});

angular.element(document).ready(() => {
  $.get('server_configuration.json', (response) => {
    angular.module('plunker').config((configurationProvider) => {
      configurationProvider.initialize(response);
    });

    angular.bootstrap(document, ['plunker']);
  });
});

Plunker: http://plnkr.co/edit/9QB6BqPkxprznIS1OMdd?p=preview

Ref: https://jacopretorius.net/2016/09/loading-configuration-data-on-startup-with-angular.html, akses terakhir pada 13/03/2018


0
2018-03-13 19:13