angular 多语言

最新推荐文章于 2020-12-31 11:47:52 发布

VIP文章 Irene-li

最新推荐文章于 2020-12-31 11:47:52 发布

阅读量1.3k

点赞数 1

分类专栏： angularjs 前端文章标签： angular translate 多语言

本文链接：https://blog.csdn.net/qq_37109741/article/details/78671153

版权

Quick Start

Install module

Via Bower

$ bower install angular
$ bower install angular-translate
$ bower install angular-translate-loader-static-files

Via Npm

$ npm install --save-dev angular
$ npm install --save-dev angular-translate

Via bower.json || package.json

## bower install || npm install

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "irene",
  "license": "ISC",
  "devDependencies": {
    "angular": "^1.6.7",
    "angular-translate": "^2.16.0",
    "angular-translate-loader-static-files": "^2.16.0"
  }
}

文件夹结构

app

html
- app.html
js
- app.js
i18n
- language-cn.json
- language-en.json
node_modules
- angular
- angular-translate
- angular-translate-loader-static-files
package.json

Getting Started

1. app.html

<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>i18n app</title>

    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-translate/dist/angular-translate.min.js"></script>
    <script src="../node_modules/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
    <script src="../js/app.js"></script>
</head>

<body ng-controller="appController as app">

<ul>
    <li ng-repeat="(key, name) in app.languageChoice">
        <a href="javascript:void(0)" ng-click="app.chooseLanguage(key)" ng-bind="name"></a>
    </li>
</ul>

<hr/>

<div translate>hello</div>

<hr/>

<!-- 不同的调用方式 -->
<div translate>test_language</div>
<div translate="test_language"></div>
<<