{"id":16939287,"url":"https://github.com/a8m/ng-translation","last_synced_at":"2025-12-12T03:01:41.194Z","repository":{"id":19898991,"uuid":"23164056","full_name":"a8m/ng-translation","owner":"a8m","description":"Fast, Easy and Dynamic translation for AngularJS","archived":false,"fork":false,"pushed_at":"2014-12-22T19:36:33.000Z","size":539,"stargazers_count":43,"open_issues_count":6,"forks_count":7,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-18T11:11:31.665Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a8m.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-20T21:00:24.000Z","updated_at":"2018-07-24T13:49:21.000Z","dependencies_parsed_at":"2022-08-26T21:41:19.072Z","dependency_job_id":null,"html_url":"https://github.com/a8m/ng-translation","commit_stats":null,"previous_names":["a8m/ng-static"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a8m%2Fng-translation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a8m%2Fng-translation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a8m%2Fng-translation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a8m%2Fng-translation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a8m","download_url":"https://codeload.github.com/a8m/ng-translation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244959444,"owners_count":20538625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T21:04:14.008Z","updated_at":"2025-12-12T03:01:41.108Z","avatar_url":"https://github.com/a8m.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#ngTranslation  \n[![NPM version][npm-image]][npm-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![Dependency Status][david-image]][david-url]\n[![License][license-image]][license-url]\n\u003e Fast, Easy and Dynamic translation for AngularJS. **v0.0.3**\n\n##Table of contents:\n- [Get Started](#get-started)\n- [Example](#example)\n- [Development](#development)\n- [ngTranslationProvider](#ngtranslationprovider)\n  - [Configuration](#configuration)\n    - [setBaseUrl](#setbaseurl)\n    - [langsFiles](#langsfiles)\n    - [langsValues](#langsvalues)\n    - [addLangFile](#addlangfile)\n    - [setFilesSuffix](#setfilessuffix)\n    - [fallbackLanguage](#fallbacklanguage)\n  - [API](#api)\n    - [configuration](#configuration1)\n    - [get](#get)\n    - [getAll](#getall)\n    - [getUsed](#getused)\n    - [init](init)\n    - [use](#use)\n- [ngTranslationFilter](#ngtranslationfilter)\n- [ngTranslationDirective](#ngtranslationdirective)\n\n##Get Started\n**(1)** You can install ng-translation using 3 different ways:  \n  - clone \u0026 [build](#developing) this repository\n  - **[Bower](http://bower.io/)**: by running `$ bower install ng-translation` from your terminal\n  - via **[npm](https://www.npmjs.org/)**: by running `$ npm install ng-translation` from your terminal  \n\n**(2)** Include `ng-translation.js` (or `ng-translation.min.js`) in your `index.html`, after including Angular itself.    \n\n**(3)** Add `'ng-translation'` to your main module's list of dependencies.    \n\nWhen you're done, your setup should look similar to the following:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app=\"myApp\"\u003e\n\u003chead\u003e\n   \n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n    \u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"bower_components/js/ng-translation.min.js\"\u003e\u003c/script\u003e\n    ...\n    \u003cscript\u003e\n        angular.module('myApp', ['ng-translation'])\n          .controller('MainCtrl', function($scope) {\n            //...\n          });\n    \u003c/script\u003e\n    ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n##Example\n**Quick example:**  \n**JS:**  \n```js\n/**\n * Directory structure\n * __ __ __ __ __ __\n * | - dist          |\n * |   - assets      |\n * |     - static    |\n * |__ __ __ __ __ __|\n */\n//AngularJS app\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .setDirectory('/dist/assets/static')\n      .setFilesSuffix('.json')\n      .langsFiles({\n        en: 'en',\n        de: 'de',\n        es: 'es'\n      })\n      .fallbackLanguage('en')\n  }])\n  .run(['ngTranslation', '$location'], function(ngTranslation, $location) {\n    ngTranslation.use(\n        $location.search().lang\n      );\n  });\n```\n**JSON:** (one file for example)    \n```json\n{\n  \"title\": \"Wählen Sie eine Vorlage, um zu beginnen.\",\n  \"description\": {\n    \"text\": \"Hunderte vollständig anpassbarer HTML5-Templates in jeder Kategorie verfügbar.\"\n  },\n  \"button\": \"Anmelden\",\n  \"message\": \"Hallo {{user.name}}, Uw wachtwoord is: {{user.password}}\"\n}\n```\n**HTML:**\n```html\n    \u003c!-- simple usage example --\u003e\n    \u003ch3\u003e{{ 'title' | translate }}\u003c/h3\u003e\n    \u003ch4\u003e{{ 'description.text'  | translate }}\u003c/h4\u003e\n    \u003cp\u003e{{ 'button' | translate }}\u003c/p\u003e\n\n    \u003c!-- directive example --\u003e\n    \u003cp ng-translate=\"'message'\"\u003e\u003c/p\u003e\n    \u003cp ng-translate=\"es('message')\"\u003e\u003c/p\u003e\n\n    \u003c!-- bind to model example --\u003e\n    \u003ctable style=\"border:1px solid red\"\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eUser Details:\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e{{ 'message' | translate: this }}\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            Change user details:\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ename: \u003cinput ng-model=\"user.name\" type=\"text\"/\u003e \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003epassword: \u003cinput ng-model=\"user.password\" type=\"text\"/\u003e \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n```\n\n**To learn more, Read the documentation...**\n\n##Configuration\nngTranlation configuration options, **see below:**\n\n###setBaseUrl\nSet base url for static/languages files directory.  \n**Aliases:** `setDirectory`\n```js\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .setDirectory('/ng-translation/demo/languages');\n  }]);\n```\n###langsFiles\nSet languages files as a key value pairs.  \n```js\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .setDirectory('/ng-translation/demo/languages')\n      .langsFiles({\n        en: 'en.json',\n        de: 'de.json',\n        es: 'es.json'\n      });\n  }]);\n```\n###langsValues\nSet array of values as a languages files.  \n```js\nangular.module('app', ['ng-translation'])\n  .value({\n    en: { foo: 'Hello' },\n    de: { foo: 'Hallo' }\n  })\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .langsValues([\n        'en',\n        'de'\n      ]);\n  }]);\n```\n###addLangFile\nAdd a single language file.  \n```js\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .addLangFile({\n        en: 'filename.json'\n      });\n  }]);\n```\n###setFilesSuffix\nSet global suffix to all files.  \n```js\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .setFilesSuffix('-static.json')\n      .langsFiles({\n        en: 'en', // \u003c== en-static.json\n        de: 'de',\n        es: 'es'\n      });\n  }]);\n```\n###fallbackLanguage\nSet fallback language. \n```js\nangular.module('app', ['ng-translation'])\n  .config(['ngTranslationProvider', function(ngTranslationProvider) {\n    ngTranslationProvider\n      .fallbackLanguage('en');\n  }]);\n```\n##API\nThe returns API, **see below:**\n\n###configuration\nThe expose configuration\n```js\nangular.module('app', ['ng-translation'])\n  .controller('MainCtrl', function(ngTranslation) {\n    console.log(ngTranslation.configuration);\n    //{ baseUrl: \"/ng-translation/demo/languages\", suffix: \".json\", langsFiles: Obje... }\n  });\n```\n###get\nGet specific file by name.  \n**Usage:** `ngTranslation.get({String})`\n**Returns:** file `{Object}`\n```js\nangular.module('app', ['ng-translation'])\n  .controller('MainCtrl', function(ngTranslation) {\n    $scope.getByName = function(name) {\n      return ngTranslation.get(name); \n      //{title: \"Select a Template\", message: \"Hello {{ user.name... }\n    };\n  });\n```\n###getAll\nGet all files(the staticFilesContainer)\n**Usage:** `ngTranslation.getAll()`\n**Returns:** files `{Object}`\n```js\nangular.module('app', ['ng-translation'])\n  .controller('MainCtrl', function(ngTranslation) {\n    $scope.getAll = function() {\n      return ngTranslation.getAll(); \n      //{ en: Object, de: Object, es: Obje... }\n    };\n  });\n```\n###getUsed\nGet the current used file || fallback file  \n**Usage:** `ngTranslation.getUsed()`  \n**Returns:** file `{Object}`\n```js\nangular.module('app', ['ng-translation'])\n  .controller('MainCtrl', function(ngTranslation) {\n    $scope.getUsed = function() {\n      return ngTranslation.getUsed(); \n       //{title: \"Select a Template\", message: \"Hello {{ user.name... }\n    };\n  });\n```\n###init\n`@private` function.  \n\n###use\nUse specific language.(prefered language)  \n**Usage:** `ngTranslation.use({String})`  \n**Returns:** `{Boolean}`\n```js\nangular.module('app', ['ng-translation'])\n  .run(function($location, ngTranslation) {\n    ngTranslation.use(\n      $location.search().lang //e.g: \"de\", \"en\"\n    );\n  });\n```\n##ngTranslationFilter\nThere's a 4 ways to use the `translate` filter.  \n* simple - pass a key, and get the value from the **usedFile**(prefered language, `.use`).\n```html\n\u003cp\u003e{{ 'message' | translate }}\u003c/p\u003e\n\u003cp\u003e{{ 'message.nested' | translate }}\u003c/p\u003e\n\u003c!-- note: 'key' is a property on the scope --\u003e\n\u003cp\u003e{{ key | translate }}\u003c/p\u003e\n```\n* from specific file - pass a key, and fileName(language), and get the value from `this` file.\n```html\n\u003cp\u003e{{ 'message' | translate: 'en' }}\u003cp\u003e\n\u003cp\u003e{{ 'message.nested' | translate: 'de' }}\u003cp\u003e\n\u003c!-- note: 'key' and `lang` are a properties on the scope --\u003e\n\u003cp\u003e{{ key | translate: lang }}\u003cp\u003e\n```\n* interpolate - there's a situation, that you want to store an angular expression as a value.  \n**e.g**: `'this is string that {{ foo }}, {{ bar.baz }} need to interpolate.'`  \n**Usage:** `{{ key | translate: object }}`  \n```js\n$scope.user = { name: 'Ariel M.' }\n$scope.property = 'value';\n```\n```html\n\u003c!-- note: user is a property on the scope, so if the real value on the file is:\n`hello {{ name }}, wanna login?`\nthe result will be: `hello Ariel M., wanna login ?` --\u003e\n\u003cp\u003e{{ 'user.message' | translate: user }}\u003c/p\u003e\n\u003c!-- note: if you want to use directly properties on $scope, use the `this` keyword,\n(every $scope, have the own `this` property that point to him self) --\u003e\n\u003cp\u003e{{ 'message' | translate: this }}\u003c/p\u003e\n```\n* interpolate from other file - if you want the same interpolation behavior, but get the value \nfrom specific file.  \n**Usage:** `{{ key | translate: lang: object }}`  \n```html\n\u003cp\u003e{{ 'user.message' | translate: 'de': user }}\u003c/p\u003e\n\u003c!-- note: 'key' and `lang` are a properties on the scope --\u003e\n\u003cp\u003e{{ key | translate: lang: this }}\u003c/p\u003e\n```\n##ngTranslationDirective\nThere's a 2 ways to use the `ngTranslate` directive.\n* get the value from the **usedFile**(prefered language, `.use`).\n```html\n\u003cp ng-translate=\"'message'\"\u003e\u003c/p\u003e\n\u003c!-- note: 'key' is a property on the scope --\u003e\n\u003cp ng-translate=\"key\"\u003e\u003c/p\u003e\n```\n* get the value from specific file(specific language).\n```html\n\u003c!-- note: `en` interpolate as a string --\u003e\n\u003cp ng-translate=\"en('message')\"\u003e\u003c/p\u003e\n\u003c!-- note: 'key' is a property on the scope --\u003e\n\u003cp ng-translate=\"de(key)\"\u003e\u003c/p\u003e\n```\n\n\n[npm-image]: https://img.shields.io/npm/v/ng-translation.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/ng-translation\n[coveralls-image]: https://img.shields.io/coveralls/a8m/ng-translation.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/a8m/ng-translation\n[david-image]: http://img.shields.io/david/a8m/ng-translation.svg?style=flat-square\n[david-url]: https://david-dm.org/a8m/ng-translation\n[license-image]: http://img.shields.io/npm/l/ng-translation.svg?style=flat-square\n[license-url]: LICENSE\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa8m%2Fng-translation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa8m%2Fng-translation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa8m%2Fng-translation/lists"}