<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Angular Stuff -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.0/angular-translate.js"></script>
<!-- App -->
<script src="app.js"></script>
</head>
<body ng-controller="AppController as app">
<div class="container">
<h1 translate>hello</h1>
<p translate translate-value-ajs-version="{{app.versions.ajs}}" translate-value-translate-version="{{app.versions.translate}}">subtitle</p>
<button ng-click="app.chooseLanguage('de')"
class="btn"
ng-class="{'btn-primary': app.currentLanguage === 'de'}">DE</button>
<button ng-click="app.chooseLanguage('en')"
class="btn"
ng-class="{'btn-primary': app.currentLanguage === 'en'}">EN</button>
</div>
</body>
</html>
angular-translate latest template
// Code goes here
var app = angular.module('app', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
$translateProvider.translations('en', {
'hello': "Hello!",
'subtitle': 'This is running Angular JS v{{ajsVersion}} and angular-translate v{{translateVersion}}!',
'text': "Your browser is: {{browser}}"
});
$translateProvider.translations('de', {
'hello': "Hallo!",
'subtitle': 'Hier läuft gerade Angular JS v{{ajsVersion}} und angular-translate v{{translateVersion}}!',
'text': "Dein Browser ist: {{browser}}"
});
$translateProvider.preferredLanguage("en");
}
]);
app.controller('AppController', function ($rootScope, $translate) {
var _this = this;
// store the current used version
this.versions = {
ajs: angular.version.full,
translate: $translate.versionInfo()
};
this.currentLanguage = $translate.use();
// invoke a language change
this.chooseLanguage = function (lang) {
$translate.use(lang)
.then(function (languageId) {
_this.currentLanguage = languageId;
});
};
});