Angular Light

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

Download (v0.12) Source on GitHub

Powerful

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

Compact

~17kb 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

alight.bootstrap({
    $el: '#app',
    data: {
        name: 'Some text'
    },
    click: function() {
        this.data.name = 'Hello'
    }
});
<div id="app">
    <input al-value="data.name" type="text" />
    {{data.name}} <br/>
    <button al-click="click()">Set Hello</button>
</div>
{{data.name}}

Edit Me

Add Some Control

<div al-app="todoCtrl" class="well">
    <h3>ToDo</h3>

    <form class="form-inline" al-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 al-css="done:item.done">{{item.title}}</span>
            <a href al-click="remove(item)">remove</a>
        </li>
    </ul>

    <p>Total: {{total()}} / {{list.length}}</p>
</div>
function todoCtrl($scope) {
    $scope.list = [
        { title: 'first', done: true },
        { title: 'second', done: false }];

    $scope.append = function() {
        $scope.list.push({ title: $scope.title, done: false });
        $scope.title = '';
    };
    $scope.remove = function(item) {
        var i = $scope.list.indexOf(item);
        $scope.list.splice(i, 1);
    };

    $scope.total = function() {
        var total = 0;
        $.each($scope.list, function(_, item) {
            if(!item.done) total += 1
        });
        return total;
    };
};

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="size" placeholder="Enter number" />
<i al-repeat="it in [1,2,3,4,5,6,7,8,9] | mylimit:size">({{it}})</i>
alight.filters.mylimit = function(exp, scope) {
    var ce = scope.$compile(exp);
    return function(value) {
        var limit = Number(ce() || 5);
        return value.slice(0, limit)
    }
}

({{it}})

Edit Me