Implement Globalization Using AngularJS

1. Detect browser language
   
   One can detect browser locale on client side only and request the server for that specific file. But due to diversity in browsers it’s always recommended to read language accepted by browser from the request coming to the server. So the server side code goes like this:
   
   1. ViewData["currentLocale"] = Request.UserLanguages[0];
   This is how it will look in debugger:
   
   
   
   This gives us the priority wise list of the locales accepted by the browser. We need to pick up only the top most priority locale and download corresponding file to the client’s machine. If the language of the browser is changed, on refreshing, the new locale file will be downloaded and formats will be changed accordingly.
   
   Make sure to put this code in a file that gets executed every time the application runs. Ideal file will be home controller.
   
   
2. Rendering the path
   
   1. <label id="lblLocaleFilePath" hidden>
   2. @Url.Content("~/Scripts/3rdParty/i18n/angular-locale_" + @ViewData["currentLocale"] + ".js")</label>
   There may be other ways, but I chose to keep a hidden label on master page and keep the rendered path in this label so that it is accessible to all pages. So fetch the local id from view data and append it to the file name. Now the label will contain the path of the local specific file required from the server.
   
   
3. Download locale file to client
   
   1. <script type="text/javascript">document.write("<script src=" + $("#lblLocaleFilePath").text() + "><\/script>");
   2. </script>
   Here value of label should be – ~/Scripts/3rdParty/i18n/angular-locale_en-US.js
   
   Again, I have added this code to my master file. We can check in developer’s tool that local specific file is downloaded to the client side.
   
   
4. Specify data types of the column/field
   
   The columns or fields that needs to get formatting should have proper data type defined. If we want a column to take number formatting then its data type should be defined as number. The following is a sample of a column from ui-grid:
   
   1. {name: Calculated value', displayName: Calculated value ', field: ‘CalculatedValue ', minWidth: 60, enableCellEdit: false, cellClass: 'right', cellFilter: 'number:2'}
   Notice the cell filter where I have defined the data type to be number of up to two decimal places.
   
   That’s all we need to do in order to apply local formatting to read only fields. Notice that we don’t need to call any formatting or un-formatting functions separately.

Sample

The following shows the formatting as per en-US locale:



Notice the group separator, decimal separator, currency symbol and date formatting.

Now let’s change the language accepted by the browser. For Internet Explorer, go to Internet options, then Languages. Move French (France) [fr-FR] to the top in the list. On refreshing the browser, formatting change as in the following table:



Notice the changed group separator, decimal separator, currency symbol and date formatting as per new locale.

Closing thoughts

Angular provides a generic solution to implement globalization. As you can see we need to write minimal code to turn the application to support diverse locales. No 3rd party file/support is required for basic formatting. Formatting editable fields require some extra steps for un-formatting the values, that I’ll cover in my next topic. That’s it for now. Hope this helps.