[Angularjs] Internationalization

Write in front

In the project, useful to internationalization, followed by understanding the use of ANGULARJS implementation of internationalization, here to do a record.

Series Articles

[Angularjs]ng-select and Ng-options

[Angularjs]ng-show and Ng-hide

[Angularjs] View and Route (i)

[Angularjs] View and Routing (ii)

[Angularjs] views and routes (iii)

[Angularjs] views and routes (iv)

[Angularjs]ng-class,ng-class-even,ng-class-odd

[Angularjs] page of one-page application

An example

Here we need to introduce angular-translate.min.js, which can be downloaded from here: http://angular-translate.github.io/

Here, by adding a language parameter to the route, the parameter is obtained by $routeparams, which determines whether to use Chinese or English.

Single page page

<! DOCTYPE html>varApp = Angular.module (' app ', [' Ngroute ', ' pascalprecht.translate ']); App. Config ([' $routeProvider ',function($routeProvider) {//This specifies the route$routeProvider. When ('/login/:lang ', {templateurl:'./views/login.html ', Controller:' Logincontroller '                })        }]); App. Config (function($translateProvider) {$translateProvider. Translations (' En ', {TITLE:' Login ', UserName:' UserName ', PWD:' Password ', Button_login:' Login ', Button_cancel:' Cancel ', Pleasemobile:' Please input your mobile No. ', Pwd_tips:' Please input your password '            }); $translateProvider. Translations (' CN ', {TITLE:Login, UserName:' User name ', PWD:Password, Button_login:Login, Button_cancel:Cancel, Pleasemobile:' Please enter the registered mobile number ', Pwd_tips:' Please enter your password '            }); //Default Language$translateProvider. Preferredlanguage (' CN ');        }); //ControllerApp.controller (' Logincontroller ',function($scope, $translate, $routeParams) {Console.log ($routeParams. lang);
            //Get route parameters via $routeparams, i.e. language varLanguage =$routeParams. Lang;        //Convert language version $translate. Use (language);    }); </script>   <!--View Placeholder--<div ng-view></div></body>
View:Login.html
<formID= "Login-form"class= "Login-form">    <Divclass= "Cartoon">        <DivID= "Handleft"class= "Hand-left">            <Divclass= "Hand"></Div>        </Div>        <DivID= "Handright"class= "Hand-right">            <Divclass= "Hand"></Div>        </Div>    </Div>    <Divclass= "It-text-list it-box">        <Divclass= "It-label">{"UserName" | translate}}</Div>        <Divclass= "It-input">            <inputtype= "text"placeholder= ' {' Pleasemobile ' |Translate}} ' Name= "Phonenum"ID= "Phonenum">        </Div>    </Div>    <Divclass= "It-text-list it-text-bottom it-box">        <Divclass= "It-label">{"PWD" | translate}}</Div>        <Divclass= "It-input">            <inputtype= "Password"placeholder= ' {' Pwd_tips ' |Translate}} ' Name= "Password"ID= "Password">        </Div>    </Div></form><Divclass= "Cn-buttons">    <Divclass= "button bt-red">{"Button_login" | translate}}</Div></Div><Divclass= "Cn-buttons">    <Divclass= "button Bt-white">{"Button_cancel" | translate}}</Div></Div>
Test
English: http://localhost:18174/1_4_route.html#/Login/en
English: HTTP://LOCALHOST:18174/1_4_ROUTE.HTML#/LOGIN/CN
Summarize
In the use of internationalization, check some information, complete demo or very little, groping, plus practice, there is this article.
[Angularjs] Internationalization