CODEWITHSUNDEEP
javascript
user10628262
user10628262

Reputation: 103

Properties file in JavaScript / Angular

In Java I usually create application.properties in my resource folder and put configs in there.

And when I need it I just do Properties prop = new Properties(); prop.load(... my file) and then use prop.getProperty("Something")

I want to do something similar in Javascript

In my js code I have this:

// REST API Base URL
var baseUrl = "http://localhost:8083/api";

I want this to be in a application.properties file and then load the value.

How can I achive this?

Thanks

Upvotes: 8

Views: 8631

Answers (2)

segu
segu

Reputation: 321

In angular 2+ projects and for a good practices you should create environments folder with one file per env like: environment.ts, environment.prod.ts.

and into file you can export a constant or by default like that

export const environment = {
  apiUrl: '',
  googleApiKey: '',
}

and you can import this environment in every file you will needed like

import { environment } from '{relativePath}/environment/environment.ts'

If you create different files for every env like prod. You need to replace environment.js for env that you will be build. You have lot of info about this with webpack or other compilers.

I recommend you strongly to develop into a common.js project. It will be more friendly for you importing modules and you will have powerful possibilities of scalable app.

But the easy(Ugly) solution is:

index.html

<head>
  <script src="environment.js">
  <script src="app.js">
</head>

environment.js

// Declaring environment like that you will have window scoped the variable
// and you will have global access to environment with window.environment
var environment = {apiUrl: 'https://api.url:4100'}

app.js

function example(){
  console.log(window.environment.apiUrl); // out https://api.url:4100
}

Upvotes: 3

Stefan Orzu
Stefan Orzu

Reputation: 433

The approach depends on how you build and/or bundle your AngularJs application. But regardless of that, you'll need to create a config.json file to contain your settings. If using browserify or webpack, you can import that file via require(...), otherwise you can simply request it via ajax before your app bootstraps.

In any of these cases, the best way to use the configuration data throughout your app is to define it as a constant at the bootstrap phase: app.constant('CONFIG', configData);, assuming that configData is a variable that contains the data from your config.json file.

Then you can use dependency injection to provide CONFIG to all your controllers, services and directives.

Upvotes: 0

Related Questions