https://github.com/totaljs/tangular
A simple JavaScript template engine like Angular.js for websites or node.js
https://github.com/totaljs/tangular
angular javascript template-engine
Last synced: 9 months ago
JSON representation
A simple JavaScript template engine like Angular.js for websites or node.js
- Host: GitHub
- URL: https://github.com/totaljs/tangular
- Owner: totaljs
- License: mit
- Created: 2014-11-19T09:43:42.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-03-22T08:39:56.000Z (about 2 years ago)
- Last Synced: 2025-06-10T06:09:02.732Z (10 months ago)
- Topics: angular, javascript, template-engine
- Language: JavaScript
- Homepage:
- Size: 158 KB
- Stars: 61
- Watchers: 10
- Forks: 21
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.txt
Awesome Lists containing this project
README
[![MIT License][license-image]][license-url]
# Tangular
[](https://european-union.europa.eu/)
> A simple template engine like Angular.js for JavaScript or node.js
- only __2.0 kB__ minified + gziped
- syntax like __Angular.js__ templates
- supports custom helpers
- supports conditions (+ nested conditions)
- supports loops (+ nested loops)
- __supports two models__
- no dependencies
- IE `>= 9`
- best of use with [www.totaljs.com - web framework for Node.js](http://www.totaljs.com)
- Live example on [JSFiddle / Tangular](http://jsfiddle.net/petersirka/ftfvba65/2/)
- __One of the fastest template engine in the world__
__YOU MUST SEE:__
- [jComponent - A component library for jQuery](https://github.com/petersirka/jComponent)
- [jRouting - HTML 5 routing via History API](https://github.com/petersirka/jRouting)
- [jQuery two way bindings](https://github.com/petersirka/jquery.bindings)
## Node.js
```bash
npm install tangular
```
```javascript
require('tangular');
// Inits Tangular and registers "Tangular" keyword as a global variable
// console.log(Tangular);
```
## Example
```javascript
var output = Tangular.render('Hello {{name}} and {{name | raw}}!', { name: 'world' });
// Hello <b>world</b> and world!
```
## Second model
- very helpful, you don't have to change the base model
- second model can be used in the template via `$` character, e.g. `{{ $.property_name }}`
```javascript
var output = Tangular.render('Hello {{ name }} and {{ $.name }}!', { name: 'MODEL 1' }, { name: 'MODEL 2'});
// Hello MODEL 1 and MODEL 2
```
## Best performance with pre-compile
```javascript
// cache
var template = Tangular.compile('Hello {{name}} and {{name | raw}}!');
// render
// template(model, [model2])
var output = template({ name: 'Peter' });
```
## Conditions
- supports `else if`
```html
{{if name.length > 0}}
OK
{{else}}
NO
{{fi}}
```
```html
{{if name !== null}}
NOT NULL
{{fi}}
```
## Looping
```html
{{foreach m in orders}}
Order num.{{m.number}} (current index: {{$index}})
{{m.name}}
{{end}}
```
## Custom helpers
```javascript
Tangular.register('currency', function(value, decimals) {
// this === MODEL/OBJECT
// console.log(this);
// example
return value.format(decimals || 0);
});
Tangular.register('plus', function(value, count) {
return value + (count || 1);
});
// Calling custom helper in JavaScript, e.g.:
Tangular.helpers.currency(100, 2);
```
```html
{{ amount | currency }}
{{ amount | currency(2) }}
{{ count | plus | plus(2) | plus | plus(3) }}
```
## Built-in helpers
```html
{{ name }} = VALUE IS ENCODED BY DEFAULT
{{ name | raw }} = VALUE IS NOT ENCODED
```
## Miracles
```javascript
var template = Tangular.compile('Encoded value {{}} and raw value {{ | raw }}.');
console.log(template('Tangular'));
```
## Alias: Tangular is too long as word
```javascript
// use alias:
// Ta === Tangular
Ta.compile('');
```
## Contributors
| Contributor | Type | E-mail |
|-------------|------|--------|
| [Peter Širka](https://www.petersirka.eu) | author | |
| [Константин](https://github.com/bashkos) | contributor |
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: license.txt