angular-translate

why_rookie 发布于2019-08-19 17:17 / 3467人阅读

//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

云服务器 GPU云服务器 angular-translate

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78370.html

$translatePartialLoader加载失败及解决方式

摘要：按照官网的说法，在中添加模块后必须刷新国际化数据，因此官方建议通过直接调用，或者监听所触发的事件并调用这两种方式来刷新数据。然而按照官网的写法这两者都是无效的。解决方式问题找到了，解决起来也简单，在初始化完毕后强制刷新一次即可，代码如下前言 $translatePartialLoader(以下简写为TPL)是angular-translate中的局部加载器，由于该加载器可以以模块为单...

lbool 2019-08-19 18:11 评论0 收藏0
前端通用国际化解决方案

摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

lingdududu 2019-08-20 15:46 评论0 收藏0
关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

摘要：关于的，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），cmd打开命令进入到随便一个目录底下： ng new a...

娣辩孩 2019-08-20 18:13 评论0 收藏0
关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

摘要：关于的，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），cmd打开命令进入到随便一个目录底下： ng new a...

alaege 2019-08-29 12:58 评论0 收藏0