写在前面

在项目中，有用到国际化，跟着就了解了下使用angularjs实现的国际化，这里做一下记录。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由（一）

[Angularjs]视图和路由（二）

[Angularjs]视图和路由（三）

[Angularjs]视图和路由（四）

[Angularjs]ng-class,ng-class-even,ng-class-odd

[Angularjs]单页应用之分页

一个例子

这里需要引入angular-translate.min.js，可以从这里进行下载：http://angular-translate.github.io/

这里通过在路由上面添加一个language的参数，通过$routeParams获取该参数，决定是使用中文还是英文。

单页页面

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
  3. <head>
  4.     <title>路由</title>
  5.     <script src="JS/angular.min.js"></script>
  6.     <script src="JS/angular-route.min.js"></script>
  7.     <script src="JS/angular-translate.min.js"></script>
  8.     <link href="Css/style.css" rel="stylesheet" />
  9.     <script>
  10.         var app = angular.module('app', ['ngRoute', 'pascalprecht.translate']);
  11.         app.config(['$routeProvider', function ($routeProvider) {
  12.             //这里指定路由
  13.             $routeProvider
  14.                 .when('/Login/:lang', {
  15.                     templateUrl: './views/Login.html',
  16.                     controller: 'LoginController'
  17.                 })
  18.         }]);
  19.         app.config(function ($translateProvider) {
  20.             $translateProvider.translations('en', {
  21.                 TITLE: 'Login',
  22.                 UserName: 'UserName',
  23.                 Pwd: 'Password',
  24.                 BUTTON_Login: 'Login',
  25.                 BUTTON_Cancel: 'Cancel',
  26.                 PleaseMobile: 'Please input your mobile No.',
  27.                 Pwd_tips: 'Please input your password'
  28.             });
  29.             $translateProvider.translations('cn', {
  30.                 TITLE: '登录',
  31.                 UserName: '用户名',
  32.                 Pwd: '密码',
  33.                 BUTTON_Login: '登录',
  34.                 BUTTON_Cancel: '取消',
  35.                 PleaseMobile: '请输入注册手机号',
  36.                 Pwd_tips: '请输入密码'
  37.             });
  38.             //默认语言
  39.             $translateProvider.preferredLanguage('cn');
  40.         });
  41.  
  42.         //控制器
  43.         app.controller('LoginController', function ($scope, $translate, $routeParams) {
  44.             console.log($routeParams.lang);
                //通过$routeParams获取路由参数，也就是语言
  45.             var language = $routeParams.lang;
  46.             //转换语言版本
  47.             $translate.use(language);
  48.         });
  49.     </script>
  50.  
  51. </head>
  52. <body>
  53.     <a href="#/Login/en">登录</a>
        <!--视图 占位-->
  54.     <div ng-view></div>
  55. </body>
  56. </html>

View：Login.html

  1. <form id="login-form" class="login-form">
  2.     <div class="cartoon">
  3.         <div id="handLeft" class="hand-left">
  4.             <div class="hand"></div>
  5.         </div>
  6.         <div id="handRight" class="hand-right">
  7.             <div class="hand"></div>
  8.         </div>
  9.     </div>
  10.     <div class="it-text-list it-box">
  11.         <div class="it-label">{{"UserName"| translate}}</div>
  12.         <div class="it-input">
  13.             <input type="text" placeholder='{{"PleaseMobile"| translate}}' name="phoneNum" id="phoneNum">
  14.         </div>
  15.     </div>
  16.     <div class="it-text-list it-text-bottom it-box">
  17.         <div class="it-label">{{"Pwd"| translate}}</div>
  18.         <div class="it-input">
  19.             <input type="password" placeholder='{{"Pwd_tips"| translate}}' name="password" id="password">
  20.         </div>
  21.     </div>
  22. </form>
  23. <div class="cn-buttons">
  24.     <div class="button bt-red">{{"BUTTON_Login"| translate}}</div>
  25. </div>
  26.  
  27. <div class="cn-buttons">
  28.     <div class="button bt-white">{{"BUTTON_Cancel"| translate}}</div>
  29. </div>

