angular-template

Angular-Like HTML Template

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;

  1. inline expression
    e.g. {{ foo }}

  2. ht-ifattribute
    e.g., <div ht-if="foo">..</div>

  3. ht-repeatattribute
    e.g., <li ht-repeat="el in list">..</li>
    e.g., <li ht-repeat="(k,v) in list">..</li>

  4. ht-include attribute
    e.g., <div ht-include="'file.html'"></div>

Install

npm install angular-template

Usage

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.js

Converting Angular-Like Expressions

This will convert the angular-like expressions into html.

  1. Curly braces expression.

    Assuming foo has the value of aBcand the value is 1234

    Input                                    | 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]
  2. ht-ifattribute

    Assuming foo has value true, and bar has value false

    Input                                | Output
    -------------------------------------+---------------------------------
    <p ht-if="foo">SHOW</p>              | <p>SHOW</p>    
    <p ht-if="bar">NO SHOW</p>           | <p></p>
  3. ht-includeattribute

    Assuming foo.html has the following contents <b>{{prop}} is {{value}}</b>and that prop="number", item = 20

    The 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>
  1. ht-repeatattribute

    Assuming 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 > 1

    Input                                                    | 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>
  2. ht-classattribute

    Assuming 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

  1. ht-bind, ht-bind-htmlattribute

    Assuming content has value <span>YES</span>, and status has value Done.

    Input                                | Output
    -------------------------------------+---------------------------------
    <p ht-bind="status"></p>             | <p>Done</p>    
    <p ht-bind-html="content">SHOW</p>   | <p><span>YES</span></p>
  1. ht-styleattribute

    Assuming 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

Repository

https@github.com:allenhwkim/angular-template


上一篇:基于小程序请求接口 wx.request 封装的类 axios 请求
下一篇:jquery实现下拉多选框

相关推荐

  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    3 个月前
  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    3 年前
  • 高级 Angular 组件模式 (3a)

    03a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components ...

    3 年前
  • 问道Angular——Angular设置别名alias

    设置别名   在根目录下tsconfig.json中添加baseUrl和paths 访问环境变量   添加了@env别名,以便能够import { environment } fro...

    2 年前
  • 问道Angular——Angular刷新当前页面

    onSameUrlNavigation   从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、   有两个值'reload'和'ignore'。

    2 年前
  • 问道Angular——APP_INITIALIZER

    概述   有时需要在加载应用之前运行代码,有时希望暂停应用初始化,直到完成某些限制之后再执行。APPINITIALIZER令牌可以完成这项操作。 APPINITIALIZER是一个函数,在应用改程...

    2 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    9 个月前
  • 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网(https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 139239201904181526...

    1 年前
  • 通过框架设计理解react、angular、vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    8 个月前
  • 通过框架设计理解React、Angular、Vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    8 个月前

官方社区

扫码加入 JavaScript 社区