JSFiddle

  • aLight - The Basics

    jQuery 1.10.1, HTML, CSS, Babel + JSX 

    var app = {
	name: 'Hello',
	start: () => {
  	setTimeout(() => {
      app.name = 'world';
      app.$scan();
    }, 2000);
  }
};

alight.bootstrap('.app', app); // bind to all elements ...

  • Vue.js Quick Example

    No-Library (pure JS), HTML, CSS, JavaScript 

    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods : {
    btn: function () {

    	(async () => {
        var result = await fetch('https://api.github ...

  • Vue.js Quick Example

    No-Library (pure JS), HTML, CSS, JavaScript 

    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods : {
    btn: () => {



    }
  }
})

  • aLight - ui-date

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2 

    function main(scope) {
	scope.value = new Date();
}

var ui;
alight.directives.ui = ui = {};

ui.date = function(scope, elm, name) {
  var ...

  • Angular: Empty Fiddle

    http://angularjs.org/ 

    var myApp = angular.module('myApp',[]);

myApp.controller("myCtrl", function($scope) {
		    $scope.products = [
			    {name: 'Phone'},
			    {name: 'Computer'},
			    {name: 'Keyboard'},
			    {name: 'Mouse ...

  • aLight: filter

    jQuery 1.10.1, HTML, CSS, JavaScript 

    <div class="container" al-app>
    <div class="row" al-init="friends = [{name:'John', phone:'555-1276', surface:false},
                             {name:'Mary', phone:'800-BIG-MARY', surface:false},
                             {name:'Mike', phone:'555-4321', surface:false},
                             {name:'Adam', phone:'555-5678', surface:true},
                             {name:'Julie', phone:'555-8765', surface:true},
                             {name:'Juliette', phone:'555-5678', surface:false}]">
        <div class="span12" al-init="search={}">
            All: <input type="text" al-value="search.__all" /> <br/>
            Name: <input type="text" al-value="search.name" /> <br/>
            Phone: <input type="text" al-value="search.phone" /> <br/>
            <input type="checkbox" al-checked="search.surface" />
            <table class="table table-bordered">
                <tr al-repeat="it in friends | filter:search">
                    <td>{{=it.name}}</td>
                    <td>{{=it.phone}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

  • Angular 2 ES5 Play #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript 

    (function() {
	var HelloApp,
		NameThing,
		ListThing;

	ListThing = ng
		.Component({
			selector: 'list-thing',
			template: '<ul><li *ng-for="#name of names">{{name}} {{foo(name)}}</li></ul>',
			directives: [ng.NgFor]
		})
		.Class({
			constructor: function ...

  • aLight - Add Some Control

    jQuery 1.10.1, HTML, CSS, JavaScript 

    function todoCtrl($scope) {
    $scope.list = [
        { title: 'first', done: true },
        { title: 'second', done: false }];

		$scope.activeItem = null;
};

  • aLight - Add Some Control

    jQuery 1.10.1, HTML, CSS, JavaScript 

    function todoCtrl($scope) {
    $scope.list = [
        { title: 'first', done: true },
        { title: 'second', done: false }];

		$scope.activeItem = null;
};

  • aLight - Add Some Control #5 is the latest revision

    jQuery 1.10.1, HTML, CSS, JavaScript 

    function todoCtrl($scope) {
    $scope.list = [
        { title: 'first', done: true },
        { title: 'second', done: false }];

		$scope.activeItem = null;
};