Angular JS

First delve into Angular JS.

by Vico Bertogli III

HTML

<div ng-app="PersonAlizer" ng-controller="personController">
		<span><label>First Name:</label><input type="text" ng-model="firstName" ng-change="change()"></span>
		<span><label>Last Name:</label><input type="text" ng-model="lastName" ng-change="change()"></span>
		<span><label>Message:</label><input type="text" ng-model="welcomeMessage" ng-change="change()"></span>
		<span><label>Full Name:</label>{{firstName + " " + lastName}}</span>
		<span><label>Message:</label><i>{{welcomeMessage + " " + firstName + " " + lastName}}</i></span>
		<span><label>Changes:</label> {{counter}}</span>
            <span><label>Form Modified?</label>{{elScope}}</span>
	</div>

SCSS

* {
    position:relative;
    z-index:1;
    padding:0px;
    margin:0px;
}
html, body {
 width:100%;
   height:100%;
    overflow-x:hidden;
    overflow-y:scroll;

}
div[ng-app="PersonAlizer"] {
    font-family:"Helvetica";
    color:#333;
     >span {
        display:block;
        margin:15px;
        padding:5px;
        background:#fefefe;
        
        input {
            padding:5px;
            font-size:.75em;
            line-height:1em;
            min-width:100px;
            max-width:400px;
            width:75%;
        }
        
        label {
            font-weight:bold; 
            margin-right:10px;
            
            @media (max-width: 500px) {
                display:block;
            }

        }
    }
}

JavaScript

angular.module('PersonAlizer', []).controller('personController', ['$scope', function ($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.welcomeMessage = "Welcome";
    $scope.counter = 0;
    $scope.elScope = false;
    $scope.change = function (elScope) {
        $scope.elScope = true;
        $scope.counter++;
    };
}]);