zoukankan      html  css  js  c++  java
  • 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.




  • 相关阅读:
    rasa learning to rank
    为什么选择rasa
    rasa
    tf.tile
    tf.scatter_nd
    nlp中的数据增强之 google-uda
    递归-分治-动态规划-贪心
    递归算法的美妙
    数据不平衡问题
    WD(西部数据)硬盘,“必须从您要解锁的硬盘对应的WD Drive Unlock CD 运行WD Drive Unlock应用程序”错误解决办法
  • 原文地址:https://www.cnblogs.com/formyjava/p/4166315.html
Copyright © 2011-2022 走看看