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了

  • 相关阅读:
    linux设备驱动第五篇:驱动中的并发与竟态
    chromium浏览器开发系列第二篇:如何编译最新chromium源码
    你所不知道的html5与html中的那些事(二)
    vim 高级使用技巧第二篇
    FFMPEG高级编程第一篇:环境搭建及编译
    android apk 防止反编译技术第一篇-加壳技术
    你所不知道的html5与html中的那些事(一)
    交通视频
    Git命令----放弃本地修改使用服务器上的代码
    IE10(去掉文本框的X)
  • 原文地址:https://www.cnblogs.com/alhh/p/8421142.html
Copyright © 2011-2022 走看看