How to realize internationalization of the project with angular and translate _angularjs

Objective

The first version of the H5 project has been launched, say that there is a second phase of the first issue, this should not be prepared for the second phase, the boss said the first thing to use angular JS to achieve the internationalization of the project and subsequent to the use of this framework to achieve other functions, well, I mean, I haven't had 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 anything, I also volunteered to say to me, because the end of it, also nothing, not anxious not busy, a day is also happy, not to find some things to do, but also in the process of doing can learn things, why not it! Angular has been in vogue for a while, but please forgive my experience, always think that angular belongs to Microsoft, the result .... You know, don't say, back to the topic.

Topic

Found the official website about the angular API, see its latest version is 1.3.9, there seems to be more than this version, does not matter, as long as it does not affect the implementation of OK, download the package has an international folder but there is no API, at this time the first thought of going to GitHub to see, sure enough, search " Angular translate "can, fortunately, English is also basic clearance, the key moment to find something is very helpful. Next step, take a look, don't worry, from the bottom up.

First step

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

Second Step

We began to use the open angular mode.

"First attempt"

The above we want to translate hello into Chinese hello, the result is nothing, not wrong, is not very magical.

"Note" Hello must be given as a string, or you will not get what you expect. That's the right thing to write. {{"Hello" | translate}}

The output is as follows:

"Second 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 this result is not very satisfactory.

Our scenario is this: we have JSON files that store various languages, when the page loads, get the user's language, load the JSON file, which stores the key-value pairs, the corresponding Chinese-English and English-Chinese, If you get the language you are using in English, you will translate 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 get, continue to do Bai.

Find the Loader-static-files script in the Translate source download package and introduce the file

Test the code as follows:

In the above, "prefix" is the JSON folder directory for the storage language, and "suffix" is the filename extension for the file we need to request. and "$translateProvider. Preferredlanguage (' en-us ')" is a JSON file called "en-us" under the il8n folder.

Next we run to try, rub, ni, give me the original string output, good translation into Chinese?

Again look, rub, unexpectedly did not find ZH-CN JSON file, the following figure! This question a bit diao, at first I thought is the folder name "il8n" in "L" writes "1".

You cannot request a JSON file, you must add a mapping, and adding a mapping to JSON in VS 2013 Express requires the following actions:

(1) via command line to C:\Program Files (x86) \iis Express folder

(2) Continue command line: Appcmd set config/section:staticcontent/+[fileextension= '. Json ', mimetype= ' Application/json '

Of course, if you publish in local IIS, simply add mappings to mime and configure them in the application configuration program.

The final translation success is as follows:

"Third upgrade final version"

Make such a boss should be satisfied with it, hurriedly delighted the eldest brother called over the success Ah, NI, finally finished, good, want is this effect, very good, but ... Thinking that you are not satisfied with this or not, the result was picked to stab.

Nagging topic: As shown above, {{"Hello" | translate}}, so binding, if the page load quickly, 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 already thought of, so binding will appear he worried about that problem, I was selling a little bit of it, loading force is also possible. With "Ng-bind" solution is not OK. There is already a number in mind, 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>, Yi, seemingly wrong, if the display of HTML content, what to do, the powerful IDE "vs" Smart tips, Shows [ng-bind-html], a more satisfactory analysis. Try it now.

The changes are as follows:

The result is wrong, see the error is obviously the grammar is wrong, try the following

 
"Note" After adding this script file, you want to rely on this script file in the module. As follows:
 
var app = angular.module("app", ['pascalprecht.translate', 'ngSanitize']);
 
In turn, we convert the Chinese to try to make the following changes
 

   

 
    
 
     
$translateProvider. Preferredlanguage (' en-us ');
 

      

 
       
 
        
 <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
 
The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, if there are questions you can message exchange, but also hope that a lot of support cloud Habitat community!