zoukankan      html  css  js  c++  java
  • 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的两种常见方式,

    1. 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>
    1. 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

  • 相关阅读:
    python的函数修饰符(装饰器)
    hdu1175连连看(dfs+细节)
    hdu2553N皇后问题(dfs,八皇后)
    hdu1045Fire Net(经典dfs)
    hdu1050Moving Tables(贪心)
    hdu2037今年暑假不AC(贪心,活动安排问题)
    hdu1052Tian Ji -- The Horse Racing(贪心,细节多)
    hdu1009FatMouse' Trade(贪心)
    hdu1455Sticks(经典dfs+剪枝)
    hdu2509Be the Winner(反nim博弈)
  • 原文地址:https://www.cnblogs.com/bonelee/p/6874803.html
Copyright © 2011-2022 走看看