angular-translate

2024年1月3日 129次阅读 来源: Doyle 
//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>
    原文作者：Doyle
    原文地址: https://segmentfault.com/a/1190000004217445
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