totaljs / Tangular
Licence: mit
A simple JavaScript template engine like Angular.js for websites or node.js
Stars: ✭ 58
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tangular
Vscode Smarty
Smarty syntax highlight extension for Visual Studio Code
Stars: ✭ 10 (-82.76%)
Mutual labels: template-engine
Saker
The template engine for Node.js and browsers.
Stars: ✭ 46 (-20.69%)
Mutual labels: template-engine
Easytemplatejs
小巧,纯粹,高性能的 JavaScript 模板引擎,支持浏览器, Node.js, Express, koa。Small, pure, high-performance JavaScript template engine, support Browser, Node.js, Express, Koa.
Stars: ✭ 14 (-75.86%)
Mutual labels: template-engine
Utemplate
Micro template engine in Python with low memory usage, designed for Pycopy, a minimalist Python dialect, but also compatible with other Pythons.
Stars: ✭ 34 (-41.38%)
Mutual labels: template-engine
Manifold
Manifold plugs into Java to supplement it with powerful features, from Type-safe Metaprogramming (direct access to GraphQL, JSON, XML, etc.), Extension Methods, Operator Overloading, and Unit Expressions to an integrated Template Engine and a Preprocessor. All fully supported in IntelliJ IDEA and Android Studio. Simply add Manifold to your project and begin taking advantage of it.
Stars: ✭ 993 (+1612.07%)
Mutual labels: template-engine
Spring Velocity Support
An support project of legacy velocity based on Spring Framework
Stars: ✭ 22 (-62.07%)
Mutual labels: template-engine
Jb
A simple and fast JSON API template engine for Ruby on Rails
Stars: ✭ 1,075 (+1753.45%)
Mutual labels: template-engine
Treefrog Framework
TreeFrog Framework : High-speed C++ MVC Framework for Web Application
Stars: ✭ 885 (+1425.86%)
Mutual labels: template-engine
Redzone
Lightweight C++ template engine with Jinja2-like syntax
Stars: ✭ 30 (-48.28%)
Mutual labels: template-engine
Docxtemplater Link Module
⚓️ Hyperlink module for docxtemplater
Stars: ✭ 12 (-79.31%)
Mutual labels: template-engine
Qtwebapp
QtWebApp is a HTTP server like Java servlets, written in C++ with the Qt framework.
Stars: ✭ 50 (-13.79%)
Mutual labels: template-engine
Templates
Simple PHP template engine which is easy to use
Stars: ✭ 26 (-55.17%)
Mutual labels: template-engine
Jbuilder
Generate JSON objects with a Builder-style DSL, inspired by jbuilder
Stars: ✭ 37 (-36.21%)
Mutual labels: template-engine
Liquor
Liquor is a safe sandboxing compiling template language for Ruby
Stars: ✭ 57 (-1.72%)
Mutual labels: template-engine
Razorlight
Template engine based on Microsoft's Razor parsing engine for .NET Core
Stars: ✭ 1,068 (+1741.38%)
Mutual labels: template-engine
Jinja
A very fast and expressive template engine.
Stars: ✭ 8,170 (+13986.21%)
Mutual labels: template-engine
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
var output = Tangular.render('Hello {{name}} and {{name | raw}}!', { name: '<b>world</b>' });
// Hello <b>world</b> 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 | |
---|---|---|
Peter Širka | author | [email protected] |
Константин | contributor |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].