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


Keywords
Angular, Handlebars, Mustache, view engine, template, javascript, template-engine
License
MIT
Install
npm install tangular@4.0.0

Documentation

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