Tệp cấu hình trong AngularJS

Question

Cách tốt nhất để tạo tệp cấu hình (Cái gì như cấu hình web trong .net), để lưu trữ url và các hằng số khác có thể thay đổi trong khi triển khai ứng dụng?

Answer 1

Sử dụng phương pháp .constant():

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

như trong this example.

Sau đó, bạn có thể chỉ cần tiêm nó vào nơi bạn cần hằng số.

Bạn có thể có các tệp khác nhau xác định các hằng số khác nhau để phát triển hoặc sản xuất và sau đó sử dụng công cụ như Grunt để sử dụng tệp này hoặc tệp đó theo môi trường.

Giả sử bạn có loại cấu trúc thư mục:

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

dev.js và prod.js xác định dịch vụ tương tự .constant() với các giá trị khác nhau. Sau đó, bạn có thể nhận được hồ sơ hợp lệ để được nối với một gruntFile như thế:

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

Bằng cách chạy grunt bạn sẽ nhận được một tập tin myapp.js chứa các hằng số tốt.

Sửa: với Gulp bạn có thể làm điều đó như thế này:

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, tôi không thích xử lý tập tin cấu hình với vận động viên nhiệm vụ. Vì bạn sẽ cần phải xây dựng lại toàn bộ ứng dụng của bạn chỉ để thay đổi một hoặc hai dòng mỗi khi bạn cần một cấu hình khác.

Sử dụng .config của góc là một điều tốt và tôi sẽ làm một cái gì đó tương tự (vay từ các ví dụ về các câu trả lời đầu tiên) tên

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

let của điều này như app.config.js

Và điều này sẽ được liên kết trong .html ngay sau tập lệnh được rút gọn như thế này

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

Bạn có thể chỉnh sửa app.config.js f ile mà không cần chạy lại bất kỳ tác vụ nào. Vì vậy, bạn có thể có các tệp app.config.js khác nhau trên các máy/môi trường khác nhau mà không cần phải xây dựng lại ứng dụng

Answer 3

Suy nghĩ bên ngoài hộp, bạn không thực sự muốn sử dụng. Sử dụng cấu hình nằm bên ngoài ứng dụng và bạn có nhiều quyền kiểm soát hơn đối với cấu hình env. Tôi đã cung cấp một liên kết dưới đây giải thích những cạm bẫy của có cấu hình trong góc xây dựng chính nó.

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

Chỉ cần một ví dụ đơn giản trong đó tệp cấu hình bên ngoài kiểm soát trạng thái của ứng dụng và chèn các giá trị bên ngoài, thay vì bên trong.

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