Dynamic properties file

ionic-v1
#1

Dear all,
I am new to ionic, and about to set up a project.
But I having one difficulty of defining my properties. what is the best practice or way to do it.

For example my app going to request an api from other server, so I want to define my baseUrl somewhere I can get it easily (for expample “config.properties, or config.xml”).

Best regards,

/pherum Un

#2

If you need some configs in your ionic project… do not use old xml-format.

Put it in a json-file and load it at the beginning of your app with an ordinary $http-request.

like settings.json

{
    "apiUrl": "http://......"
}

and your request

$http.get('path/settings.json').then(function (successResult) {
    // your apiUrl will be somewhere on the successResult object
}, function (errResult) {
    // error occured
});
#3

Beside the solution @bengtler gave you already, you could also add those variables as constants to the application, for example:

var myApp= angular.module('my-awesome-app', ['ionic']);

myApp.constant(
    'settings', {
        'api_endpoint': 'https://api.yourdomain.com',
        'api_key': 'YOUR_API_KEY'
    }
);

myApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function(settings) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }

        console.log('API Endpoint: '+settings.api_endpoint);
    });
});

It is even possible to save the myApp.constant() to a separate file and for example let Gulp search and replace the settings per environment.

#4

@bengtler and @markdark Both are nice solutions
these give me some ideas.
And I did this in separate file.

var CONFIG = new (function() {
  var baseUrl = "http://localhost:8080"
  this.getBaseUrl = function() {
     return baseUrl;
  };
})();

Hopefully I can differentiate the environment by Gulp search as @markdark have said

Thanks so much guys, I am appreciated :smile: