How do I indicate which language to render in the browser using l20n.js?
By default, L20n uses the browser's language settings to determine which locale to show to the user. I'm guessing that your browser has 'en' or 'en-US' in the language setting somewhere. You can preview your setting by opening the developer console (Ctrl+Shift+K in Firefox, Ctrl+Shift+J in Chrome) and typing navigator.language or (in newer versions of Firefox) navigator.languages.
In Firefox, you can change your language preferences by going into about:preferences#content, and clicking 'Choose' under 'Languages'. In Chrome, there is a similar panel in the Settings, but it actually doesn't modify the navigator.language property, which is a known bug. You'll need to download and install a French version of Chrome if you want to test this way.
An alternative is to use the L20n API and explicitly change the language with:
document.l10n.requestLanguages(['fr']);This is useful if you want to provide a piece of UI to let your users change the language of the app. For instance, you could have a drop-down menu with all languages that you support, which calls document.l10n.requestLanguages when a new option is selected.
Use the L20n JavaScript API requestLocales()
/index.html
<!DOCTYPE html><html lang="en-US"><head> <script src="jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> <script src="trackingController.js"></script> <script src="l20n.js"></script> <link rel="localization" href="locales/manifest.json"> <script type="text/javascript"> $('#langSwitch-en').click(function() { document.l10n.requestLocales('en-US'); }); $('#langSwitch-fr').click(function() { document.l10n.requestLocales('fr-FR'); }); </script></head><body><!-- fix the correct language code [-de] for [-fr] --> <a id="langSwitch-en" href="#">en</a> / <a id="langSwitch-fr" href="#">fr</a> <h2 data-l10n-id="name"></h2> <p data-l10n-id="instructions"></p></body></html>