{"id":28555881,"url":"https://github.com/totaljs/tangular","last_synced_at":"2025-07-04T04:31:23.743Z","repository":{"id":23489395,"uuid":"26854598","full_name":"totaljs/Tangular","owner":"totaljs","description":"A simple JavaScript template engine like Angular.js for websites or node.js","archived":false,"fork":false,"pushed_at":"2024-03-22T08:39:56.000Z","size":162,"stargazers_count":61,"open_issues_count":2,"forks_count":21,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-10T06:09:02.732Z","etag":null,"topics":["angular","javascript","template-engine"],"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/totaljs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"totaljs","open_collective":"totalplatform","ko_fi":"totaljs","liberapay":"totaljs","buy_me_a_coffee":"totaljs","custom":"https://www.totaljs.com/support/"}},"created_at":"2014-11-19T09:43:42.000Z","updated_at":"2024-06-16T21:44:48.000Z","dependencies_parsed_at":"2023-10-16T10:32:46.074Z","dependency_job_id":"59be34dc-7640-4de5-b5f0-58008802e5c1","html_url":"https://github.com/totaljs/Tangular","commit_stats":null,"previous_names":["petersirka/tangular"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/totaljs/Tangular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2FTangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2FTangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2FTangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2FTangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/totaljs","download_url":"https://codeload.github.com/totaljs/Tangular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaljs%2FTangular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263445797,"owners_count":23467614,"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":["angular","javascript","template-engine"],"created_at":"2025-06-10T06:08:08.143Z","updated_at":"2025-07-04T04:31:23.729Z","avatar_url":"https://github.com/totaljs.png","language":"JavaScript","funding_links":["https://patreon.com/totaljs","https://opencollective.com/totalplatform","https://ko-fi.com/totaljs","https://liberapay.com/totaljs","https://buymeacoffee.com/totaljs","https://www.totaljs.com/support/"],"categories":[],"sub_categories":[],"readme":"[![MIT License][license-image]][license-url]\n\n# Tangular\n\n[![Made in EU](https://cdn.componentator.com/eu-small.png)](https://european-union.europa.eu/)\n\n\u003e A simple template engine like Angular.js for JavaScript or node.js\n\n- only __2.0 kB__ minified + gziped\n- syntax like __Angular.js__ templates\n- supports custom helpers\n- supports conditions (+ nested conditions)\n- supports loops (+ nested loops)\n- __supports two models__\n- no dependencies\n- IE `\u003e= 9`\n- best of use with [www.totaljs.com - web framework for Node.js](http://www.totaljs.com)\n- Live example on [JSFiddle / Tangular](http://jsfiddle.net/petersirka/ftfvba65/2/)\n- __One of the fastest template engine in the world__\n\n__YOU MUST SEE:__\n\n- [jComponent - A component library for jQuery](https://github.com/petersirka/jComponent)\n- [jRouting - HTML 5 routing via History API](https://github.com/petersirka/jRouting)\n- [jQuery two way bindings](https://github.com/petersirka/jquery.bindings)\n\n\n## Node.js\n\n```bash\nnpm install tangular\n```\n\n```javascript\nrequire('tangular');\n// Inits Tangular and registers \"Tangular\" keyword as a global variable\n// console.log(Tangular);\n```\n\n## Example\n\n```javascript\nvar output = Tangular.render('Hello {{name}} and {{name | raw}}!', { name: '\u003cb\u003eworld\u003c/b\u003e' });\n// Hello \u0026lt;b\u0026gt;world\u0026lt;/b\u0026gt; and \u003cb\u003eworld\u003c/b\u003e!\n```\n\n## Second model\n\n- very helpful, you don't have to change the base model\n- second model can be used in the template via `$` character, e.g. `{{ $.property_name }}`\n\n```javascript\nvar output = Tangular.render('Hello {{ name }} and {{ $.name }}!', { name: 'MODEL 1' }, { name: 'MODEL 2'});\n// Hello MODEL 1 and MODEL 2\n```\n\n\n## Best performance with pre-compile\n\n```javascript\n// cache\nvar template = Tangular.compile('Hello {{name}} and {{name | raw}}!');\n\n// render\n// template(model, [model2])\nvar output = template({ name: 'Peter' });\n```\n\n## Conditions\n\n- supports `else if`\n\n```html\n{{if name.length \u003e 0}}\n    \u003cdiv\u003eOK\u003c/div\u003e\n{{else}}\n    \u003cdiv\u003eNO\u003c/div\u003e\n{{fi}}\n```\n\n```html\n{{if name !== null}}\n    \u003cdiv\u003eNOT NULL\u003c/div\u003e\n{{fi}}\n```\n\n## Looping\n\n```html\n{{foreach m in orders}}\n    \u003ch2\u003eOrder num.{{m.number}} (current index: {{$index}})\u003c/h2\u003e\n    \u003cdiv\u003e{{m.name}}\u003c/div\u003e\n{{end}}\n```\n\n## Custom helpers\n\n```javascript\nTangular.register('currency', function(value, decimals) {\n    // this === MODEL/OBJECT\n    // console.log(this);\n    // example\n    return value.format(decimals || 0);\n});\n\nTangular.register('plus', function(value, count) {\n    return value + (count || 1);\n});\n\n// Calling custom helper in JavaScript, e.g.:\nTangular.helpers.currency(100, 2);\n```\n\n```html\n\u003cdiv\u003e{{ amount | currency }}\u003c/div\u003e\n\u003cdiv\u003e{{ amount | currency(2) }}\u003c/div\u003e\n\n\u003c!-- MULTIPLE HELPERS --\u003e\n\u003cdiv\u003e{{ count | plus | plus(2) | plus | plus(3) }}\u003c/div\u003e\n```\n\n## Built-in helpers\n\n```html\n\u003cdiv\u003e{{ name }} = VALUE IS ENCODED BY DEFAULT\u003c/div\u003e\n\u003cdiv\u003e{{ name | raw }} = VALUE IS NOT ENCODED\u003c/div\u003e\n```\n\n## Miracles\n\n```javascript\nvar template = Tangular.compile('Encoded value {{}} and raw value {{ | raw }}.');\nconsole.log(template('\u003cb\u003eTangular\u003c/b\u003e'));\n```\n\n## Alias: Tangular is too long as word\n\n```javascript\n// use alias:\n// Ta === Tangular\nTa.compile('');\n```\n\n## Contributors\n\n| Contributor | Type | E-mail |\n|-------------|------|--------|\n| [Peter Širka](https://www.petersirka.eu) | author  | \u003cpetersirka@gmail.com\u003e |\n| [Константин](https://github.com/bashkos) | contributor |\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: license.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaljs%2Ftangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotaljs%2Ftangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaljs%2Ftangular/lists"}