Awesome

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:

• jComponent - A component library for jQuery
• jRouting - HTML 5 routing via History API
• jQuery two way bindings

Node.js

npm install tangular

require('tangular');
// Inits Tangular and registers "Tangular" keyword as a global variable
// console.log(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