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

Powerful

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

Compact

~21kb minified and gzipped, no dependency.

Browser support

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

Object.observe

Angular Light supports Object.observer and Array.observe for better performance

The Basics

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

Hello {{name}}!

Edit Me

Simple binding

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

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

Edit Me

Add Some Control

<div class="well">
    <h3>ToDo</h3>

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

    <ul>
        <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>
        </li>
    </ul>

    <p>Total: {{total()}} / {{list.length}}</p>
</div>
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);

ToDo

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

Edit Me

Create directives

<div al-app>
    <h3 al-color>Click me</h3>
</div>
alight.directives.al.color = 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
    setInterval(function(){
        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