Proper Angularjs way to use JSON maintain RESTful urls

Question

I am building an Angularjs web application by the books I guess you could say. I am following the John Papa Angular Styleguide and things have been going well so far. I now have a need to keep all of the RESTful host urls in some sort of configuration file in JSON format. These host endpoints change frequently depending on the client or change of AWS machines, so to keep all of the urls in one place could be beneficial for ease of change.

Currently in the javascript files in my application that deal with making the REST calls things are setup like this:

 function ModelViewService($http, $q, exception, logger) {
        var HOST = 'http://xxxxxxxxxxxxxxxxxx.amazonaws.com';
        var MODULE = '/modelview/service/rest';
        ...

And then when a call is made to get some data for example it looks like this:

    function getGroups() {
        return $http.get(HOST + MODULE + '/group/retrieveAll')
            .then(success)
            .catch(fail);
        ...

I then have other files with different services and different HOSTs so I basically want to house JSON objects somewhere that look like:

{
    'modelviewservice': {
        'HOST':  'http://xxxxxxxxxxxxxxxxxx.amazonaws.com',
        'MODULE': '/modelview/service/rest'
    },
    ... //other service
}

And then back in the javascript file do something like $http.get(config.modelviewservice.host + config.modelviewservice.MODULE + '/group/retrieveAll') .

I don't know the best way to achieve this and follow the angular style guide. I found something called requre.js that apparently would inject the config.json file into the javascript via something like var config = require('config.json')('./config.json'); where the first config.json refers to the config.json npm module, and the second ./config.json refers to my local configuration JSON file. This seemed like an ok solution but since I couldn't get it to work it had me second guessing if there was an easier or more proper way to do this.

Answer 1

Well, this is how I do it to make my endpoints organize. Add constant to main module of the application .

(function() {
    'use strict';

    angular
        .module('apiConstant', [])
        .constant('apiConstant', constant());

    function constant() {
        return {
            HOST: 'http://xxxxxxxxxxxxxxxxxx.amazonaws.com',
            modules: {
                MODULE_1: '/modelview/service/rest',
                MODULE_2: '/modelview/factory/rest',
                MODULE_3: '/modelview/sample/rest'
            },
            endpoints: {
                GET_GROUPS: '/group/retrieveAll',
                GET_USERS: '/users/retrieveAll',
                POST_GROUP: '/group/add'
            }
        };
    }
})();

And then in your service

function ModelViewService($http, $q, exception, logger, apiConstant) {
        var HOST = apiConstant.HOST;
        var MODULE = apiConstant.modules.MODULE_1;
        ...


function getGroups() {
        return $http.get(HOST + MODULE + apiConstant.endpoints.GET_GROUPS)
            .then(success)
            .catch(fail);
        ...