Angular Light¶

alight.debug¶

Turn on a logging debug information

• alight.debug.scan - logging scan operations
• alight.debug.directive - logging binding directives
• alight.debug.parser - logging parsing expressions
• alight.debug.watch - logging function $watch
• alight.debug.watchText - logging function $watchText

alight.autostart = false¶

Don’t call alight.bootstrap on start

alight.bootstrap(element)¶

Manual start applications, element - DOM element or array of elements. If element is undefined then Angular Light will start all al-app on the document. If alight.autostart = true, the method will be called after the DOM is ready

alight.applyBindings(scope, element, config)¶

Bind the scope to the DOM element

• scope - Scope object
• element - DOM element
• config.skip_top = false - Skip binding the top DOM element
• config.skip_attr = [‘al-repeat’, ‘al-app’] - Skip attributes for a binding, for the top element

var scope = alight.Scope();
var element = document.body;
alight.applyBindings(scope, element);

alight.Scope()¶

Create a (root) Scope

alight.controllers¶

Dictionary of controllers

alight.filters¶

Dictionary of filters

alight.directives¶

Dictionary of directives

alight.nextTick(callback)¶

Execute the function on next tick

alight.getController(name, scope)¶

Take a controller by name. A controller can be located in alight.controllers, in global scope

Scope.$watch(name, callback, option)¶

Set the tracking variable. Also you can track system events, it returns object with method stop()

Name:

• <expression> - Expression/model
• <a function> - Track the result of the function, the function are called every iteration of $scan.
• “$destroy” - Track a destroying scope
• “$any” - Track a modifying any object
• “$finishScan” - a callback is executed as soon as $scan finish work
• “$finishBinding” - the callback is called when a binding process finishes, sample
• “$finishScanOnce”

Option:

• option = true or option.isArray = true - watch an array
• option.init = true - Execute callback
• option.readOnly = true - You can use it if the callback doesn’t modify the scope. (an optimization option).
• option.deep = true - a deep comparison for the object.
• option.isArray
• option.OneTime
• option.onStop

Optimization tip: If callback returns ‘$scanNoChanges’ then $scan will not run extra-loop (like readonly watch)

Scope.$compile(expression, option)¶

Compile an expression

option:

• option.input - list of input arguments
• option.no_return - a function will not return any result (compile a statment)
• option.string - result of method will convert to string

 var scope = alight.Scope()
 var fn = scope.$compile('"hello " + title')
 scope.title = 'linux'
 fn() // return "hello linux"
 scope.title = 'macos'
 fn() // return "hello macos"

 var fn = scope.$compile('title + v', { input:['v'] })
 fn(' X') // return "macos X"

var fn = scope.$compile('title = v', { input:['v'], no_return:true })
fn('linux') // scope.title = "linux"

Scope.$eval(expression)¶

Execute an expression

Scope.$watchText(tpl, callback)¶

Track the template

Scope.$compileText(tpl)¶

Compile the template. Method is depricated (since v0.9)

var scope = alight.Scope()
var fn = scope.$compileText('Hello {{title}}!')
scope.title = 'linux'
fn() // return "Hello linux!"

Scope.$evalText(tpl)¶

Evalute the template. Method is depricated (since v0.9)

Scope.$new(isolate)¶

Create a child Scope, if isolate == true, then child scope will not be inherited from parent scope, if isolate == ‘root’ then it will be separate root scope.

Scope.$destroy()¶

Destroy the Scope.

Scope.$scan(callback or option)¶

Start the search for changes

• callback - Method will be called when $scan finishes a work, even if $scan has already started from other a place.
• option.callback - see above.
• option.top - Choose the root scope for current scanning (depricated).
• option.late = (true/false) - If there is a few $scan commands, Angular Light will call only last one.

var scope = alight.Scope()
scope.$watch('title', function(value) {
    console.log('title =', value)
}) // make observing
scope.title = 'new'
scope.$scan()
// print title = new
scope.title = 'linux'
scope.$scan()
// print title = linux
scope.$scan()
// do nothing

Scope.$scanAsync(callback)¶

It the same as Scope.$scan({late: true, callback: callback})

