AngularJs(Part 2)

I am still tired to translate these into Chinese.

but who cares? i write these posts just for myself

View

after a browser is done transforming the arkup's text to the DOM tree.
the AngularJs kicks in and traverses the parsed DOM structure.
each time it encounters a directive, AngularJs executes its logic to turn directives into
dynamc parts of the screen.
(AngularJs works using the live ,valid DOM tree. so do use HTML tags correctly.)


Declarative template view.
Angular promotes a declarative approach to UI construction.
in the past, if we want to change the UI, we already first defined a javascript function which tells
the logic and then invoke the function.
but in angular, the method is to add a directive to the DOM. what the directive does is to teach the browser
to do what we want to do.


let's image that we were asked to crate a form where user can type in a short message.
and them send it by clicking on a button. but there are some addtional requirements such as message size should be
limited to 100 characters and the Send button should be disabled if this limit is exceeded. a user should know how
many characters are left as they type. if the number of remaining characters is less than ten, the displayed number should
change the style to warn users. it should be possiable to clear text .
what will be do through our tranditional way like JQuery?
here is the code:
<form>
    <input id="message" type="text"/>
    <p>remaining <span id="remain"></span> </p>
    <input id="send" type="button" value="Send"/>
    <input id="clear" type="button" value="Clear"/>
</form>

$(document).ready(function(){
    $("#message").bind("change",function(){
        var messge=$(this).val();
        $("#remain").html(100-message.length);
        if(100-message.length<=0)
            $("#send").disable();
        else if (100-message.length<10)
            $("#remain").css("color","red");
        
    });
});
what we do in the javascript snippet is to find the DOM element and change its behavior.

now here is what we do in Angular:
<form action="" ng-controller="FormController">
        <input ng-model="message" ng-disabled="!hasValid()" />
        <p>remaining <span ng-class="{'text-warning':shouldWarn()}"> {{left()}}</span></p>
        <input type="button" value="Submit" ng-click='send()' ng-disabled="!hasValid()"/>
        <input type="button" value="Clear" ng-click="clear()"/>
</form>
function FormController($scope){
    $scope.message="";
    $scope.left=function(){
        return 10-$scope.message.length;
    }
    $scope.clear=function(){
        $scope.message="";
    }
    $scope.hasValid=function(){
        return $scope.left()>0;
    }
    $scope.shouldWarn=function(){
        return (100-$scope.message.length)<10;
    }
}
See the ng-XXX in the HTML tag. it just tells what we want to do with this tag.
in other words , we add new syntax to the HTML tag.
take ng-class as an example:
ng-class="{'text-warning':shouldWarn()}"   : if shouldWarn() return true, add class text-warning to the html tag.
maybe it's a little confusing.
but what do you mean when adding a attribute "style" to a specified element like :<div style="color:red;"></div>
what you want to do here is to add a display style to the div to make all characters' color to red.
then why can't we invent a new attribute 'ng-class' which means add class under special condition?
so take ng-class and all other ng-xxx directive the same as all existing attributes like "style" ,"length".
they just tell the browser what to do with the involved element.