Set up AngularJS application to save API URLs

Question

Set up AngularJS application to save API URLs

In configuring my API endpoint and URL's, I utilize a custom app.config.js file with environment variables:

angular.module('api-config', []).constant('ENV',
{
    name: 'My Project Name',
    apiEndPoint: 'http://SOMEIP/gateway/',
    apiListUser: '/user',
    apiUser: '/user/{:id}'

});

Controller

var servicePath = ENV.apiEndPoint;
var listUserApi = ENV.apiListUser;

return $http({
    method: 'POST',
    url: servicePath + listUserApi
})

Challenges faced by the current approach:

External developers or consultants gain access to private configuration data stored in the config.

Limited scalability due to fixed configuration preventing dynamic scaling and application customization during deployment.

Goals for improvement:

Deploying AngularJS applications in various environments (staging, production) with different configurations without altering the code.
Sharing AngularJS application code externally while protecting confidential details by separating all configuration in a distinct app.config.js file. Is this the most secure method?
Avoiding exposure of API endpoints and URLs in the app.config.js file to any developer viewing the source code. How can this be prevented?

javascript angularjs

Answer 1

Answer №1

Our approach involves utilizing a configuration file (e.g., app.config, defaults.config) within our application architecture. Upon launching the application, we make a call to a web API that retrieves the information from this config file in JSON format. Subsequently, we store this data in a dedicated service, enabling us to access all configuration settings through an angular service. This method effectively addresses the issues you raised.

Answer 2

Our approach involves utilizing a configuration file (e.g., app.config, defaults.config) within our application architecture. Upon launching the application, we make a call to a web API that retrieves the information from this config file in JSON format. Subsequently, we store this data in a dedicated service, enabling us to access all configuration settings through an angular service. This method effectively addresses the issues you raised.

Answer 3

Answer №2

<!DOCTYPE html>


<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="config.js"></script>
</head>

<body ng-controller="myCtrl">
  {{configData.key1}}

  <script>
    (function() {
      var app = angular.module("app", [])


     .run(['urlFactory', function(urlFactory) {
        urlFactory.getConfig(window.__env);
      }])

      .controller("myCtrl", function(APIFactory, urlFactory, $scope) {
        
        $scope.configData = urlFactory.configData;
        APIFactory.proveAPIfactHaveData();
        

      }).factory("urlFactory", function() {

        var configData = {
          key1: null,
          key2: null
        };

     
         function getConfig(data) {
          angular.extend(configData, data);
        }

        var service = {
          configData: configData,
          getConfig: getConfig,
        }
        return service;

      }).factory("APIFactory", function(urlFactory) {

        var service = {
          proveAPIfactHaveData: proveAPIfactHaveData,
        }
        return service;

        function proveAPIfactHaveData() {
          alert(JSON.stringify(urlFactory.configData));
        }

      });
    }());
  </script>


</body>

</html>

your config.js file

(function (window) {
  window.__env = window.__env || {};
    window.__env.key1       =   "key1";
    window.__env.key2       =   "key2";
}(this));

Answer 4

<!DOCTYPE html>


<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="config.js"></script>
</head>

<body ng-controller="myCtrl">
  {{configData.key1}}

  <script>
    (function() {
      var app = angular.module("app", [])


     .run(['urlFactory', function(urlFactory) {
        urlFactory.getConfig(window.__env);
      }])

      .controller("myCtrl", function(APIFactory, urlFactory, $scope) {
        
        $scope.configData = urlFactory.configData;
        APIFactory.proveAPIfactHaveData();
        

      }).factory("urlFactory", function() {

        var configData = {
          key1: null,
          key2: null
        };

     
         function getConfig(data) {
          angular.extend(configData, data);
        }

        var service = {
          configData: configData,
          getConfig: getConfig,
        }
        return service;

      }).factory("APIFactory", function(urlFactory) {

        var service = {
          proveAPIfactHaveData: proveAPIfactHaveData,
        }
        return service;

        function proveAPIfactHaveData() {
          alert(JSON.stringify(urlFactory.configData));
        }

      });
    }());
  </script>


</body>

</html>

your config.js file

(function (window) {
  window.__env = window.__env || {};
    window.__env.key1       =   "key1";
    window.__env.key2       =   "key2";
}(this));

Set up AngularJS application to save API URLs

Answer №1

Answer №2

Similar questions

The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

Using Vue.js to iterate over a list of items and accessing specific array objects by their unique identifier

"Encountering an error in Vue.js when trying to dynamically access nested arrays: push function not

Using React router to handle multiple hierarchical parameters

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

What is the importance of manually merging geometries?

Guide on efficiently inserting multiple records into a MySQL database using Node.js and also implementing a check to insert only when the record does not already exist

Detecting changes to DOM elements without using jQueryResponding to DOM element

Adding dynamic elements in Ionic2 and AngularJS can be achieved by using the correct syntax and functions provided

iOS is not receiving JSON data in the response headers

Retrieving checkbox values from HTML and storing them in a temporary JavaScript/HTML variable

Is it possible to generate an array of all matches found by a regular expression

Unlocking the potential of Arrays in Javascript: strategies for extracting maximum value

Locate a JQuery element within another JQuery element

Effortless method for distributing NPM-loaded modules among various Browserify or Webpack bundles

Verify if an element with a specific index exists within an array

Angular 2: Harnessing the power of dynamic backlinks on landing pages!

The Reactjs application is failing to display the real-time data produced by the state

Prevent dragging of the div element that includes the "XYZ" class