Scope.$getValue(name)¶

Take the value of the variable, also you can use Scope.$eval

Scope.$setValue(name, value)¶

Set the value of the variable

scope.var = 1;
scope.path.var = 2;
scope.path[scope.key] = 3;

// equal
scope.$setValue('var', 1);
scope.$setValue('path.var', 2);
scope.$setValue('path[key]', 3);

Attributes of directive:¶

• priority - you can set priority for a directive
• template - custom template
• templateUrl - link to template
• scope (true/’isolate’/’root’) - to make a child scope, an isolated scope (with no inheritance), a separate root scope
• restrict = ‘A’, can be ‘AEM’, ‘A’ matches attribute name, ‘E’ matches element name, ‘M’ matches class name
• init - the method is called when the directive is made, before template, scope
• link - the method is called after template, scope
• anyAttr - you can make a custom attribute, look. directive preprocessor

 alight.directives.al.stop = {
     priority: -10,
     template: '<b></b>',
     scope: true,
     init: function(element, name, scope, env) {
         return {
             owner: true
         };
     },
     link: function(element, name, scope, env) {
     }
 };

If a directive returns the flag owner return { owner:true }, then the process of binding will miss child DOM-elements, it is necessary for the directives which are themselves controlled subsidiary of DOM, such as al-repeat, al-controller, al-include, al-stop, etc.

Examples of inheritance¶

• al-value -> al-value-delay
• al-show -> al-show-slow
• al-repeat, add “$even”, “$odd” into the directive
• al-repeat, change input expression my-repeat=”list.foreach item”
• al-repeat, change rendering

Events¶

• al-click, todo sample
• al-dblclick
• al-submit, todo sample
• al-blur, Sample
• al-change, Sample
• al-focus, Sample
• al-keydown, Sample
• al-keypress, Sample
• al-keyup, Sample
• al-mousedown, Sample
• al-mouseenter, Sample
• al-mouseleave, Sample
• al-mousemove, Sample
• al-mouseover, Sample
• al-mouseup, Sample

Controls¶

• al-checked, todo sample
• al-radio sample1 sample2
• al-value, todo sample
• al-disable
• al-enable
• al-focused, two-way bind for focus events. Sample
• al-readonly

Special directives¶

• al-app, init application with current element, examples
• al-cloak, hide current element until activate the application, examples
• al-controller, apply a custom controller and make child scope for current element.
• al-class/al-css, todo sample, animated sample
• al-style examples
• al-hide, sample with animation
• al-html
• al-if, sample with animation
• al-ifnot, sample with animation
• al-include, loads a html block from the server, sample with animation
• al-init
• al-repeat
• al-show, sample with animation
• al-src
• al-stop, stops a bind process for the element and his children.
• al-text, example

Bind-once¶

• bo-if
• bo-ifnot
• bo-repeat
• bo-src
• bo-switch
• bo-switchDefault
• bo-switchWhen

data¶

• To convert the date to string
• Input argument: date

<div>{{when | date:yyyy-mm-dd }}</div>

filter¶

• To filter the list
• Input argument: variable

Example

slice¶

• To slice the list
• input arguments: numbers

<div al-repeat="it in list | slice:a"></div>
<div al-repeat="it in list | slice:a,b"></div>

generator¶

• The filter makes an array (for al-repeat)
• input arguments: numbers

<div al-repeat="it in 10 | generator"></div>
<div al-repeat="it in size | generator"></div>

Example

toArray¶

• converts an object to array (for al-repeat)
• input arguments: key, value

<div al-repeat="item in object | toArray:key,value track by key">

Example

orderBy¶

• sorts an array by key (for al-repeat)
• input arguments: key, reverse

<div al-repeat="item in array | orderBy:key,reverse">

Example

throttle¶

• makes delay for output, pattern debounce
• input arguments: delay

<input al-value="link" type="text" />
<p>{{link | throttle:300 | loadFromServer}}</p>

Example

Overview¶

A filter should be placed in alight.filters (you can change path with alight.getFilter), or in scope.$ns for private filters.

