Angular Light

Angular Light is a library for building interactive MVVM web interfaces/applications. Angular.js + Knockout.js way.

Download (v0.14) Source on GitHub


Two Way Data-Binding, Templates, Directives, Text directives, Static bindings, Invisible mode and more.


~21kb minified and gzipped, no dependency.

Browser support

Angular Light supports all major browsers: Google Chrome, Firefox, IE9+ (IE8 with jQuery)


Angular Light supports and Array.observe for better performance

The Basics

<div al-app class="col-lg-4 well">
    <input type="text" al-value="name" />
    <h3>Hello {{name}}!</h3>

Hello {{name}}!

Edit Me

Simple binding

var app = {
  name: 'Some text',
  click: () => = 'Hello'

alight('#app', app);
<div id="app">
    <input al-value="name" type="text" />
    {{name}} <br/>
    <button @click="click()">Set Hello</button>

Edit Me

Add Some Control

<div class="well">

    <form class="form-inline" @submit="append()">
        <input al-value="title" class="input-medium" type="text"/>
        <input class="btn" type="submit" value="Append" />

        <li al-repeat="item in list">
            <input type="checkbox" al-checked="item.done" />
            <span :class.done="item.done">{{item.title}}</span>
            <a href @click="remove($index)">remove</a>

    <p>Total: {{total()}} / {{list.length}}</p>
var app = {
  list: [{ title: 'first', done: true },
         { title: 'second', done: false }],
  append: () => {
    app.list.push({title: app.title});
    app.title = '';
  remove: (n) => app.list.splice(n, 1),
  total: () => app.list.filter((i) => !i.done).length

alight('body', app);


Total: {{total()}} / {{list.length}}

Edit Me

Create directives

<div al-app>
    <h3 al-color>Click me</h3>
</div> = function(element, name, scope) {
    var n;
    $(element).on('click', function() {
        $(element).css('background-color', n?'red':'blue');
        n = !n;

Click me

Edit Me

Create text-directives

<input type="text" placeholder="{{#counter 3}}" />
{{#counter 1}} seconds
alight.text.counter = function(callback, expression, scope) {
    var step = scope.$eval(expression);  // eval expression
    var index = 0;
    callback(index);  // set init result
        index += step;
        callback(index)  // set result
        scope.$scan()  // $digest
    }, 1000);

{{#counter 1}} seconds

Edit Me

Create filters

<input type="text" al-value="name" />
{{name | upper}}
alight.filters.upper = function(value) {
  return value.toUpperCase();

{{name | upper}}

Edit Me