Tangular: A Flexible Template Engine

Template engines play a crucial role in separating presentation logic from data in web development. Total.js introduces Tangular, an impressive and feature-rich template engine that stands as a compelling alternative to well-known engines like Handlebars and Mustache. With its seamless integration into the Total.js framework, Tangular empowers developers to create dynamic and expressive web templates. In this post, we will explore the exceptional features of Tangular, highlighting its advantages.

To get started with Tangular :

• Tangular can be used in Node.js: $ npm install tangular

• Tangular is implemented as a part of the Total.js framework

• Source-code on GitHub

A minimalistic example with Tangular

<script type="text/html" id="mytemplate">
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
</script>

<script>
    var template = Tangular.compile($('#mytemplate').html());
    console.log(template({ title: 'Hello world!', body: 'Are you happy?' }));
</script>

Now, let's explore some of the most remarkable features of Tangular, showcasing its versatility and making it stands out as an excellent choice for modern web development.

• Loops: Simplifying Iteration Tangular's loop feature allows developers to iterate over data structure arrays and dynamically generate content based on each item. This simplifies the process of rendering repetitive elements and enhances the flexibility of your templates.

  • Tangular can render only Array in loops

  • $index property contains a current index in the Array

{{ foreach m in items }}
    <div>{{ m.name }}</div>
    <div>Current index: {{ $index }}</div>
{{ end }}

• Conditions: Controlling Flow with Ease Tangular's conditionals enable developers to apply logical checks and control the rendering of content based on specific conditions. Whether it's showing or hiding elements, Tangular provides an elegant syntax to handle conditional logic effortlessly.

{{ if age > 30 }}
    Is too old.
{{ else }}
    is too young.
{{ fi }}
// supports {{ else if ... }}

• Custom Helpers: Extending Functionality Tangular's custom helpers empower developers to extend the template engine's functionality. These helpers allow you to encapsulate complex logic or reusable code snippets, making your templates more modular and maintainable. Also, the prebuild helpers let you be more concrete

Thelpers.uppercase = function(value) {
    return (value || '').toUpperCase();
};
Thelpers.lowercase = function(value) {
    return (value || '').toLowerCase();
};

• Repository: A Second Model for Enhanced Data Management With Tangular, you can leverage the power of a second model called a repository. This feature enables you to separate your template-related data from the primary model, providing a clean and organized approach to managing your application's data.

var template = Tangular.compile('{{ name }} {{ $.name }}');

var output = template({ name: 'Peter' }, { name: 'Širka' });
console.log(output);
// Output: Peter Širka

// repository can be used in loops and conditions too

• Auto-Encoding HTML Values: Ensuring Security Tangular automatically encodes HTML values, mitigating the risk of cross-site scripting (XSS) attacks. This built-in security feature helps maintain the integrity of your application and safeguards against malicious user input.

• Pre-Compiled Templates: Boosting Performance Tangular allows you to pre-compile your templates, resulting in faster rendering times and improved performance. By compiling templates upfront, you reduce the processing overhead during runtime, leading to a smoother user experience.

Tangular's rich feature set, including loops, conditions, custom helpers, repository support, auto-encoding, and pre-compiled templates, makes it a standout choice among template engines. Whether you're developing simple web applications or complex systems, Tangular provides the flexibility and power to create dynamic and engaging templates. With its seamless integration with Total.js, Tangular offers an exceptional template engine that elevates your web development workflow to new heights. Embrace Tangular and unlock a world of possibilities in creating beautiful, functional, and secure web templates.