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属性
基本上就这些了