anjularjs 第一天
1.通过ng-app属性,告诉angular作用范围 <html ng-app="myapp">
2.通过ng-controller属性,angular找到该属性内的html内容,并创建$scope对象传递该区域内的变量<body ng-controller="acon">,传给用户名为“acon”的函数。所以一个acon函数可以控制多个ng-controller值为acon的html区域。
acon可以获取到它所需要的 $scope对象,而没有必要去创建它。
没有必要自己调用 acon的构造方法,或者指定何时去调用它。
3.ng-repeat
<div ng-repeat="item in items">
<span>{{item.title + $index + $first+ $last + $middle}}</span>
</div>
4.ng-bind 与 {{}}
显示文本
使用ng-bind 指令,你可以在UI 中的任何地方显示并刷新文本。它还有两种等价形式。
第一种是使用花括号的形式,我们已经见过了:
<p>{{greeting}}</p>
还有一种方式就是使用基于属性的指令,叫做ng-bind :
<p ng-bind="greeting"></p>
对于输出的内容来说两种形式是等价的。如果模型变量greeting 被设置为“Hi there”,
Angular 将会生成以下HTML :
<p>Hi there</p>
然后浏览器就会显示“Hi there”。
那么,你为什么要使用一种方式替代另一种呢?我们创建双花括号插值语法的目的是为
了阅读起来更加自然,并且需要输入的内容更少。虽然两种形式的输出内容相同,但是
使用双花括号语法的时候,在Angular 使用数据替换这些花括号之前,第一个加载的页面,
也就是应用中的index.html,其未被渲染好的模板可能会被用户看到。而使用第二种方
法的视图就不会遇到这个问题。
造成这种现象的原因是,浏览器需要首先加载HTML 页面,渲染它,然后Angular 才有
机会把它解释成你期望看到的内容。
好消息是,在大多数模板中你依然可以使用{{ }}。但是,对于index.html 页面中的数
据绑定操作,建议使用ng-bind。这样一来,在数据加载完成之前你的用户就不会看到
任何内容。
5. ng-model
<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>
这样做的含义是:
1.当用户选中了复选框之后,SomeController 中$scope 的youCheckedIt 的属性
就会变成true。而反选复选框会让youCheckedIt 变为false。
2.如果你在SomeController 中把$scope.youCheckedIt 设置为true,那么UI 中的
复选框将会变成选中状态。设置为false 将会反选复选框.
6.ng-change
<div ng-controller="StartUpController">
Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
Recommendation:{{funding.needed}}
</div>
<script>
function StartUpController($scope){
$scope.funding = {startingEstimate:0,needed:0};
$scope.computeNeeded = function(){
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
}
</script>
7.$watch 实现监听变量
<div ng-controller="StartUpController">
Starting:<input ng-model="funding.startingEstimate">
Recommendation:{{funding.needed}}
</div>
<script>
function StartUpController($scope){
$scope.funding = {startingEstimate:0,needed:0};
$scope.computeNeeded = function(){
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch(‘funding.startingEstimate‘,$scope.computeNeeded);
}
</script>
8.ng-submit 监听表单提交属性,提交时运行requestFunding,并组织浏览器向服务器post通信。
ng-click 非表单
<form ng-controller="StartUpController" ng-submit="requestFunding()">
Starting:<input ng-model="funding.startingEstimate">
Recommendation:{{funding.needed}}
<button stype="submit">sub</button>
</form>
9.ng-eventhandler
1。在所有浏览器中具有相同的行为。Angular 将会帮你屏蔽差异性。
2。不会在全局命名空间中进行操作。你所指定的表达式只能访问元素控制器作用域范围(ng-controller)内
的函数和数据。
3。
对于你的系统是否会遭遇这种耦合,我们有一种简单的测试方法可以验证:我们能否为
应用逻辑编写一个单元测试而不需要DOM 结构存在?
是的,在Angular 中我们可以编写包含业务逻辑的控制器,而无须引用DOM。问题不是
出在事件处理器上,而是之前我们编写JavaScript 的方式有问题。请注意,到目前为止
我们所编写的所有控制器中,都没有在任何地方引用DOM 或者DOM 事件。所有定位
元素和处理事件的工作都是在Angular 内部完成的。
在编写单元测试的时候这一点很重要。如果你需要DOM,你就需要在测试用例中首先
创建DOM,这就增加了测试的复杂性。并且,当你的页面发生变化时,还有更多的维
护工作要做,你需要为测试用例同步修改DOM。最后,访问DOM 的操作非常慢。很慢
的测试就意味着很慢的反馈,甚至很慢的交付。而Angular 的控制器测试就不会有这些
问题。
10.ng-show ng-hide
这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block 来显示元
素;设置为display:none 来隐藏元素
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。