it-swarm.dev

ملف التكوين في AngularJS

ما هي أفضل طريقة لإنشاء ملف التكوين (شيء مثل تهيئة الويب في .net) ، لتخزين عناوين url ، والثوابت الأخرى التي قد تختلف أثناء نشر التطبيق؟

70
Ivan Alek

استخدم طريقة .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'));
85
maxdec

IMHO ، أنا لا أحب التعامل مع ملفات التكوين مع العدائين المهمة. لأنك ستحتاج إلى إعادة إنشاء التطبيق بالكامل لمجرد تغيير خط أو خطين في كل مرة تحتاج فيها إلى تكوين مختلف.

يعد استخدام رمز .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 مختلفة على أجهزة/بيئات مختلفة دون إعادة إنشاء التطبيق مرارًا وتكرارًا

9
Louie Almeda

بالتفكير خارج الصندوق ، فأنت لا تريد حقًا استخدام .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/

2
Matthew Hill