Configuring API from global javascript variable in AngularJS

Question

I am building a web application in AngularJS which uses an API and some parameters

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

And I am trying to set these properties inside my angular app through either app.value or app.constant, to have it in a clean way.

app.value('API_Params', {
    // ...
    // ...
});

I am trying to avoid setting these values in hidden inputs

<input type="hidden" name="api_key" value="ABCDE12345"/>
<!-- ... ... -->

(which I could retrieve with angular.element($selector)), and avoid hardcoding the values

app.value('API_Params', {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

But no matter how much I look for it or tinker with the code, there's always an error.

This would be my ideal situation:

In my HTML:

<script>
    var api_params = {
        // ... as seen above
    }
</script>

And in my angular app

myWebApp.value('API_Params', "Something clever here to get api_params");

Thank you!

Update: I'm trying to avoid bad practices. If you think there are other legit methods, please post your answer with recommendations.

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

app.value('config', {
   "constant1": "value1",
   "constant2": "value2"
});

and access it with

config.constant1

Do not forget to inject config in controller

You can refer my original answer here.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 15 '16 at 10:45

Hardik Vaghani

2,163
24
46

In that case have you defined `var` before `app.value` module ? – Hardik Vaghani Jul 15 '16 at 10:50
Please see the updated/clarified question. Thank you! – Nico Jul 15 '16 at 10:50

score 0 · Answer 2 · answered Jul 15 '16 at 10:46

0

Firstly correct your var defintion with : not =

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something"
}

TrY sth like this:

myWebApp.constant('API_Params',{
    api_key: "ABCDE12345",
    api_base_url: "/something"
});

answered Jul 15 '16 at 10:46

krutkowski86

1,084
9
16

Please see the updated/clarified question. Thank you – Nico Jul 15 '16 at 10:50
Using angular constant/value is a good practice in this case. Just inject API_Params in your controller and you can access its data like API_Params.api_key – krutkowski86 Jul 15 '16 at 10:57
My applications uses several controllers, so I believe your approach would mean to "inject" the parameters in each of them? – Nico Jul 15 '16 at 11:01
Yes it needs to be injected in each controller. If you would like to use your approach with script inside HTML, then just refer to this variable inside controllers etc. like api_params.api_key – krutkowski86 Jul 15 '16 at 11:05

score 0 · Answer 3 · answered Jul 15 '16 at 11:21

it all depends on how you plan on using api_params.

If you need it to 'live' inside Angular 'world' i.e be used by your angular app then setting it as a value or constant would be a good option, since it can easily be retrieved by your services/controllers and used by your $http service.

If you globally need api_params i.e not only for your Angular app, then it would be a good idea to set those params as a property of 'window' or 'document' objects which are also accessible by your angular app i.e

In your html template:

window.api_params = {
  api_key: 'any_api_key',
  ...
};

In your Angular app:

var app = angular.module('myapp');

app.controller('mycontroller', [$window, function ($window) {
    $window.api_params.api_key = 'new_api_key';
}]);

score 0 · Answer 4 · answered Jul 15 '16 at 11:23

Easy, I just define a global variable

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

and use it in myApp.value or myApp.constant like this:

myApp.config("API_Params", api_params)

This will make it accessible from all the controllers (e.g. API_Params.api_key).

My problem was that the global Javascript variable wasn't defined before the AngularJS snippet. That is the scripts should be defined in this order:

<script>
    var api_params = {
        api_key: "ABCDE12345",
        api_base_url: "/something",
        // ...
    }
</script>
<script src="angular.js"></script>

But the angular.js snippet was placed on top. Unlike jQuery or other libraries, angular.js doesn't wait for document.ready()

Configuring API from global javascript variable in AngularJS

4 Answers4