angular国际化angular-translate中语言包的两种形式

最近用angular做项目的国际化，鉴于我只是个小菜鸟，所以就去谷歌百度看看，结果。。。。。。。。。。。。。。。，千篇一律，基本大部分博客都是完完全全抄袭另一个博客的，吐血。。。，所以就来总结一下，希望有所帮助

angular有一个组件式专门做国际化的，angular-translate，用法如下：

1.先下载这个组件，然后再引入angular之后引入组件

2.在angular模块的config函数里面定义：

var soccer=angular.module('soccer',['pascalprecht.translate']);//声明angular模块名

//国际化配置
soccer.config(['$translateProvider',function($translateProvider){
  $translateProvider.translations('en-us',{
    'TITLE':'Hello',
    'FOO':'This is a paragraph'
  });

  $translateProvider.translations('zh-tw',{
    'TITLE':'繁体你好',
    'FOO':'繁体你好啊'
  });

  $translateProvider.translations('zh-cn',{
    'TITLE':'你好',
    'FOO':'这是一幅图'
  });

  $translateProvider.preferredLanguage('zh-cn');//默认的语言
}]);

在控制器里面修改语言的方法：

先再控制器里面注入$translate服务，然后使用方法：

$translate.use(Lang);//选择显示什么语言,lang对应的是某个语言的键

这样国际化就完成了，这种方法就是我吐槽的百度谷歌找到的，一堆都是这个方法，都是复制粘贴，其实这样个样子不符合我们

实际使用，我们并不希望语言包内嵌在我们的js代码中，我们希望每个语言包是一个独立的文件，而且不污染全局命名空间

接下来介绍第二种方法，项目常用方法：

2.1 这个方法还要依赖多一个组件，angular-translate-loader-static-files,而且在angular后面引入，代码如下：

//国际化配置
soccer.config(['$translateProvider',function($translateProvider){
  $translateProvider.useStaticFilesLoader({
    files: [{
      prefix: '/Content/Soccer/js/i18n/',//语言包路径
      suffix: '.json'   //语言包后缀名
    }]
  });
  //默认加载的语言包
  $translateProvider.fallbackLanguage('en-us');//默认加载语言包
}]);

在控制器里改变语言的方法和第一种方法一样。

ps:上面这个只是最基本的应用，还有很多功能，比如插入变量，异步加载数据包，记住语言等，这里是angular-translate的官方文档地址：http://angular-translate.github.io/docs/en/#/guide/00_installation，而且还可以选择语言，有兴趣的小伙伴可以自己去折腾折腾