Javascript mental gymnastic

var s = 
     '(function() {\
        return function(n){\
            return n * n;\
        };\
     })()';
     
     
var f = eval(s);
console.log(f);
alert(f(3));

Give semantics to your web app using AngularJS

Make percent inputs conform to their true semantics, i.e. 27% is 0.27, just like in Excel. Not the textual 27 which necessitates manually dividing the number by 100 when using it further on expression.



When you input 27 on Interest Rate Per Annum textbox, the model’s returned value should be 0.27. Note the custom attribute percent below. AngularJS can augment your existing HTML and introduce new attributes to them, it can even create new HTML tags. The percent attribute automatically convert the percent input to its percent value.

<input type='text' ng-model='InterestRatePerAnnum' percent/>
  
<input type=’text’ ng-model='TotalContractPrice' />
 
.
.
.

var result = $scope.InterestRatePerAnnum * $scope.TotalContractPrice;

Live code: http://jsfiddle.net/b75xaj69/



Contrast to manual approach:

<input type='text' id='InterestRatePerAnnum' />
 
<input type=’text’ id='TotalContractPrice' />

.
.
.
 
var result = ($('#InterestRatePerAnnum').val() / 100) * $('#TotalContractPrice').val();

Binding vs DOM manipulation. AngularJS vs jQuery

Bind JavaScript values (aka JSON) to HTML so incessant element placeholders won’t be needed as much

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>

<body ng-app>


<label for="Multiplier">Multiplier</label><input ng-model="Multiplier" type="text"><br/>
<label for="Multiplicand">Multiplier</label><input ng-model="Multiplicand" type="text"><br/>
<input value="Multiply" type="button"/><br/>

<b>Product of {{Multiplier}} and {{Multiplicand}} is {{Multiplier * Multiplicand}}</b>




</body>
</html>

DOM Manipulation, very tedious:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>

<body>


<label for="Multiplier">Multiplier</label><input id="Multiplier" type="text"/><br/>
<label for="Multiplicand">Multiplier</label><input id="Multiplicand" type="text"/><br/>
<input value="Multiply" type="button" id="Multiply"/><br/>

<b>Product of <span id="MultiplierSpan"></span> and <span id="MultiplicandSpan"></span> is <span id="ProductSpan"></span></b>


<script type="text/javascript">

    $(function() {

        $('#Multiplier').keyup(function() {
            var multiplier = $('#Multiplier').val();
            $('#MultiplierSpan').text(multiplier);


            computeProduct();
        });

        $('#Multiplicand').keyup(function() {
            var multiplicand = $('#Multiplicand').val();
            $('#MultiplicandSpan').text(multiplicand);


            computeProduct();
        });


        function computeProduct() {
            var multiplier = $('#Multiplier').val();
            var multiplicand = $('#Multiplicand').val();

            var product = multiplier * multiplicand;
            $('#ProductSpan').text(product);
        }



    });

</script>

</body>
</html>

jQuery is too imperative, get declarative with AngularJS

Imperative approach is too ceremonial:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>
<body>

Show Favorite Numbers: <input id="ShowFaveNumbers" type="checkbox">

<ul id="FaveNumbers">
    <li>5</li>
    <li>2</li>
    <li>0</li>
</ul>



<script>
    $(function() {

        function showOrHide() {
            var isChecked = $('#ShowFaveNumbers').is(':checked');

            var fn = $('#FaveNumbers');
            if (isChecked)
                fn.show();
            else
                fn.hide();
        }


        $('#ShowFaveNumbers').change(function() {
            showOrHide();
        });

        showOrHide();

    });
</script>


</body>
</html>

Get declarative with AngularJS:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="angular.min.js"></script>

</head>

<body ng-app>

Show Favorite Numbers: <input ng-model="ShowFaveNumbers" type="checkbox">

<ul ng-show="ShowFaveNumbers">
    <li>5</li>
    <li>2</li>
    <li>0</li>
</ul>



</body>
</html>

Live codes:

AngularJS: http://jsfiddle.net/t83UC/

jQuery: http://jsfiddle.net/ZzeuR/

jQuery many rules makes me embrace AngularJS more

Converting jQuery prop method to is method:

var isChecked = $('#ShowFaveNumbers').prop('checked');

Is not a mere changing of the method:

var isChecked = $('#ShowFaveNumbers').is('checked');

You have to remember some rules, must do this:

var isChecked = $('#ShowFaveNumbers').is(':checked');

In AngularJS, it's just a mere getting of model

var isChecked = $scope.ShowFaveNumbers;

Sharing variable to partial view

Given these tags on main page:

<body ng-app='TheApp' ng-controller='TheController'>
   First <input ng-model='great.message'/>
</body>

And this tag on the partial view:

Second <input ng-model='great.message'/>

First and Second will be in sync with each other if you typed on First first. If you typed on Second first, the model on First input won't sync with the Second.


To correct that, must initialize the model on the First's controller:

function DepartmentController($scope) {
    $scope.great = { message : 'You see' };
}

AngularJS checkbox initialization

With ng-checked=true, though the checkbox's state is checked, the model is not synched with the checkbox's state on initial page load, i.e. Love won't appear and isImportant won't appear on UI: http://jsfiddle.net/Gs594/

<p>Show important: <input ng-model='isImportant' type='checkbox' ng-checked='true'/></p>

<p ng-show='isImportant'>Love</p>

<p>{{isImportant}}</p>

​

Value initialization should be done on ng-init: http://jsfiddle.net/Gs594/1/

<p>Show important: <input ng-model='isImportant' type='checkbox' ng-init='isImportant=true'/></p>

<p ng-show='isImportant'>Love</p>

<p>{{isImportant}}</p>
​

Love will appear, and true would appear too.


Better yet, initialize models on controller: http://jsfiddle.net/Gs594/2/

<p>Show important: <input ng-model='isImportant' type='checkbox'/></p>

<p ng-show='isImportant'>Love</p>

<p>{{isImportant}}</p>


function SomeController($scope) {
    $scope.isImportant = true;        
}​

​


That left us with a lingering question, if model initialization would suffice on ng-init and it's ideal to set them on controller, when to use ng-checked then? For the life of me I can't find it in google, and I find ng-checked anathema to AngularJS' single-source-of-truth principle; and in order to facilitate single-source-of-truth principle, two-way binding should work all the time, but in ng-checked case I don't know why it doesn't sync its state to the model.

I'm still finding a use case for ng-checked ツ