alight.filters.mylimit = function(exp, scope) {
    var ce = scope.$compile(exp);       // compile the input expression
    return function(value) {            // return handler
        var limit = Number(ce() || 5);
        return value.slice(0, limit)
    }
}

Example on jsfiddle

Input arguments¶

• expression - an input expression
• scope - current Scope

The filter should return a handler/function, one instance of filter.

alight.getFilter(name, scope, param)¶

This function look for a necessary filter, you can change it, for example you can make own location for your filters.

Overview¶

Async filters let you transform data in async mode, a filter should be placed in alight.filters or in scope.$ns for private filters.

alight.filters.trottle = function(delay, scope, env) {
    delay = Number(delay);
    var to;
    return {
        onChange: function(value) {
            if(to) clearTimeout(to);
            to = setTimeout(function() {
                to = null;
                env.setValue(value);
                scope.$scan();
            }, delay);
        }
    }
}

Input arguments¶

• expression - an input expression
• scope - current Scope
• env - extra functional
• env.setValue(value) - set value of filter

alight.filters.asyncFilter = function(expression, scope, env) {
    return {
        watchMode: 'deep',
        onChange: function(value) {},
        onStop: function() {}
    }
}

• watchMode, you can set ‘simple’/’array’/’deep’, if you need to change a watch mode for the input
• onChange - it’s executed on every change of input
• onStop - it’s executed when a watch object was removed

Examples¶

• Example trottle
• Example with loading from server

Overview¶

An able to control a declarative data binding in the HTML

<div al-app>
    counter {{#counter}}
</div>

 alight.text.counter = function(callback, expression, scope) {
     var n = 0;
     setInterval(function(){
         n++;
         callback(n)  // set result
         scope.$scan()  // $digest
     }, 1000);
 }

Input arguments¶

• callback - a function to set a value
• expression - expression of directive
• scope
• env. finally - a function to set the final value, after that $watch will be removed.
• env.**setter** = callback

Examples¶

• Information output delay
• An counter
• Sample with bindonce

Overview¶

Waits when an expression has a value (a non-undefined value), then stops watching. You need append ”::” in front of expression for using One-Time binding. It works with $watch, $watchText, directives and declarative bindings.

<div class="red {{::class}}"> {{::text}} </div>
<div al-show="::visible"></div>
<li al-repeat="it in ::list">...</li>
and so on

Examples¶

• Sample with declarative bindings
• Sample with al-repeat

1. Manual binding, applyBindings¶

<div id="app">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

Make scope, then to bind it to the DOM with alight.applyBindings

var tag = document.querySelector('#app');  // take the tag

var scope = alight.Scope();  // make a Scope
scope.title = 'Hello!';  // set init value

alight.applyBindings(scope, tag);  // apply bindings

Example on jsfiddle

2. Auto binding, al-app¶

alight.bootstrap is called on start system, it takes each element with al-app and execute alight.applyBindings

<div al-app al-init="title='Hello!'">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

Example on jsfiddle

3. Manual binding with alight.bootstrap¶

You can bind custom elements with alight.bootstrap

<div id="app" al-init="title='Hello!'">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

var tag = document.querySelector('#app');  // take the tag

alight.bootstrap([tag]);  // bind to DOM

Example on jsfiddle

4. Deferred binding, alight.bootstrap¶

<div al-app al-init="title='Hello!'">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

alight.autostart = false;
setTimeout(alight.bootstrap, 2000);

Example on jsfiddle

5. To bind to element with no DOM¶

<div id="app"></div>

var tag = document.createElement('div');  // make an element
// set up template
tag.innerHTML = '<input al-value="title" type="text" class="form-control" /><p>{{title}}</p>';
var scope = alight.Scope();  // make a scope
scope.title = 'Hello!';  // set init value

alight.applyBindings(scope, tag);  // apply bindings

document.querySelector('#app').appendChild(tag);  // append to DOM

Example on jsfiddle

6. Manual binding #2¶

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

alight.bootstrap({
    $el: '#app',
    data: {
        name: 'Some text'
    },
    click: function() {
        this.data.name = 'Hello'
    }
});

Example on jsfiddle