ng-transform Part1

A quick demonstration of creating a text transformation utility using Angular.js

by Josh Carroll

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<div class="panel panel-default" data-ng-controller="transformCtrl as ctrl">
    <div class="panel-body">
        <form role="form">
            <div class="form-group">
                <label for="tbInput">Input</label>
                <textarea id="tbInput" class="form-control" rows="6" data-ng-model="ctrl.input"></textarea>
            </div>
            <div class="form-group">
                <label for="tbOutput">Output</label>
                <textarea id="tbOutput" class="form-control" rows="6" data-ng-model="ctrl.output"></textarea>
            </div>
            <div class="row">
                <div class="form-group col-xs-8">
                    <button type="button" class="btn btn-primary" data-ng-click="ctrl.transform()">Submit</button>
                </div>
                <div class="col-xs-4">
                    <h4>ng-transform<small><a href="http://www.technofattie.com/tags/ng-transform.html" target="_blank"> by Techno Fattie</a></small></h4>
                </div>
            </div>
        </form>
    </div>
</div>

JavaScript

var Controllers;
(function (Controllers) {

    var TransformCtrl = function () {
        this.input = "Name    FaceShape   LegacyProperty  NeverGetsUsed   NobodyKnowsWhatThisMeans KillMeNow";
        this.output = "";

        this.transformations = [
            this.splitWhiteSpace,
            this.alphabetize,
            this.lowercaseFirst,
            this.propertiesToJSObject
        ];
    };

    TransformCtrl.prototype.splitWhiteSpace = function (input) {
        return input.split(/\s+/);
    };

    TransformCtrl.prototype.alphabetize = function (input) {
        input.sort(function (a, b) {
            return a.localeCompare(b);
        });
        return input;
    };

    TransformCtrl.prototype.lowercaseFirst = function (input) {
        var output = [],
            i = 0;

        for (i = 0; i < input.length; i++) {
            output.push(this.lowercaseFirstSingle(input[i]));
        }

        return output;
    };

    TransformCtrl.prototype.lowercaseFirstSingle = function (str) {
        return str.replace(/^([A-Z]{1})/g, function (match) {
            return match.toLowerCase();
        });
    };

    TransformCtrl.prototype.propertiesToJSObject = function (input) {
        var objLines = ["var NewObj = function(config){"];

        angular.forEach(input, function (prop) {
            objLines.push("  this." + prop + " = config." + prop + ";");
        });

        objLines.push("};");

        return objLines.join("\n");
    };

    TransformCtrl.prototype.transform = function () {
        var input = angular.copy(this.input),
            transformFunctions = this.transformations.slice(0);

        for (var i = 0; i < transformFunctions.length; i++) {
            input = transformFunctions[i].call(this, angular.copy(input));
        }

        this.output = input;
    };

    Controllers.TransformCtrl = TransformCtrl;

}(Controllers || (Controllers = {})));

(function () {
    angular.element(document).ready(function () {
        var...