Többnyelvű alkalmazás

Pascal Precht féle többnyelvű eszköz

Töltsük le az angular-translate scriptet a következő helyről:

https://angular-translate.github.io/

A következőkben egy példakódot látunk.

Könyvtárszerkezet:

htdocs/
   |--js/
   |   |--script.js
   |--libs/
   |   |--angular-translate.min.js
   |   |--angular-min.js
   |--index.html

index.html

<!doctype html>
<html ng-app="kenyerApp">
<head>
<meta charset="utf-8">
<title>Többnyelvű</title>
<link rel="stylesheet" href="style.css">
 
<script src="libs/angular.min.js"></script>
<script src="libs/angular-translate.min.js"></script>
<script src="js/script.js"></script>
 
</head>
<body ng-controller="kenyerCtrl">
 
<h1 translate="MAINTITLE"></h1>
<h2 translate="TITLE"></h2>
<p translate="PARAGRAPH"></p>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN">english</button>
<button ng-click="changeLanguage('hu')" translate="BUTTON_LANG_HU">magyar</button>
 
</body>
</html>

js/script.js

var app = angular.module('kenyerApp', ['pascalprecht.translate']);
 
app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    MAINTITLE: "More language application",
    TITLE: 'Hello',
    PARAGRAPH: 'This is a paragraph.',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_HU: 'hungarian'
  });
  $translateProvider.translations('hu', {
    MAINTITLE: "Többnyelvű alkalmazás",
    TITLE: 'Helló',
    PARAGRAPH: 'Ez egy bekezdés.',
    BUTTON_LANG_EN: 'angol',
    BUTTON_LANG_HU: 'magyar'
  });
  $translateProvider.preferredLanguage('hu');
});
 
app.controller('kenyerCtrl', function ($scope, $translate) {
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});