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.

AngularJs(Part 2)的更多相关文章

  1. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  2. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  3. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  4. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  5. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  8. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  9. 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  10. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

随机推荐

  1. wpf 获取datagrid 模板列中的控件

    目前采用的 方法  (网上提供的一款) public static DataGridRow GetRow(DataGrid datagrid, int columnIndex)        {    ...

  2. win7激活附带激活软件

    链接: https://pan.baidu.com/s/1i46yoHR 密码: 7k6y

  3. MongoDB的对象的创建

    package com.voice.db; import com.mongodb.DB; import com.mongodb.DBCollection; import com.mongodb.Mon ...

  4. mysql date函数相关用法整理(持续更新)

    date_add(now(), INTERVAL 1 day)   增加一天 date_format(d,'%Y-%m-%d %T')   这里的d为datestamp类型,格式化成  yyyy-MM ...

  5. 80端口未被占用,apache无法启动,命令行运行httpd.exe提示文档内容有错

    Apache无法启动,端口被占用的可能性比较大,所以建议大家还是先换端口试试,这个网上说的比较多,具体可参见http://www.cnblogs.com/zdan68/p/3855636.html. ...

  6. AsyncHttpClien访问网络案例分析

    Android数据存储的四种方式分别是:SharedPreferences存储.File文件存储.Network网络存储和sqlite数据库存储,网络存储需要使用AsyncHttpClient发送请求 ...

  7. ABAP HTTP POST

    1.HTTP DATA: lo_http_client TYPE REF TO if_http_client, lv_service TYPE string, lv_result TYPE strin ...

  8. MySql索引建立规则

    为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索引和创建什么类型的索引.本小节将向读者介绍一些索引的设计原则. 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确 ...

  9. 应用索引技术优化SQL 语句(转)

    原文出处 一.前言 很多数据库系统性能不理想是因为系统没有经过整体优化,存在大量性能低下的SQL 语句.这类SQL语句性能不好的首要原因是缺乏高效的索引.没有索引除了导致语句本身运行速度慢外,更是导致 ...

  10. Java for LeetCode 136 Single Number

    Given an array of integers, every element appears twice except for one. Find that single one. Note: ...