// Including ngTranslate
angular.module("ngTranslate", ["ng"]).config(["$provide",
function(t) {
$TranslateProvider = function() {
var t, n = {};
this.translations = function(t, r) {
if (!t && !r) return n;
if (t && !r) {
if (angular.isString(t)) return n[t];
n = t
} else n[t] = r
}, this.uses = function(r) {
if (!r) return t;
if (!n[r]) throw Error("$translateProvider couldn't find translationTable for langKey: '" + r + "'");
t = r
}, this.$get = ["$interpolate", "$log",
function(r, a) {
return $translate = function(e, i) {
var l = t ? n[t][e] : n[e];
return l ? r(l)(i) : (a.warn("Translation for " + e + " doesn't exist"), e)
}, $translate.uses = function(n) {
return n ? (t = n, void 0) : t
}, $translate
}
]
}, t.provider("$translate", $TranslateProvider)
}
]), angular.module("ngTranslate").directive("translate", ["$filter", "$interpolate",
function(t, n) {
var r = t("translate");
return {
restrict: "A",
scope: !0,
link: function(t, a, e) {
e.$observe("translate", function(r) {
t.translationId = angular.equals(r, "") ? n(a.text())(t.$parent) : r
}), e.$observe("values", function(n) {
t.interpolateParams = n
}), t.$watch("translationId + interpolateParams", function() {
a.html(r(t.translationId, t.interpolateParams))
})
}
}
}
]), angular.module("ngTranslate").filter("translate", ["$parse", "$translate",
function(t, n) {
return function(r, a) {
return angular.isObject(a) || (a = t(a)()), n(r, a)
}
}
]);
// Configuring your module, asking for ngTranslate as dependency
var app = angular.module('myApp', ['ngTranslate']);
// Configuring $translateProvider
app.config(['$translateProvider',
function($translateProvider) {
// Simply register translation table as object hash
$translateProvider.translations('en_EN', {
'HEADLINE': 'Introducing ngTranslate',
'SUB_HEADLINE': 'Translations for your Angular Apps!',
'AUTHOR_NAME': 'Pascal Precht',
'GITHUB_LINK_TEXT': 'View source on GitHub',
'GETTING_STARTED_HEADLINE': 'Getting Started',
'HEADLINE_FILTER': 'ngTranslate::translateFilter',
'HEADLINE_USAGE': 'Usage:',
'HEADLINE_FILTER_DYN_VALUES': 'Translations with dynamic values',
'INFO_TEXT_TRANSLATE_FILTER': 'ngTranslate comes with a filter you can use like this:',
'INFO_TEXT_TRANSLATE_FILTER_2': 'Sometimes you have translations were specific values can be dynamic. ngTranslate comes with different ways to pass dynamic values into a translation.',
'INFO_TEXT_TRANSLATE_FILTER_3': 'First, a translation ID has to know that there is an optional dynamic value. Simply use string interpolation directive:',
'INFO_TEXT_TRANSLATE_FILTER_4': '"value" is now an identifier which you can assign values to. There are to ways to pass values through the translate filter. Using a string expression in JavaScript Object Notation and simply an object hash on the current scope.',
'HEADLINE_DIRECTIVE': 'ngTranslate::translateDirective',
'INFO_TEXT_TRANSLATE_DIRECTIVE': 'Sometimes filters are bad for your app because to many watch expressions slow down your app. So in that case, you might wanna use a directive. ngTranslate has you covered. You can use the translate directive in many different ways. Examples are shown below:',
'HEADLINE_DIRECTIVE_DYN_VALUES': 'Dealing with dynamic values',
'INFO_TEXT_TRANSLATE_DIRECTIVE_2': 'To pass values through translate directives you have to use the "values" attribute on the element you want to translate. You can either pass a string expression, just like the filter does, or an interpolated values from scope like shown below:',
'INFO_TEXT_TRANSLATE_DIRECTIVE_3': 'This works with every translation id combination.'
});
$translateProvider.translations('de_DE', {
'HEADLINE': 'ngTranslate',
'SUB_HEADLINE': 'Internationalisierung für deine Angular Apps!',
'AUTHOR_NAME': 'Pascal Precht',
'GITHUB_LINK_TEXT': 'Code auf GitHub ansehen',
'GETTING_STARTED_HEADLINE': 'Starten',
'HEADLINE_FILTER': 'ngTranslate::translateFilter',
'HEADLINE_USAGE': 'Benutzung:',
'HEADLINE_FILTER_DYN_VALUES': 'Übersetzungen mit dynamischen Werten',
'INFO_TEXT_TRANSLATE_FILTER': 'ngTranslate bietet einen filter der wie folgt verwendet werden kann:',
'INFO_TEXT_TRANSLATE_FILTER_2': 'Manchmal haben Übersetzungen dynamische Werte. ngTranslate bietet mehrere Wege dynamische Werte an eine Übersetzung zu übergeben.',
'INFO_TEXT_TRANSLATE_FILTER_3': 'Zuerst muss eine Übersetzung wissen, dass sie dynamische Werte haben kann. Dazu kann einfach die bekannte Interpolation-Directive verwendet werden:',
'INFO_TEXT_TRANSLATE_FILTER_4': '"value" ist nun ein Identifier dem Werte zugewiesen werden können. Es gibt zwei Wegen, Werte durch einen Filter an einen Identifier zu geben. Zum einen sein String Ausdruck in Form eines Objektliterals, oder ein Objekthash am aktuellen Scope.',
'HEADLINE_DIRECTIVE': 'ngTranslate::translateDirective',
'INFO_TEXT_TRANSLATE_DIRECTIVE': 'Zu viele Filter können deine Angular App stark verlangsamen. In diesem Fall wäre es gut eine Direktive anstatt einen Filter zu verwenden. ngTranslate kommt mit einer "translate" Direktive, die in vielen verschiedenen Wegen verwendet werden kann:',
'HEADLINE_DIRECTIVE_DYN_VALUES': 'Mit dynamischen Werten umgehen',
'INFO_TEXT_TRANSLATE_DIRECTIVE_2': 'Um Werte durch die "translate" Direktive zu übergeben, wird das "values" Attribute verwendet. Auch hier kann entweder ein String Ausdruck oder eine Stringinterpolation verwendet werden:',
'INFO_TEXT_TRANSLATE_DIRECTIVE_3': 'Das funktioniert in allen Kombinationen.'
});
$translateProvider.uses('en_EN');
// $translateProvider.rememberLanguage(true);
}
]);
app.controller('ctrl', ['$translate', '$scope',
function($translate, $scope) {
$scope.toggleLang = function() {
$translate.uses() === 'en_EN' ? $translate.uses('de_DE') : $translate.uses('en_EN');
};
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body >
<div ng-controller="ctrl">
<header>
<button ng-click="toggleLang()">Toggle Language</button>
<h1>{{ 'HEADLINE' | translate }}</h1>
<h3>{{ 'SUB_HEADLINE' | translate }}</h3>
<p>By <a href="http://twitter.com/PascalPrecht">{{ 'AUTHOR_NAME' | translate }}</a> - <a href="http://github.com/PascalPrecht/ng-translate">{{ 'GITHUB_LINK_TEXT' | translate }}</a></p>
</header>
<section>
<h2>{{ 'GETTING_STARTED_HEADLINE' | translate }}</h2>
<h3>{{ 'HEADLINE_FILTER' | translate}}</h3>
<p>{{ 'INFO_TEXT_TRANSLATE_FILTER' | translate }}</p>
<h5>{{ 'HEADLINE_USAGE' | translate}}</h5>
<pre><code ng-non-bindable><ANY>{{ 'TRANSLATION_ID' | translate }}</ANY></code></pre>
<h4>{{ 'HEADLINE_FILTER_DYN_VALUES' | translate }}</h4>
<p>{{ 'INFO_TEXT_TRANSLATE_FILTER_2' | translate }}</p>
<p>{{ 'INFO_TEXT_TRANSLATE_FILTER_3' | translate }}</p>
<pre><code ng-non-bindable>$translateProvider.translations({
'T_ID': 'Lorem ipsum {{value}}'
});</code></pre>
<p>{{ 'INFO_TEXT_TRANSLATE_FILTER_4' | translate }}</p>
<pre><code ng-non-bindable>// Passing values via string expression
<ANY>{{ 'TD_ID' | translate:'{"value": 3}' }}</ANY>
// Passing values via scope object
<ANY>{{ 'TD_ID' | translate:anyObjectOnScope }}</ANY>
</code></pre>
<h3>{{ 'HEADLINE_DIRECTIVE' | translate }}</h3>
<p>{{ 'INFO_TEXT_TRANSLATE_DIRECTIVE' | translate }}</p>
<pre><code ng-non-bindable><ANY translate>TRANSLATION_ID</ANY> // Use content as translation id
<ANY translate="TRANSLATION_ID"></ANY> // Pass translation id as attribute value
<ANY translate>{{translationIdOnScope}}</ANY> // Use content as translation id with string interpolation
<ANY translate="{{translationIdOnScope}}"></ANY> // You got the point
</code></pre>
<h4>{{ 'HEADLINE_DIRECTIVE_DYN_VALUES' | translate }}</h4>
<p>{{ 'INFO_TEXT_TRANSLATE_DIRECTIVE_2' | translate }}</p>
<pre><code ng-non-bindable>// Using string expression
<ANY translate="TRANSLATION_ID" values="{'value': '3'}"></ANY>
// Using scope object
<ANY translate="TRANSLATION_ID" values="{{objectOnScope}}"></ANY>
</code></pre>
<p>{{ 'INFO_TEXT_TRANSLATE_DIRECTIVE_3' | translate }}</p>
</section>
</div>
</body>
</html>
/* Put your css in here */