A simple JavaScript template engine like Angular.js for websites or node.js
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.npmignore Added new parser. Feb 21, 2018
Tangular.js Fixed a problem with no Tangular markup. Mar 13, 2018
Tangular.min.js Fixed a problem with no Tangular markup. Mar 13, 2018
license.txt Update minified version. Mar 22, 2017
minify.json Improve minification. Jun 19, 2017
minify.sh Improve minification. Jun 19, 2017
package.json Fixed a problem with no Tangular markup. Mar 13, 2018
readme.md Updated readme. Feb 27, 2018
test.js Fixed bugs. Feb 22, 2018

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