AngularJS 1.x 国际化——Angular-translate例子
可运行代码如下:
<!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.js"></script> </head> <body> <div> <h1>{{ 'Hello' | translate }}</h1> <span translate='what? A dog.'></span> </div> <script type="text/javascript"> var app = angular.module("MyApp",['pascalprecht.translate']); app.config(['$translateProvider',function($translateProvider){ $translateProvider.translations('en',{ 'Hello':'Hello', 'what? A dog.':'what? A dog.' }); $translateProvider.translations('zh',{ 'Hello':'你好', 'what? A dog.':'神马?这是一只旺财!' }); $translateProvider.preferredLanguage('zh'); }]); </script> </body> </html>
注意:使用translate的两种常见方式,
- Create a
pipe
that we can use to translate our words in the HTML view. Like this:
<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>
- Create a
service
that we can use to translate our words in JS / Typescript. Like this:
...
// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); // this.translate is our translate service
...
第二种方式方便直接在ts文件中使用!不过翻译的东西依然是在
$translateProvider.translations
里!
参考:https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1