写在前面

在项目中，有用到国际化，跟着就了解了下使用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获取该参数，决定是使用中文还是英文。

单页页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">

<head>

    <title>路由</title>

    <script src="JS/angular.min.js"></script>

    <script src="JS/angular-route.min.js"></script>

    <script src="JS/angular-translate.min.js"></script>

    <link href="Css/style.css" rel="stylesheet" />

    <script>

        var app = angular.module('app', ['ngRoute', 'pascalprecht.translate']);

        app.config(['$routeProvider', function ($routeProvider) {

            //这里指定路由

            $routeProvider

                .when('/Login/:lang', {

                    templateUrl: './views/Login.html',

                    controller: 'LoginController'

                })

        }]);

        app.config(function ($translateProvider) {

            $translateProvider.translations('en', {

                TITLE: 'Login',

                UserName: 'UserName',

                Pwd: 'Password',

                BUTTON_Login: 'Login',

                BUTTON_Cancel: 'Cancel',

                PleaseMobile: 'Please input your mobile No.',

                Pwd_tips: 'Please input your password'

            });

            $translateProvider.translations('cn', {

                TITLE: '登录',

                UserName: '用户名',

                Pwd: '密码',

                BUTTON_Login: '登录',

                BUTTON_Cancel: '取消',

                PleaseMobile: '请输入注册手机号',

                Pwd_tips: '请输入密码'

            });

            //默认语言

            $translateProvider.preferredLanguage('cn');

        });

        //控制器

        app.controller('LoginController', function ($scope, $translate, $routeParams) {

            console.log($routeParams.lang);
            //通过$routeParams获取路由参数，也就是语言

            var language = $routeParams.lang;

            //转换语言版本

            $translate.use(language);

        });

    </script>

</head>

<body>

    <a href="#/Login/en">登录</a>
    <!--视图 占位-->

    <div ng-view></div>

</body>

</html>

View：Login.html

<form id="login-form" class="login-form">

    <div class="cartoon">

        <div id="handLeft" class="hand-left">

            <div class="hand"></div>

        </div>

        <div id="handRight" class="hand-right">

            <div class="hand"></div>

        </div>

    </div>

    <div class="it-text-list it-box">

        <div class="it-label">{{"UserName"| translate}}</div>

        <div class="it-input">

            <input type="text" placeholder='{{"PleaseMobile"| translate}}' name="phoneNum" id="phoneNum">

        </div>

    </div>

    <div class="it-text-list it-text-bottom it-box">

        <div class="it-label">{{"Pwd"| translate}}</div>

        <div class="it-input">

            <input type="password" placeholder='{{"Pwd_tips"| translate}}' name="password" id="password">

        </div>

    </div>

</form>

<div class="cn-buttons">

    <div class="button bt-red">{{"BUTTON_Login"| translate}}</div>

</div>

<div class="cn-buttons">

    <div class="button bt-white">{{"BUTTON_Cancel"| translate}}</div>

</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. 10Mybatis_mybatis和hibernate本质区别和应用场景

    hibernate:是一个标准的ORM框架(对象关系映射).入门门槛较高,不需要程序写sql语句,sql语句自动生产了. 对sql的优化比较困难. 应用场景:适用与需求变化不多的中小型项目中,比如后台 ...

  2. IBatis.net介绍

    IBatis.net介绍 IBatis.net 是2001年发起的开源项目,它是一个轻量级的ORM框架,现在IBatisNET已经是属于Apache下的一个子项目了,最新版本是1.6.2. 官方网站: ...

  3. JS调用Silverlight方法拾遗

    在最近做的物联网项目中,需要利用封装过的Silverlight刻度控件显示温度,湿度,二氧化碳浓度等值.由于最新的数据是通过js ajax获取的,所以需要把这些数据传递给silverlight显示,这 ...

  4. ThinkPHP项目CMS内容管理系统开发视频教程【20课】（3.02GB）

    ThinkPHP背景介绍:     ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业级应用开发而诞生的. ...

  5. node-webkit 写桌面系统

    [1.使用nodejs] 和很多人一样,百度了很久很久,没看到有恰到点的解释的,当时我已经怀疑到是配置出来的,而非引js,最后确实啥都不用引 实际关键在package.json加入设置"no ...

  6. 网络封包分析工具Charles使用

    网址:http://www.charlesproxy.com/ 截取网络封包的工具. 简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议, ...

  7. 学习笔记——Maven实战（九）打包的技巧

    “打包“这个词听起来比较土,比较正式的说法应该是”构建项目软件包“,具体说就是将项目中的各种文件,比如源代码.编译生成的字节码.配置文件.文档,按照规范的格式生成归档,最常见的当然就是JAR包和WAR ...

  8. QRadioButton分组且无边框的简单实现

    最近在用QT+VS2008做一个项目,涉及到一个综合测评表,说白了有点像问卷调查——很多题目每题若干个选项. 初始时打算用下拉框,每个框中填入所有选项,但后来一琢磨这种方式不够直观与人性化,增添了一步 ...

  9. C# JArray与JObject 的使用 json [{}]

    C# JArray与JObject 的使用 STEP1.using Newtonsoft.Json.Linq; STEP2 如何获取json里的某个属性(节点)值,对其删改,新增 //2.1 数组用J ...

  10. 2016 版 Laravel 系列入门教程（四）【最适合中国人的 Laravel 教程】

    本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本篇文章中,我将跟大家一起实现 Article ...