测试

英语：http://localhost:18174/1_4_route.html#/Login/en

中文：http://localhost:18174/1_4_route.html#/Login/cn

总结

在使用国际化的时候，查了一些资料，完整的demo还是挺少的，摸索，加实践，就有了这篇文章。

[Angularjs]国际化的更多相关文章

  1. AngularJS国际化配置

    AngularJS国际化配置 下载angular-translate 下载zip包:https://github.com/angular-translate/bower-angular-transla ...

  2. AngularJS 国际化——Angular-translate

    对于一个用户群面向全球的的应用来说,不得不考虑国际化的问题.当然,即便是刚刚起步的小应用,如果有心搞大,也应该提前设计国际化的方案. 本篇讲述使用AngularJS构建的应用的简单国际化方案,准确的说 ...

  3. AngularJS 技术总结

    学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南 常用链接 AngularJS API文档 AngularJS 用 ...

  4. [Angularjs]系列——学习与实践

    写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...

  5. [Angularjs]ng-repeat中使用ng-model遇到的问题

    写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...

  6. [Angularjs]ng-file-upload上传文件

    写在前面 最近在弄文档库的H5版,就查找了下相关的上传组件,发现了ng-upload的东东,推荐给大家. 系列文章 [Angularjs]ng-select和ng-options [Angularjs ...

  7. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

  8. AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  9. [转]Ionic + AngularJS angular-translate 国际化本地化解决方案

    本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术 ...

随机推荐

  1. Wifi开发技术总结1

    摘要: 刚刚接触wifi开发的东西,用的模块是 ESP8266-12E. 资料很多,淘宝地址:https://item.taobao.com/item.htm?spm=a1z09.2.9.10.qGL ...

  2. 基于jquery实现拆分姓名的方法

    jquery拆分姓名处理程序如下,纯js实现的,感兴趣的朋友可以参考下哈,希望对你有所帮助 之前已经分享过一个在dom中用户输入姓名后自动用js拆分成姓与名到表单中的jquery插件,由于项目的需要, ...

  3. 中科院Oracle 10G 数据库系统培训视频教程（828MB ）

    中科院Oracle 10G 数据库系统培训视频教程(828MB  )第一章.安装及体系结构概述 Oracle数据库基础知识第二章.SQL*PLUS 基础.实例的创建启动与关闭第三章.SQL语言基础第四 ...

  4. jdbc 得到表结构、主键

    jdbc 得到表结构.主键 标签: jdbctablenullschema数据库mysql 2012-02-16 22:13 11889人阅读 评论(0) 收藏 举报  分类: Java(71)  假 ...

  5. IOS 应用生命周期

    *当第一次运行程序时候:(active)didFinishLaunchingWithOptions(加载完毕)->applicationDidBecomeActive(获取焦点)*当点击home ...

  6. IOS开发之—— model最原始的封装,MJExtension加入工程（后续model都继承于它）

    DMBasicDataModel.h #import <Foundation/Foundation.h> @interface DMBasicDataModel : NSObject - ...

  7. 20145215《Java程序设计》课程总结

    20145215<Java程序设计>课程总结 每周读书笔记链接汇总 20145215<Java程序设计>第一周学习总结 20145215<Java程序设计>第二周学 ...

  8. 自编基于jQuery实现分页插件

    $(function(){ }); /** * @params dataUrl:请求数据url地址 * @params countUrl:请求数据总数url地址 * @params pageSize: ...

  9. MongoDB查询并更新一粟

    //更新操作使用collection的Update方法,有泛型和非泛型两个版本: //其签名如下(列出了两个简单并常用的的重载,还有几个): public virtual WriteConcernRe ...

  10. HTML5——同步购物车

    同步购物车,及打开两个或多个界面,选择购物时同步,让显示的内容一致,这样不至于购买出错. 核心:利用storage事件和localStorage本地存储实现 图片简单展示: <!DOCTYPE ...