Internationalization of projects with angular combined with translate

Objective

Using the first version of the H5 project has been launched, saying that there is the first phase of the second phase, this does not prepare for the second phase, the eldest brother said the first thing to use angular JS to achieve the internationalization of the project and follow-up to use this framework to achieve other functions, okay, I mean, not much contact, This week oneself also to angular basic usage already had the preliminary understanding and the familiar, thus had this article to produce. In fact, I do not have any matter, I am also active volunteered said to me, because the end of the well, there is no matter, not urgent not busy, a day also happy, not to find something to do, but also in the process can learn something, why not! Angular has been popular for a while, but please forgive me, I have always thought that angular belongs to Microsoft, the result .... You know, don't say, back to the topic.

Topic

Find the official website about angular API, look at its latest version is 1.3.9, there seems to be a higher than this version, do not matter, as long as not affect the implementation of OK, download the package there is an international folder but no API, at this time the first thought to go to GitHub to see, sure enough, search " Angular translate "Can, fortunately, English is still basic clearance, the key moment to find something is very helpful." The following step by step, don't worry, easy-to-digest.

The first step

Two script files are essential, I like to use compression, see personal hobbies, Angular.min.js,angular-translate.min.js

Step Two

We started using the angular mode.

"First attempt"

varApp = Angular.module ("app", [' Pascalprecht.translate ']); App. Config ([' $translateProvider ',function($translateProvider) {$translateProvider. Translations (' ZH-CN ', {                ' Hello ': ' Hello ',            }); $translateProvider. Preferredlanguage (' ZH-CN ');    }]); </script>
We have to translate hello into Chinese hello, the result is nothing, not wrong, is not very magical.

 
 

  
  
 
   
"Note" Hello must be given as a string, otherwise you will not get what you expect. That's right. {"Hello" | translate}}
 
  
 
 
The output is as follows:
"Second-time improvement"
The above is just a simple start, the boss came to see, good preliminary to get the results I want, our project will achieve such results, but the results are not very satisfactory.
Our scenario is this: we have a JSON file to store various languages, when the page loads, get the user's language, load the JSON file, which is stored in the key value pairs, respectively, the corresponding Chinese-"English and English-" Chinese, If the user's language is in English, you will translate the Chinese into English. And vice versa, well, the original is to put the translation of the key value pairs in the JSON file, then load the file does not have to continue to do.

 
 

  
  
 
   
Locate the Loader-static-files script in the Translate source download package and introduce the file
 
  
 
 
Test the code as follows:
varApp = Angular.module ("app", [' Pascalprecht.translate ']); App. Config ([' $translateProvider ',function($translateProvider) {$translateProvider. Usestaticfilesloader ({prefix:'/il8n/', suffix:'. JSON '            }); $translateProvider. Preferredlanguage (' En-US ');    }]); </script>
In the above "prefix" is the JSON folder directory of the storage language, "suffix" is the extension of the file we need to request is JSON. The "$translateProvider. Preferredlanguage (' en-us ')" is a JSON file called "en-us" under the il8n folder.
Then we run to try, wipe, and then, give me the original string output, a good translation into Chinese?
Another look, wipe, unexpectedly did not find ZH-CN json file, such as! The question is a little bit, and at first I thought it was the "L" in the folder Name "il8n" written as "1".

 
  

  
   
 
    
The   Original is unable to request the JSON file, must add the mapping, in the VS Express to add the JSON mapping need to do the following:
 
    
(1) \iis Express folder via command line to C:\Program Files (x86)
 
    
(2) Continue command line: Appcmd set config/section:staticcontent/+[fileextension= '. Json ', mimetype= ' Application/json ']
 
   
 
  
Of course if it is published in local IIS simply add the mapping in MIME and configure it in the application configuration program.
The final translation succeeds as follows:
"Third upgrade Ultimate Version"
To make such a boss should be satisfied with it, hurriedly pleased to be the eldest brother called over to finish Ah,, and finally finished, good, want is this effect, very good, but ... Thinking that you are not satisfied with this or not, the result was picked up to the Thorn.
Picky topic: As shown above, {{"Hello" | translate}}, so bound, if the page loading is fast, if the load is slow, then the template to show out, too ugly, you think there is no way to circumvent this behavior. Haha, in fact, I have thought of, so the binding will appear he worried about that problem, I just sell a Xiaoguanzi only, loading force is also possible. With "Ng-bind" solve not OK. The heart already has the number, to continue to walk you.
Analysis: [Ng-bind] can only be bound in the attributes of the element, such as <span ng-bind= "text" ></SPAN>, gee, it seems wrong, if the HTML content, then what to do, the powerful IDE "vs" Smart hints, Shows a more satisfactory analysis of [ng-bind-html]. Try it now.
Change to the following:
The result is an error, it is obvious that the grammar is wrong, try the following
This is not the case, but it is not a grammatical problem, as shown in:
You may also see the following error:

 
    

  
     
 
      
[$SCE: unsafe] Attempting to use an unsafe value in a safe context
 
     
 
    
The result is to add a "angular-sanitize.min.js" script file and rely on it. Continue to add this script file to see. Results as I expected.

 
    

  
     
 
      
Note: After adding this script file, you will need to rely on this script file in the module. As follows:
 
      
var app = Angular.module ("app", [' pascalprecht.translate ', ' ngsanitize ');
 
     
 
    
We turn the Chinese into a try and make the following changes
$translateProvider. Preferredlanguage (' en-us '); 
The results were clearly successful, as follows:
Summarize
The use of "ng-bind-html" to translate a language using angular for internationalization is nearly perfect, and will not be like using the "{{}}" pattern, which causes the page to be too ugly when the page loads slowly. But the use of "ng-bind-html" is still a bit of a problem, when the refresh always has a switching process, such as from the Chinese "Hello" switch to English "Hello", so that you can see, temporarily did not think of a better solution, looking forward to your better solution. The entire conversion process must refer to the following four script files.
    <script src= "~/scripts/angular.min.js" ></script>    <script src= "~/scripts/ Angular-translate.min.js "></script>    <script src=" ~/scripts/loader-static-files.js "></ script>    <script src= "~/scripts/angular-sanitize.min.js" ></script>
Resources
"Translate API": Translate API
"Translate new letter": Translate new letter
' Angular sanitize/ng-bind-html not working ': angular sanitize/ng-bind-html not working
"Translate download": Translate github
Internationalization of projects with angular combined with translate