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

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

varoutput=Tangular.render('Hello {{ name }} and {{ $.name }}!',{name: 'MODEL 1'},{name: 'MODEL 2'});// Hello MODEL 1 and MODEL 2

Best performance with pre-compile

// cachevartemplate=Tangular.compile('Hello {{name}} and {{name | raw}}!');// render// template(model, [model2])varoutput=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);// examplereturnvalue.format(decimals||0);});Tangular.register('plus',function(value,count){returnvalue+(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

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

Alias: Tangular is too long as word

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

Contributors

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