JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="NameController" class="well">
     <h3>{{boy.getInfo()}}</h3>

    <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control" ng-model="boy.name" />
    </div>
    <div class="form-group">
        <label>Surname:</label>
        <input type="text" class="form-control" ng-model="boy.surname" />
    </div>
    <div class="form-group">
        <label>Age:</label>
        <input type="text" class="form-control" ng-model="boy.age" />
    </div>
</div>

JavaScript

(function () {
    
    function Boy(n, s, a) {
        this.name = n;
        this.surname = s;
        this.age = a;

        this.getInfo = function () {
            return this.name + ' ' + this.surname + ' (' + this.age + ')';
        }
    }

    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        var NameController = function ($scope) {
            $scope.boy = new Boy("Foo", "Bar", 32);
        };
        NameController.$inject = ['$scope'];

        app.controller("NameController", NameController);

        angular.bootstrap(document, ['myApp']);
    });


}());