How to pass a parameter to javascript file url before load?

Question

I'm using angularjs, and would like to inspect the url for a parameter lang=XX.

If found, my js call should replace the language parameter with the one found in the url:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?language=en"></script>

Is that possible?

I believe @Quentin misunderstood the question and closed it. Are you needing to find an 'Angular' way or just javascript? — Corey, Oct 30 '15 at 13:48
I'm looking for the angular way to extract the `lang` parameter from the calling url (in the browser), and load the gmaps api by locale. — membersound, Oct 30 '15 at 14:43

score 1 · Answer 1 · answered Oct 30 '15 at 15:04

This isn't an "Angular" way but does allow you to add a script to a page:

    var script=document.createElement('script');
    script.src='path-to-file.js';
    script.className='myscript';
    script.setAttribute('data-lang','en-US');
    document.body.appendChild(script);

score 1 · Accepted Answer · answered Oct 30 '15 at 17:59

There is an 'Angular' approach, however, I'm not sure how useful it is over a simple Javascript solution. Regardless, you can use the $location service to search the current URL. Assuming you have lang as your parameter, you would use $location.search().lang to return the value of lang (if it exists).

You would then create a service or factory to asynchronously load Google Maps using the language parameter. You will also need to supply a callback method. That callback method would be a promise. Here is sample factory:

app.factory('GMapsFactory', function($q, $window) {
    var _base = 'https://maps.googleapis.com/maps/api/js?language=';

    return {
        loadLocale: function(loc) {
            var _defer = $q.defer();
            var _tag = document.createElement('script');
            _tag.src = _base + loc + '&callback=gmLocaleCallback';

            $window.gmLocaleCallback = _defer.resolve;

            document.body.appendChild(_tag);

            return _defer.promise;
        }
    };
});

This is useful as a factory as it's portable from application to application. However, in a single application, it's useful once as you wouldn't call upon it multiple times.

Then, in your controller:

app.controller('MainCtrl', function($scope, $location, GMapsFactory) {
    var lang = $location.search().lang || 'en';

    GMapsFactory.loadLocale(lang).then(function() {
        console.log(google.maps);
    });
});

Unless you have a reason where you need to use Angular, the simple approach again would be plain javascript in your index:

// From SO solution: http://stackoverflow.com/a/901144/715597
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var _lang = getParameterByName('lang');
document.write('<script src="https://maps.googleapis.com/maps/api/js?language='+_lang+'">\x3C/script>');

How to pass a parameter to javascript file url before load?

2 Answers2