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

posted @   bonelee  阅读(3427)  评论(1)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示