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