zoukankan      html  css  js  c++  java
  • angular.js国际化模块

    最近需要将一个项目转化成英文的, 于是发现一个angular模块angular-translate,实现如下:

    1.安装包

    bower install angular-translate
    bower install angular-translate-loader-static-files
    //然后在页面引用进去
    <script src="/angular-translate.min.js"></script>
    <script src="/angular-translate-loader-static-files.min.js"></script>
    //路径依据项目路径来

    2.新建一个文件夹,里面新建两个文件en.json和cn.json

    en.json文件内容如下

    {"100001":"Login","100002":"Register"}

    cn.json文件内容如下

    {"100001":"登录","100002":"注册"}

    3.接下来要注入依赖,在config文件夹下面,新建一个translate.config.js文件

    (function(angular) {
      "use strict";
      angular.module("app")  // angular.module('app', ['pascalprecht.translate'])注意区别,这样写是错误的,
    .config(['$translateProvider',function($translateProvider){
    var lang = window.localStorage.lang || 'cn'
    $translateProvider.preferredLanguage(lang)
    $translateProvider.useStaticFilesLoader({
    prefix:
    '/i18n/', //指定文件前缀
    suffix:
    '.json' //指定文件后缀
    })
    }])
    })(angular);

    4.在页面中使用

    <select ng-model="cur_lang" ng-change="vm.userInfo.switching(cur_lang)">
          <option value="en">English</option>
          <option value="cn">简体中文</option>
    </select>
        function switching(lang) {
          $translate.use(lang)
          window.localStorage.lang = lang
          window.location.reload()
      }
        $scope.cur_lang = $translate.use();

    5.新建一个filters文件夹,里面新建一个T.js

    (function(angular){
      angular.module('app.filters').filter("T",['$translate',function($translate){
        return function(key){
          if(key){
            return $translate.instant(key)
          }
        }
      }])
    })(angular)

    6.在页面应用时候如下:

    <li class="m on"><a ui-sref="main.home">{{'100001'|T}}</a></li>

    然后就OK了

  • 相关阅读:
    lix
    docker-desktop: error during connect
    安装Docker Desktop报错WSL 2 installation is incomplete.
    索引二倒排索引和正排索引
    公众号资料分享
    docker使用物理机gpu运行模型
    使用arthas定位java问题
    pytorch设置gpu
    pytorch模型初始化
    【转】OpenGL图形渲染管线、VBO、VAO、EBO、 TBO概念及用例
  • 原文地址:https://www.cnblogs.com/alhh/p/8421142.html
Copyright © 2011-2022 走看看