文档介绍:87寸LAtoCN
iii
1
目录
1
1
1
1
1
nci1^11・・・・・・・・・・・・・・・・・・・模拟和自动化测试框架。
Angular信奉的是,当组建视图(UI)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多。
■将DOM操作和应用逻辑解耦是一种非常好的思路,它能大大改善代码的可调性
■将测试和开发同等看待是一种非常非常好的思路,测试的难度在很大程度上取决于代码的结构
■将客户端和服务器端解耦是一种特别好的做法,它能使两边并行开发,并且使两边代码都能实现重用
■如果框架能够在整个开发流程里都引导着开发者:从设计UI,到编写业务逻
辑,再到测试,那对开发者将是极大的帮助
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做,AngularJS主要考虑的是构建CRUD应用。要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
用户输入两个数字,计算出两个数字之和
<!DOCTYPEhtml>
<htmlng-app='angularApp">
<head>
<title>首页</title>
<metacharset="utf-8"/>
5
<scriptsrc=■-
"></script>
</head>
<bodyng-controller=BmyController">
vinputng-model=nvaluel"/>+<inputng-model=nvalue2n/>={{result}}
<buttonng-click="add(),,>tfM</button>
</body>
</html>
<script>
varmodule=("angularApp\[]);
("myController",function($scope){
$=function(){
varvaluel=pa「seFloat($"
value2=parseFloat($);
if(isNaN(valuel)||isNaN(value2))return;
$=valuel+value2;
}
});
</script>
运行结果:
6
34
+
2
二36
计算
()
在html标签里面增加属性ng-app='angularApp",这样angulatjs会自动接管你的应用
通过设置i叩ut的ng-model属性,AngularJS会自动对数据进行双向绑定(从$scope到页面控件),这样input里面的值发生改变之后z$scope里对于的变量的值也会发生改变,反之亦然。
在js代码里可以看到,$scope里面声明了一1^add函数,在"计算"这个按钮上有一个ng-click指向了这个函数,在用户点击计算的时候,便会进入函数内部计算出结果。
在html代码里面可以看到这样的占位符:{{result}),如果$scope里面的变量result变量发生了变化,AngularJS会自动替换这个占位符,实现了从$scope到html的绑定。
上面的代码里既没有调用田可AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成静态页面更多的工作z让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度,只需要关注数据和模板。
7
angularJS推崇的是声明式的语法,通过上面的例子可以看到,HTML里面包含T-^a