js góc đọc các biến môi trường

Question

Tôi cố gắng để đọc biến môi trường trong http get gọi

$http.get('http://' + $location.host() + ':8080/api') 

Tôi muốn để có thể đọc các biến MÔI TRƯỜNG và sử dụng nó như là máy chủ http còn lại trong teh gọi API trên, như sau

$http.get('environmental_variable ':8080/api') 

Lưu ý: tôi không biết các biến môi trường cho đến khi thời gian chạy vì vậy, tôi không thể có giá trị trước mặt để sử dụng nó như một hằng số

Answer 1

không có những thứ như en biến vironment trong trình duyệt.

Dịch vụ $location luôn nhận URL hiện tại của bạn. Tôi đoán rằng API của bạn có thể tồn tại trên một máy chủ lưu trữ khác.

Có thể mô phỏng các biến môi trường bằng cách lưu trữ cấu hình trong một hằng số Góc.

app.constant('env', { 
    API_URL: "http://someurl.com:8080/api" 
}); 

Sau đó, bạn có thể đưa số này vào các nhà cung cấp khác của mình.

app.controller('MyController', function($http, env) { 
    $http.get(env.API_URL); 
}); 

Đây là bài viết phong nha về best practices with constants. Bài viết không ủng hộ việc sử dụng hằng số, vì nó có ích để có thể sửa đổi cấu hình mà không cần phải xây dựng lại mã.

Cách tôi thường xử lý việc này là di chuyển tất cả chi tiết cấu hình cá thể ra tệp config.json, sau đó tải tệp đó bằng $http khi tôi khởi động ứng dụng của mình.

Ví dụ: bạn có thể có tệp cấu hình như thế này.

{ 
    apiUrl: "http://someurl.com:8080/api" 
} 

Sau đó, một dịch vụ Góc tải nó.

app.service('Config', function($http) { 
    return function() { 
    return $http.get('config.json'); 
    }; 
}); 

Sau đó, các dịch vụ khác có thể giữ lời hứa, sẽ hiển thị cấu hình khi được giải quyết.

app.controller('MyController', function($http, Config) { 
    Config() 
    .then(function(config) { 
     $http.get(config.apiUrl); 
    }); 
}); 

Answer 2

Tôi đặc biệt khuyên bạn nên sử dụng thư viện để đặt biến môi trường. Bạn có thể sử dụng góc-môi trường cắm để làm điều đó: https://www.npmjs.com/package/angular-environment

Dưới đây là một ví dụ

angular.module('yourApp', ['environment']). 
config(function(envServiceProvider) { 
    // set the domains and variables for each environment 
    envServiceProvider.config({ 
     domains: { 
      development: ['localhost', 'acme.dev.local'], 
      production: ['acme.com', '*.acme.com', 'acme.dev.prod'], 
      test: ['test.acme.com', 'acme.dev.test', 'acme.*.com'], 
      // anotherStage: ['domain1', 'domain2'] 
     }, 
     vars: { 
      development: { 
       apiUrl: '//api.acme.dev.local/v1', 
       staticUrl: '//static.acme.dev.local', 
       // antoherCustomVar: 'lorem', 
       // antoherCustomVar: 'ipsum' 
      }, 
      test: { 
       apiUrl: '//api.acme.dev.test/v1', 
       staticUrl: '//static.acme.dev.test', 
       // antoherCustomVar: 'lorem', 
       // antoherCustomVar: 'ipsum' 
      }, 
      production: { 
       apiUrl: '//api.acme.com/v1', 
       staticUrl: '//static.acme.com', 
       // antoherCustomVar: 'lorem', 
       // antoherCustomVar: 'ipsum' 
      }, 
      // anotherStage: { 
      // customVar: 'lorem', 
      // customVar: 'ipsum' 
      // }, 
      defaults: { 
       apiUrl: '//api.default.com/v1', 
       staticUrl: '//static.default.com' 
      } 
     } 
    }); 

    // run the environment check, so the comprobation is made 
    // before controllers and services are built 
    envServiceProvider.check(); 
}); 

Sau đó, bạn có thể nhận được các biến phù hợp dựa trên những gì môi trường ứng dụng của bạn đang chạy: var apiUrl = envService.read('apiUrl');

Cheers!

Answer 3

Có rất nhiều ví dụ cho thấy cách bạn có thể đặt cài đặt của mình vào các tệp hoặc hằng số khác nhau. Hầu hết các công việc này, nhưng bỏ lỡ vấn đề.

Cài đặt cấu hình của bạn không phải là một phần của mã!

Ngoài ví dụ 'Hello World', triển khai của bạn nên được thực hiện bởi máy chủ CI/CD và điều này sẽ chịu trách nhiệm thiết lập cài đặt cấu hình của bạn. Điều này có một số lợi ích:

1) Bạn đang triển khai cùng một mã cho các môi trường khác nhau. Nếu bạn triển khai mã vào một môi trường thử nghiệm, thì bạn muốn triển khai cùng một mã cho môi trường sản xuất của bạn. Nếu máy chủ của bạn phải xây dựng lại mã, để thêm cài đặt cấu hình sản xuất, bạn đang triển khai mã khác.

2) Mã có thể được chia sẻ mà không cung cấp thông tin chi tiết về API, cài đặt AWS và các thông tin bí mật khác.

3) Nó cho phép dễ dàng thêm môi trường mới.

Có rất nhiều ví dụ về cách thực hiện việc này. Một ví dụ là www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables