您的位置：首页 > Web前端 > AngularJS

angular学习笔记二

2013-12-08 13:47 295 查看

　已经了解了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属性

基本上就这些了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航