A simple JavaScript template engine like Angular.js for websites or node.js
JavaScript Shell
Latest commit 8dc796e Nov 25, 2016 @petersirka petersirka Update NPM version.

readme.md

MIT License

Support Donate

Tangular

A simple template engine like Angular.js for JavaScript or node.js

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>'));

Custom settings

// Default
Tangular.settings.delimiters = ['{{', '}}'];

// You can change it to e.g.:
Tangular.settings.delimiters = ['(', ')'];

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