By Pascal Precht / @PascalPrecht
Dutch AngularJS Meetup
?
$ git clone git://github.com/PascalPrecht/angular-translate.git
$ cd angular-translate
$ npm install
$ bower install
...
$ grunt build
$ bower install angular-translate
<script src="path/to/angular.js"></script>
<script src="path/to/angular-translate.js"></script>
Let's build a little app.
$translateProvider
$translateProvider
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// configuration code goes here...
}]);
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// static translation registration
$translateProvider.translations({
"APP_TITLE": "Dutch AngularJS Meetup",
"INTRODUCTION_TEXT": "Come together and meet great people!"
});
}]);
<h1>Dutch AngularJS Meetup</h1>
<p>Come together and meet great people!</p>
<h1>{{ "APP_TITLE" | translate }}</h1>
<p>{{ "INTRODUCTION_TEXT" | translate }}</p>
<h1 translate="APP_TITLE"></h1>
<p translate="INTRODUCTION_TEXT"></p>
(More on $translateProvider)
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// static translation registration with language key
$translateProvider.translations('en', {
"APP_TITLE": "Dutch AngularJS Meetup",
"INTRODUCTION_TEXT": "Come together and meet great people!"
});
$translateProvider.translations('de', {
"APP_TITLE": "Niederländisches AngularJS-Treffen",
"INTRODUCTION_TEXT": "Kommt zusammen und lernt tolle Leute kennen!"
});
}]);
$translateProvider.preferredLanguage('en');
$translate.uses()
app.controller('langController', function ($scope, $translate) {
$scope.switchLanguage = function (languageKey) {
$translate.uses(languageKey);
};
});
<ul ng-controller="langController">
<li><button ng-click="switchLanguage('de')">German</button></li>
<li><button ng-click="switchLanguage('en')">English</button></li>
</ul>
(More about multi-language)
$ bower install angular-translate-loader-static-files
<script src="angular-translate-loader-static-files.js"></script>
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// ... previous configuration
$translateProvider.useStaticFilesLoader({
prefix: 'lang-',
suffix: '.json'
});
}]);
Requests /lang-{languageKey}.json
(More about asynchronous loading)
"INBOX_TEXT": "You have {{count}} new messages."
<p
translate="INBOX_TEXT"
translate-values="{ count: 3 }"
></p>
You have 3 new messages.
"INBOX_TEXT": "You have {{count}} new messages"
<p>{{ "INBOX_TEXT" | translate:{ count: 3 } }}</p>
You have 3 new messages.
"INBOX_TEXT": "You have {{count}} new messages"
$scope.text = $translate('INBOX_TEXT', { count: 3 });
You have 3 new messages.
(More about variable replacement)