A simple JavaScript template engine like Angular.js for websites or node.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.npmignore
Tangular.js
Tangular.min.js
license.txt
minify.json
minify.sh
package.json
readme.md
test.js

readme.md

MIT License

Support

Tangular

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
  • Live example on JSFiddle / Tangular
  • One of the fastest template engine in the world

YOU MUST SEE:

Node.js

npm install tangular
var Tangular = require('tangular');

Example

var output = Tangular.render('Hello {{name}} and {{name | raw}}!', { name: '<b>world</b>' });
// Hello &lt;b&gt;world&lt;/b&gt; and <b>world</b>!

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 }}
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

// cache
var template = Tangular.compile('Hello {{name}} and {{name | raw}}!');

// render
// template(model, [model2])
var output = template({ name: 'Peter' });

Conditions

  • supports else if
{{if name.length > 0}}
    <div>OK</div>
{{else}}
    <div>NO</div>
{{fi}}
{{if name !== null}}
    <div>NOT NULL</div>
{{fi}}

Looping

{{foreach m in orders}}
    <h2>Order num.{{m.number}} (current index: {{$index}})</h2>
    <div>{{m.name}}</div>
{{end}}

Custom helpers

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);
<div>{{ amount | currency }}</div>
<div>{{ amount | currency(2) }}</div>

<!-- MULTIPLE HELPERS -->
<div>{{ count | plus | plus(2) | plus | plus(3) }}</div>

Built-in helpers

<div>{{ name }} = VALUE IS ENCODED BY DEFAULT</div>
<div>{{ name | raw }} = VALUE IS NOT ENCODED</div>

Miracles

var template = Tangular.compile('Encoded value {{}} and raw value {{ | raw }}.');
console.log(template('<b>Tangular</b>'));

Alias: Tangular is too long as word

// use alias:
// Ta === Tangular
Ta.compile('');

Contributors

Contributor Type E-mail
Peter Širka author petersirka@gmail.com
Константин contributor