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;
    };