首页 > 代码库 > anjularjs 第一天
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 来隐藏元素
anjularjs 第一天