This is the directory structure of this demo with a total of two files: Locale-chinese.json and translation11.html
The content of the Locale-chinese.json file is:
{ "beauty":" beautiful ", " Ugly ":" ugly ", "people " :" people "}
The code for translation11.html is as follows:
1<!doctype html>234<meta charset="UTF-8">5<meta charset="UTF-8">6<script src="Https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>7<script src="Https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>8<script src="Https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>9<script src="Https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>Ten<script src="Https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script> One<script src="Https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.16.0/angular-translate.js"></script> A<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.16.0/ Angular-translate-interpolation-messageformat.js"></script> -<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.16.0/ Angular-translate-storage-cookie.js"></script> -<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.16.0/ Angular-translate-storage-local.js"></script> the<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.16.0/ Angular-translate-loader-url.js"></script> -<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.16.0/ Angular-translate-loader-static-files.js"></script> -<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.16.0/ Angular-translate-handler-log.js"></script> - +<script> -Angular.module ('myApp',['ngcookies','pascalprecht.translate']) +. config (['$translateProvider', Function ($translateProvider) { A //load JSON file: $translateProvider. Usestaticfilesloader () This method is very important: at $translateProvider. Usestaticfilesloader ({ -Prefix'locale-', -Suffix'. JSON' - }); - //load Chinese table on start: -$translateProvider. Preferredlanguage ('Chinese'); in }]) -. Controller ('Myctrl',['$translate','$scope', function ($translate, $scope) { to$scope. changelanguage=function (langkey) { + $translate. Use (Langkey); - } the }]); *</script> $<div ng-app="myApp"Ng-controller="Myctrl">Panax Notoginseng<H1 translate="Beauty"> -<H1 translate="Ugly"> the<H1 translate="people"> +</div> A</body> the +The results of the operation are as follows:
Angular-translate loading. json files for translation