这是这个demo的目录结构，总共有两个文件：locale-chinese.json和translation11.html

locale-chinese.json文件的内容是：

{

  "beauty":"漂亮的",

  "ugly":"丑陋的",

  "people":"人民"

}

translation11.html的代码如下：

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <meta charset="UTF-8">

     <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.16.0/angular-translate.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.16.0/angular-translate-interpolation-messageformat.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.16.0/angular-translate-storage-cookie.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.16.0/angular-translate-storage-local.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.16.0/angular-translate-loader-url.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.16.0/angular-translate-loader-static-files.js"></script>

     <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.16.0/angular-translate-handler-log.js"></script>

 </head>

     <script>

         angular.module('myApp',['ngCookies', 'pascalprecht.translate'])

             .config(['$translateProvider',function ($translateProvider) {

                 //加载json文件：$translateProvider.useStaticFilesLoader()这个方法非常重要：

                 $translateProvider.useStaticFilesLoader({

                     prefix:'locale-',

                     suffix:'.json'

                 });

                 //load chinese table on start up:

                 $translateProvider.preferredLanguage('chinese');

             }])

             .controller('myCtrl',['$translate','$scope',function ($translate,$scope) {

                 $scope.changeLanguage=function (langKey) {

                     $translate.use(langKey);

                 }

             }]);

     </script>

     <div ng-app="myApp" ng-controller="myCtrl">

         <h1 translate="beauty"></h1>

         <h1 translate="ugly"></h1>

         <h1 translate="people"></h1>

     </div>

 </body>

 </html>

运行结果如下：

angular-translate加载.json文件进行翻译的更多相关文章

  1. 【.NET】VS 本地调试 无法加载Json文件

    1.如果要是发布到iis,还加载不出来,那就要配置一下MIME类型: 2.本地调试时,无法加载json文件: 解决方案: 在web.config中添加如下配置:mimeMap <system.w ...

  2. IIS加载JSON文件 错误 404

    问题描述 在发布项目的时候,有一些文件是json文件,在网页中进行加载,但是在IIS7发布的时候,json文件居然是404,无法找到,在URL上输入地址也一样. 错误原因 IIS内部机制,不支持直接访 ...

  3. Vue加载json文件

    一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json ...

  4. python加载json文件

    主要是加载进来,之后就没难度了 import json path = 'predict2.json' file = open(path, "rb") fileJson = json ...

  5. 从html加载json文件想起

    原文来自:https://www.cnblogs.com/dibaosong/p/4572274.html#top 文中给出了data.json文件内容 还给出了html文件内容 ok. 1.新建工程 ...

  6. 如何在 .NET MAUI 中加载 json 文件？

    引言: 按core传统方式添加 AddJsonFile("appsettings.json") 在windows平台和ssr工作正常,但是在 ios 和 android 无法用这种 ...

  7. 加载json文件没显示图片

    IOS 9新特性要求App内访问的网络必须使用HTTPS协议. 但是现在公司的项目使用的是HTTP协议,使用私有加密方式保证数据安全.现在也不能马上改成HTTPS协议传输. 以下解决办法: 在info ...

  8. THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...

  9. VS2013无法加载JSON格式

    js中通过$.getJSON加载.json 文件时,报如下错误: 解决方案:dos命令中打开 IIS Express  ,执行如下命令: appcmd set config /section:stat ...

随机推荐

  1. 匈牙利算法模板 hdu 1150 Machine Schedule（二分匹配）

    二分图:https://blog.csdn.net/c20180630/article/details/70175814 https://blog.csdn.net/flynn_curry/artic ...

  2. Educational Codeforces Round 47 (Rated for Div. 2) ：C. Annoying Present（等差求和）

    题目链接:http://codeforces.com/contest/1009/problem/C 解题心得: 题意就是一个初始全为0长度为n的数列,m此操作,每次给你两个数x.d,你需要在数列中选一 ...

  3. SET UPDATE TASK LOCAL (ローカル更新 )

    ローカル更新では.更新プログラムは要求を処理したのと同じワークプロセスによって実行されます.ダイアログユーザは更新が終了するまで待ってから追加データを入力しなければなりません.データベースへのアクセス ...

  4. 前端面试题目汇总摘录（HTML 和 CSS篇）

    温故而知新,保持空杯心态 HTML 和 CSS 你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么 浏览器名称 内核 IE trident Firefox(火狐) gecko Safari we ...

  5. python2.7入门---元组

        这次我们来学习下python中的元组.首先,基础认知点是,Python的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素, ...

  6. php curl 登陆百度贴吧（经历记录）

    这两天,因为公司需要,所以研究了一下百度文库的登陆方案.因为账号是购买的,只有一部分cookie值,所以不能通过正常的渠道登陆,所以只有通过curl模拟直接进行后台登陆.那么,问题来了.按照人家说的, ...

  7. LI 标签中让文章标题左对齐，日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

  8. Union-find 并查集

    解决问题 给一系列对点0~N-1的连接,判断某两个点p与q是否相连. private int[] id; // 判断p和q是否属于同一个连通分量 public boolean connected(in ...

  9. 区分Oracle的数据库，实例，服务名，SID

    文章摘自:http://www.zhetao.com/content240 感谢分享O(∩_∩)O~ 在实际的开发应用中,关于Oracle数据库,经常听见有人说建立一个数据库,建立一个Instance ...

  10. vs2015-Cordova开发安卓应用环境搭建

    之前看到过用html5+css+js就可以开发跨平台的应用,然后发现vs2015里就有个Cordova项目所以就想试试,但并不是这么顺利.刚开始对安卓环境一点也不了解,就到处百度搜索.终于成功了. 首 ...