angular学习笔记二
已经了解了angular的基础知识以后，我们继续开始了解angular的基础模块，首先在写angular应用时需要引入angularjs
在使用angular时必须为它定义边界（angular的作用范围）
1、如果想构建angular应用只需要
<html ng-app="应用名">
2、如果需要angular操作部分区域的数据，则将相应的ng－app写到对应的标签上
<html> ....... <body> ....... <!--angular处理区域--> <div ng-app> </div> <!--结束--> ....... .... </body> </html>
模块：
1、数据显示
可以使用{{}}或ng-bind
<p>{{txt}}</p>
或
<p ng-bind="txt"></p>两者的却别在于html没有加载完毕{{txt}}回直接显示到页面，直到angular渲染该绑定数据（这种行为有可能将{{binding}}让用户看到）；而ng-bind则是在angular渲染完毕后将数据显示
2、ng-controller
该命令用户管理视图和模型之间的关系的控制器（单页面中可以根据复杂程度引入多个控制器）
3、ng－model
将值绑定到表单元素上
<form > <input type='checkbox' ng-model='value'/> </form>
4、ng－watch
用户监听一个表达式的变化，调用相应的回调
<div ng-controller='testController'>
<input ng-model='start_value'/>
<label>{{end_value}}</label>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
$scope.start_value =1;
function change_value() {
$scope.end_value = $scope.start_value;
}
$scope.$watch('start_value', change_value);
});
</script>
5、angular提供了一系列命令与原生的浏览器事件相对应，包括ng－change、ng－click、ng－submit、ng－dbclick等
6、ng－repeat
用于数据迭代
<html ng-app='myapp'>
<script src='angular.js'></script>
<body>
<table ng-controller='tableController'>
<tr ng-repeat='repeat in repeat_list'>
<td >{{repeat.name}}</td>
</tr>
</table>
<script>
var app = angular.module('myapp', []);
app.controller('tableController', function($scope) {
$scope.repeat_list = [
{name:'test01'},
{name:'test02'}
];
});
</script>
</body>
</html>
6、ng-show、ng-hide
用于显示或隐藏绑定元素，行为相反，ng－show为true时显示，false隐藏
<div ng-controller='testController'>
<label ng-show='label_show'>哈哈</label>
<button ng-click="toggle_label()">切换</button>
</div>
<script type="text/javascript">
function testController($scope) {
$scope.label_show = false;
$scope.toggle_label = function () {
$scope.label_show = !$scope.label_show;
}
}
</script>7、ng-css、ng-style
用于在应用中动态设置样式，接受一个表达式，表达式的取值方式
（1）一个表示css类名的字符串
（2）css类名数组
（3）类名到布尔值的映射
<div ng-controller='testController'>
<label ng-class='test'>哈哈</label>
<label ng-class='{selected: true, on:false}'>哈哈</label></div>
<script type="text/javascript">
function testController($scope) {
$scope.test = 'selected on';//方式1
$scope.test = ['selected', 'on'];//方式2
}
</script> 8、ng-src、ng－link
用于img、a加载内容，有的时候img或a进行简单的<img src={{binding}}/>数据绑定，angular没有机会拦截请求。因此使用ng－src属性
基本上就这些了
- 上一篇 »Angular权威指南学习笔记
- 下一篇 »angular学习笔记，十一-表达式