chore(demo): restructurize demos

Proposal for a demos structure. A list of demos isn't comlete. There are some new demos and some rewritten old demos.
angular-translate · May 14, 2013 · 3703627 · 3703627
1 parent 86c1b3c
commit 3703627
Show file tree

Hide file tree

Showing 11 changed files with 970 additions and 0 deletions.
diff --git a/demo/ex1 basic usage.htm b/demo/ex1 basic usage.htm
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="TITLE">Basic usage</title>
+  <style>body { text-align: center; }</style>
+</head>
+
+<body ng-controller="ctrl">
+
+  <!-- An example of changing language in runtime -->
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a> 
+    | 
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <!-- Translation by a filter -->
+  <h1>{{'HEADER' | translate}}</h1>
+
+  <!-- Translation by a directive -->
+  <h2 translate="SUBHEADER">Subheader</h2>
+
+  <!-- Using inner HTML as a key for translation -->
+  <p translate>HTML_KEYS</p>
+
+  <hr>
+
+  <!-- Passing a data object to the translation by the filter -->
+  <p>{{'DATA_TO_FILTER' | translate: tlData}}</p>
+
+  <!-- Passing a data object to the translation by the directive -->
+  <p translate="DATA_TO_DIRECTIVE" values="{{tlData}}"></p>
+
+  <hr>
+
+  <!-- Passing a raw data to the filter -->
+  <p>{{'RAW_TO_FILTER' | translate:'{ type: "raw" }' }}</p>
+
+  <!-- Passing a raw data to the filter -->
+  <p translate="RAW_TO_DIRECTIVE" values="{ type: 'directives' }"></p>
+
+  <hr>
+
+  <!-- Using a $translate service -->
+  <p>{{jsTrSimple}}</p>
+
+  <!-- Passing a data to the $translate service -->
+  <p>{{jsTrParams}}</p>
+
+<script src="../bower_components/angular/angular.js"></script>
+<script src="js/angular-translate-latest.js"></script>
+
+<script>
+angular.module('app', ['pascalprecht.translate'])
+
+.config(['$translateProvider', function($translateProvider){
+
+  // Adding a translation table for the English language
+  $translateProvider.translations('en_US', {
+    "TITLE"     : "How to use",
+    "HEADER"    : "You can translate texts by using a filter.",
+    "SUBHEADER" : "And if you don't like filters, you can use a directive.",
+    "HTML_KEYS" : "If you don't like an empty elements, you can write a key for the translation as an inner HTML of the directive.",
+    "DATA_TO_FILTER"    : "Your translations might also contain any static ({{staticValue}}) or random ({{randomValue}}) values, which are taken directly from the model.",
+    "DATA_TO_DIRECTIVE" : "And it's no matter if you use filter or directive: static is still {{staticValue}} and random is still {{randomValue}}.",
+    "RAW_TO_FILTER"     : "In case you want to pass a {{type}} data to the filter, you have only to pass it as a filter parameter.",
+    "RAW_TO_DIRECTIVE"  : "This trick also works for {{type}} with a small mods.",
+    "SERVICE"        : "Of course, you can translate your strings directly in the js code by using a $translate service.",
+    "SERVICE_PARAMS" : "And you are still able to pass params to the texts. Static = {{staticValue}}, random = {{randomValue}}."
+  });
+
+  // Adding a translation table for the Russian language
+  $translateProvider.translations('ru_RU', {
+    "TITLE"     : "Как пользоваться",
+    "HEADER"    : "Вы можете переводить тексты при помощи фильтра.",
+    "SUBHEADER" : "А если Вам не нравятся фильтры, Вы можете воспользоваться директивой.",
+    "HTML_KEYS" : "Если вам не нравятся пустые элементы, Вы можете записать ключ для перевода в как внутренний HTML директивы.",
+    "DATA_TO_FILTER"    : "Ваши переводы также могут содержать любые статичные ({{staticValue}}) или случайные ({{randomValue}}) значения, которые берутся прямо из модели.",
+    "DATA_TO_DIRECTIVE" : "И совершенно не важно используете ли Вы фильтр или директиву: статическое значение по прежнему {{staticValue}} и случайное - {{randomValue}}.",
+    "RAW_TO_FILTER"     : "Если вы хотите передать \"сырые\" ({{type}}) данные фильтру, Вам всего лишь нужно передать их фильтру в качестве параметров.",
+    "RAW_TO_DIRECTIVE"  : "Это также работает и для директив ({{type}}) с небольшими модификациями.",
+    "SERVICE"        : "Конечно, Вы можете переводить ваши строки прямо в js коде при помощи сервиса $translate.",
+    "SERVICE_PARAMS" : "И вы все еще можете передавать параметры в тексты. Статическое значение = {{staticValue}}, случайное = {{randomValue}}."
+  });
+
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.tlData = {
+    staticValue : 42,
+    randomValue : Math.floor(Math.random() * 1000)
+  };
+
+  $scope.jsTrSimple = $translate('SERVICE');
+  $scope.jsTrParams = $translate('SERVICE_PARAMS', $scope.tlData);
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+
+    // A data generated by the script have to be regenerated
+    $scope.jsTrSimple = $translate('SERVICE');
+    $scope.jsTrParams = $translate('SERVICE_PARAMS', $scope.tlData);
+  };
+
+}]);
+</script>
+
+</body>
+</html>
diff --git a/demo/ex2 remember language (cookies).htm b/demo/ex2 remember language (cookies).htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="TITLE">Remember language (cookies)</title>
+  <style>body { text-align: center; }</style>
+</head>
+
+<body ng-controller="ctrl">
+
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a> 
+    | 
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <h1 translate>HEADER</h1>
+  <h2 translate>SUBHEADER</h2>
+
+<script src="../bower_components/angular/angular.js"></script>
+
+<!-- Note that to use a cookie storage you have to include this module -->
+<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
+
+<script src="js/angular-translate-latest.js"></script>
+
+<script>
+// Note that to use the cookie storage you have to pass ngCookies dependency to your module
+angular.module('app', ['pascalprecht.translate', 'ngCookies'])
+
+.config(['$translateProvider', function($translateProvider){
+
+  // Adding a translation table for the English language
+  $translateProvider.translations('en_US', {
+    "TITLE"     : "How to remember a language (coockies)",
+    "HEADER"    : "Your application is able to remember a language between requests.",
+    "SUBHEADER" : "To store the language you can use cookies."
+  });
+
+  // Adding a translation table for the Russian language
+  $translateProvider.translations('ru_RU', {
+    "TITLE"     : "Как запомнить язык (cookies)",
+    "HEADER"    : "Ваше приложение может запоминать язык между запросами.",
+    "SUBHEADER" : "Для хранения языка Вы можете использовать cookies.",
+  });
+
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+  // Tell the module to store the language in the cookie
+  $translateProvider.useCookieStorage();
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+  };
+
+}]);
+</script>
+
+</body>
+</html>
diff --git a/demo/ex3 remember language (local storage).htm b/demo/ex3 remember language (local storage).htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="TITLE">Remember language (local storage)</title>
+  <style>body { text-align: center; }</style>
+</head>
+
+<body ng-controller="ctrl">
+
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a> 
+    | 
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <h1 translate>HEADER</h1>
+  <h2 translate>SUBHEADER</h2>
+
+<script src="../bower_components/angular/angular.js"></script>
+
+<!-- 
+  Note that you have to include this module, because if local storage is not available, 
+  translations module will fallback to the cookies storage
+-->
+<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
+
+<script src="js/angular-translate-latest.js"></script>
+
+<script>
+// Note that to use the local storage you have to pass ngCookies dependency to your module,
+// because if local storage is not available, module will fallback to the cookies storage
+angular.module('app', ['pascalprecht.translate', 'ngCookies'])
+
+.config(['$translateProvider', function($translateProvider){
+
+  // Adding a translation table for the English language
+  $translateProvider.translations('en_US', {
+    "TITLE"     : "How to remember a language (local storage)",
+    "HEADER"    : "Your application is able to remember a language between requests.",
+    "SUBHEADER" : "To store the language you can use a local storage."
+  });
+
+  // Adding a translation table for the Russian language
+  $translateProvider.translations('ru_RU', {
+    "TITLE"     : "Как запомнить язык (local storage)",
+    "HEADER"    : "Ваше приложение может запоминать язык между запросами.",
+    "SUBHEADER" : "Для хранения языка Вы можете использовать локальное хранилище.",
+  });
+
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+  // Tell the module to store the language in the local storage
+  $translateProvider.useLocalStorage();
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+  };
+
+}]);
+</script>
+
+</body>
+</html>
diff --git a/demo/ex4 set a storage key.htm b/demo/ex4 set a storage key.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="TITLE">Set a storage key</title>
+  <style>body { text-align: center; }</style>
+</head>
+
+<body ng-controller="ctrl">
+
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a> 
+    | 
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <h1 translate>HEADER</h1>
+  <h2 translate>SUBHEADER</h2>
+
+<script src="../bower_components/angular/angular.js"></script>
+<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
+<script src="js/angular-translate-latest.js"></script>
+
+<script>
+angular.module('app', ['pascalprecht.translate', 'ngCookies'])
+
+.config(['$translateProvider', function($translateProvider){
+
+  // Adding a translation table for the English language
+  $translateProvider.translations('en_US', {
+    "TITLE"     : "How to remember a language (local storage)",
+    "HEADER"    : "Your application is able to remember a language between requests.",
+    "SUBHEADER" : "And you can control which key it will use in the storage."
+  });
+
+  // Adding a translation table for the Russian language
+  $translateProvider.translations('ru_RU', {
+    "TITLE"     : "Как запомнить язык (local storage)",
+    "HEADER"    : "Ваше приложение может запоминать язык между запросами.",
+    "SUBHEADER" : "И Вы можете контролировать какой ключ оно будет использовать в хранилище.",
+  });
+
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+  // Tell the module to store the language in the coockies
+  $translateProvider.useCookieStorage();
+
+  // Tell the module to use a key 'lang' in the storage instead of default key
+  $translateProvider.storageKey('lang');
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+  };
+
+}]);
+</script>
+
+</body>
+</html>
diff --git a/demo/ex5 set a storage prefix.htm b/demo/ex5 set a storage prefix.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="TITLE">Set a storage key</title>
+  <style>body { text-align: center; }</style>
+</head>
+
+<body ng-controller="ctrl">
+
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a> 
+    | 
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <h1 translate>HEADER</h1>
+  <h2 translate>SUBHEADER</h2>
+
+<script src="../bower_components/angular/angular.js"></script>
+<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
+<script src="js/angular-translate-latest.js"></script>
+
+<script>
+angular.module('app', ['pascalprecht.translate', 'ngCookies'])
+
+.config(['$translateProvider', function($translateProvider){
+
+  // Adding a translation table for the English language
+  $translateProvider.translations('en_US', {
+    "TITLE"     : "How to remember a language (local storage)",
+    "HEADER"    : "Your application is able to remember a language between requests.",
+    "SUBHEADER" : "And you is able to set a prefix for the default storage key."
+  });
+
+  // Adding a translation table for the Russian language
+  $translateProvider.translations('ru_RU', {
+    "TITLE"     : "Как запомнить язык (local storage)",
+    "HEADER"    : "Ваше приложение может запоминать язык между запросами.",
+    "SUBHEADER" : "И Вы сожете установить префикс для ключа по умолчанию.",
+  });
+
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+  // Tell the module to store the language in the coockies
+  $translateProvider.useCookieStorage();
+
+  // Tell the module to use a prefix 'myCoolApp' for the default storage key
+  $translateProvider.storagePrefix('myCoolApp');
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+  };
+
+}]);
+</script>
+
+</body>
+</html>