aLight - The Basics

by lega911

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<div al-app="#one mainCtrl" class="span4 well">
    <input type="text" al-value="name" />
</div>
<div al-app="#one" class="span4 well">
    <h3>Hello {{name}}!</h3>
</div>
<div al-app="#one" class="span4 well">
    <input type="text" al-value="name" />
    <h3>Hello {{name}}!</h3>
</div>

JavaScript

alight.controllers.mainCtrl = function(scope) {
    scope.name = 'hello';
};

setTimeout(function() {
    var scope = alight.apps.one;  // access by name
    scope.name = 'world';
    scope.$scan()
}, 2000);