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