jquery and angular tests

simple testing snippets

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="root" ng-app>
    <div>
        <form name="imperative">
            <label for="firstName">First name:</label>
            <input type="text" name="firstName" id="firstName" />
        </form> <span class="data-output" id="name-output"></span>

    </div>
    <hr />
    <form name="declarative">
        <label for="firstName">First name:</label>
        <!-- the next two lines create the 2-way binding between the model and view -->
        <input type="text" name="firstName" id="firstName" ng-model="firstName" />
<span class="data-output">{{firstName}}</span>

    </form>
</div>

CSS

form {
    margin:10px;
}
.data-output {
    display:block;
    border:2px solid #585858;
    padding:5px 10px;
    line-height:18px;
}
hr {
    margin:10px 0;
    border:1px solid #ff0000;
}

JavaScript

//jquery data-binding: inperative
$(function () {
    $('form[name="imperative"] input:text').on('keyup', function (e) {
        var txt = $(this).val();
        console.log(txt);
        if (txt !== '') {
            $('#name-output').text(txt);
        }
    });

});

/**
 * angular form data binding : delcarative
 */

/**
 * module pattern
 */
var outer = 'outer variable',
    innerModuleProxy ='';
var myModule = (function () {
    var innerModule = 'inner module var';
    outer ='overwrite';
    return function(){
        return innerModule;
    };
    
    /*
    {
        getInnerModule:function(){
            return innerModule;
        }
    };
    */
})();

console.log(myModule());
console.log(innerModule);
console.log(outer);




//myModule();