pi-template v2.4.13
Angular Template
Angular-Like HTML Template Engine For NodeJS
Why do I need this? By unknown reason, I feel all server-side template engines are somewhat invasive. It looks like an odd language have been invaded HTML space. The only template I feel good about it is AngularJS, but it's all about client-side, not server-side part. If you are a big fan of AngularJS and you want to use AngularJS as a template engine, this node module will do the job.
This template converts the following one time binding expressions on the server-side;
inline expression
e.g.{{ foo }}ht-ifattribute
e.g.,<div ht-if="foo">..</div>ht-repeatattribute
e.g.,<li ht-repeat="el in list">..</li>
e.g.,<li ht-repeat="(k,v) in list">..</li>ht-include attribute
e.g.,<div ht-include="'file.html'"></div>
Install
npm install angular-templateUsage
var htmlTemplate = require('angular-template');
htmlTemplate('{{foo}}', {foo:'Hello'}); //Hello
// or
var htmlTemplate = require('angular-template');
var path = "emails/template.html";
var options = {prefix:'ng'}; // so that ng-if, ng-repeat, ng-include would work
htmlTemplate(path, {name:'John'}, options);Options
prefix: <string>, override default ht prefix with anything, typically ng to reuse angular templates
preprocess: <function>, enables you to modify your template before parsing it as HTML. E.g. You can remove some attributes with RegExp
includeDirs: <array of string>, a list of paths where to look for template
cache: <string>, specify cache key to avoid reading files from disk every time
locale: <object> an object compatible with one found in locales/en_US.jsConverting Angular-Like Expressions
This will convert the angular-like expressions into html.
Curly braces expression.
Assuming foo has the value of
aBcand the value is1234Input | Output -----------------------------------------+--------------------------------- {{foo}} | aBc {{foo|uppercase}} | ABC {{foo|lowercase}} | abc {{foo|json}} | "abc" {{45.5789 | number:2}} | 45.57 {{5247.28 | currency:undefined:2}} | $5,247 {{1288323623006 | date:'medium' }} | Oct 29, 2010 5:40:23 AM {{value | limitTo:2 }} | 12 {{value | limitTo:2:1 }} | 23 {{[1, 2, 3, 4] | limitTo:2:2 | json:0 }} | [3,4]ht-ifattributeAssuming foo has value
true, and bar has valuefalseInput | Output -------------------------------------+--------------------------------- <p ht-if="foo">SHOW</p> | <p>SHOW</p> <p ht-if="bar">NO SHOW</p> | <p></p>ht-includeattributeAssuming foo.html has the following contents
<b>{{prop}} is {{value}}</b>and thatprop="number", item = 20The input and output would like;
Input | Output -----------------------------------------+------------------------------------ <p ht-include="'foo.html'" | <p> ht-include-context="{value:item}"></p>| <b>number is 20</b> | </p>
ht-repeatattributeAssuming collection has the value of
{a:1, b:2, c:3, d:4, e:5}Input | Output ----------------------------------------------+------------------------------------ <ul> | <ul> <li ht-repeat="(key, val) in collection"> | <li> a : 1</li> {{key}} : {{val}} | <li> b : 2</li> </li> | <li> c : 3</li> </ul> | <li> d : 4</li> | <li> e : 5</li> | </ul>Assuming collection has the value of
[1,2,3,4,5]Input | Output ----------------------------------------------+------------------------------------ <ul> | <ul> <li ht-repeat="num in collection"> | <li> 1 </li> {{num}} | <li> 2 </li> </li> | <li> 3 </li> </ul> | <li> 4 </li> | <li> 5 </li> | </ul>Assuming collection has the value of
[1,2,3,4,5]Input | Output ----------------------------------------------------+------------------------------ <ul> | <ul> <li ht-repeat="num in collection | limitTo:3:1"> | <li> 2 </li> {{num}} | <li> 3 </li> </li> | <li> 4 </li> </ul> | </ul>Assuming collection has the value of
[1,2,3,4,5]and filterFn is(v) => v > 1Input | Output ---------------------------------------------------------+------------------------- <ul> | <ul> <li ht-repeat="num in collection | filter:filterFn "> | <li> 2 </li> {{num}} | <li> 3 </li> </li> | <li> 4 </li> </ul> | <li> 5 </li> | </ul>ht-classattributeAssuming classes has value
foo, and classes2 has value{baz:true}.Input | Output -------------------------------------+--------------------------------- <p ht-class="classes">SHOW</p> | <p class="foo">SHOW</p> <p ht-class="classes2">SHOW</p> | <p class="baz">SHOW</p>
This accepts the same format as ng-class
ht-bind,ht-bind-htmlattributeAssuming content has value
<span>YES</span>, and status has valueDone.Input | Output -------------------------------------+--------------------------------- <p ht-bind="status"></p> | <p>Done</p> <p ht-bind-html="content">SHOW</p> | <p><span>YES</span></p>
ht-styleattributeAssuming color has value
red, and styles has value{color:green,'font-size':'12px'}.Input | Output -----------------------------------------------------------+--------------------------------- <p ht-style="styles">SHOW</p> | <p class="color:green;font-size:12px;">SHOW</p> <p style="font-size:14px" ht-style="{color:color}">SHOW</p>| <p style="font-size:14px;color:red">SHOW</p>
This accepts the same format as ng-style
LICENSE: MIT