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.
AngularJs(Part 2)的更多相关文章
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇
最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...
- AngularJS 系列 学习笔记 目录篇
目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)
随机推荐
- Memcache安装与使用
一.资源下载 安装memcached 之前必需要先安装 libevent 分别在libevent和memcached的官网下载安装包libevent-1.4.14b-stable.tar.gz和mem ...
- ViewPager总结
https://github.com/youth5201314/banner compile 'com.youth.banner:banner:1.4.9' private void setBanne ...
- Cocos2d-js官方完整项目教程翻译:六、添加Chipmunk物理引擎在我们的游戏世界里
添加Chipmunk物理引擎在我们的游戏世界里 一.简介 cocos2d JS能给我们力量来创造令人印象深刻的游戏世界.但缺乏某种现实. ...
- Swift 学习笔记 (函数)
函数 函数是一个独立的代码块,用来执行特定的任务.Swift中的函数与Object-C中的函数一样,但是声明与书写的方式不太一样,现在我们就通过几个例子介绍一下Swift中的函数.简单的来说,他与JS ...
- FI 常用表
FI 常用表 GL部分:FAGLFLEXT(FMGLFLEXT) 总账汇总表 GLT0 旧总帐汇总表 SKA1 总账科目主记录 (科目表) ...
- 使用qt+ros调用摄像头遇到的问题
当使用摄像头遇到如下问题:[usb_cam-1] process has died [pid 12288, exit code 127, cmd /opt/ros/indigo/lib/usb_cam ...
- 【zabbix】Windows服务器获取IIS站点以及程序池状态
在使用zabbix做Windows服务器监控的时候遇到一个比较棘手的问题,检测IIS站点状态. 普通情况下,只要用浏览器访问iis站点测试一下返回码是不是200即可判断状态,但是我这次遇到的是iis使 ...
- MySQL修改配置 区分大小写
在使用mysql的时候,数据库名,表名,字段名等有大小写的区分,这个可以通过配置文件设置.如果设置了严格区分大小写,在访问表的时候没有注意到表名的大小写,将会报出表不存在的错误.下面是修改配置文件: ...
- Flask中的CBV和上下文初步解读
一 . flask中的CBV 相对于Django中的CBV,让我们来看看flask中的CBV是如何实现的 ? from flask import Flask, render_template, url ...
- AR模型脱卡,unity端实现步骤详情
AR模型脱卡unity端实现具体步骤 AR模型脱卡的原理 利用一些unity端AR插件做AR应用.通常会有一个需求,当识别物消失的时候,将3D模型从识别物这个父物体上移除,显示在屏幕中央.那么原理就显 ...