angular-translate

//index.config.js

  angular
    .module('app')
    .config(config);

  /** @ngInject */
  function config($logProvider, $translateProvider, $translatePartialLoaderProvider) {
    // Enable log
    $logProvider.debugEnabled(true);

    $translatePartialLoaderProvider.addPart('home');
    $translateProvider.useLoader('$translatePartialLoader', {
      urlTemplate: "app/i18n/{part}/{lang}.json"
    });
    $translateProvider.preferredLanguage('zh_cn').fallbackLanguage('en');

    $translateProvider.useMissingTranslationHandlerLog();

    $translateProvider.registerAvailableLanguageKeys(['zh_cn', 'en', 'zh_hant'], {
      'en_*': 'en',
      'zh_tw': 'zh_hant',
      'zh_hk': 'zh_hant'
    });

    $translateProvider.useSanitizeValueStrategy('escaped');
    $translateProvider.useCookieStorage();
  }
  
  // i18n/home/en.json
  {
    "TITLE": "home",
    "DESCRIPTION": "This is home page",
    "ITEM1": {
      "TITLE": "item1",
      "INFO": "this is item1"
    },
    "ITEM2": {
      "TITLE": "item2",
      "INFO": "this is item2"
    }
  }
  // i18n/home/zh_cn.json
  {
    "TITLE": "首页",
    "DESCRIPTION": "这是首页",
    "ITEM1": {
      "TITLE": "项目一",
      "INFO": "这是项目一"
    },
    "ITEM2": {
      "TITLE": "项目二",
      "INFO": "这是项目二"
    }
  }
  // home.controller.js
  /** @ngInject */
  function HomeController(homeData) {
    var vm = this;
    vm.items= [
      {
        title: 'ITEM1.TITLE',
        info: 'ITEM1.INFO'
      },
      {
        title: 'ITEM2.TITLE',
        info: 'ITEM2.INFO'
      }
    ];
  }
  // home.html
  <html>
    <head>
      <title data-translate="TITLE"></title>
    </head>
    <body>
      <div data-translate="DESCRIPTION"></div>
      <div data-ng-repeat="item in ::vm.items">
        <h3 data-translate="{{item.title}}"></h3>
        <p data-translate="{{item.info}}"></p>
      </div>
    </body>
  </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值