AngularJS语法详解
模板和数据的基本运作流程如下：
用户请求应用起始页面
用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板
angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界
angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成DOM视图
连接到服务器去加载需要展示给用户的其他数据
显示文本
一种使用{{}}形式，如{{greeting}}第二种ng-bind="greeting"
使用第一种，未被渲染的页面可能会被用户看到，index页面建议使用第二种，其余的页面可以使用第一种
表单输入
<htmlng-app>
<head>
<title>表单</title>
<scripttype="text/javascript"src="angular.min.js"></script>
<scripttype="text/javascript">
functionStartUpController($scope){
$scope.funding={startingEstimate:0};
computeNeeded=function(){
$scope.funding.needed=$scope.funding.startingEstimate*10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watchmodel的变化
}
</script>
</head>
<body>
<formng-controller="StartUpController">
Starting:<inputng-change="computeNeeded()"ng-model="funding.startingEstimate"> //change的时候调用函数
Recommendation:{{funding.needed}}
</form>
</body>
</html>
在某些情况下，我们不想一有变化就立刻做出动作，而是要进行等待。例如：
<htmlng-app>
<head>
<title>表单</title>
<scripttype="text/javascript"src="angular.min.js"></script>
<scripttype="text/javascript">
functionStartUpController($scope){
$scope.funding={startingEstimate:0};
computeNeeded=function(){
$scope.funding.needed=$scope.funding.startingEstimate*10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watch监视一个表达式，当这个表达式发生变化时就会调用一个回调函数
$scope.requestFunding=function(){
window.alert("Sorry,pleasegetmorecustomersfirst.")
};
}
</script>
</head>
<body>
<formng-submit="requestFunding()"ng-controller="StartUpController"> //ng-submit
Starting:<inputng-change="computeNeeded()"ng-model="funding.startingEstimate">
Recommendation:{{funding.needed}}
<button>Fundmystartup!</button>
</form>
</body>
</html>
非表单提交型的交互，以click为例
<htmlng-app>
<head>
<title>表单</title>
<scripttype="text/javascript"src="angular.min.js"></script>
<scripttype="text/javascript">
functionStartUpController($scope){
$scope.funding={startingEstimate:0};
computeNeeded=function(){
$scope.funding.needed=$scope.funding.startingEstimate*10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);
$scope.requestFunding=function(){
window.alert("Sorry,pleasegetmorecustomersfirst.")
};
$scope.reset=function(){
$scope.funding.startingEstimate=0;
};
}
</script>
</head>
<body>
<formng-controller="StartUpController">
Starting:<inputng-change="computeNeeded()"ng-model="funding.startingEstimate">
Recommendation:{{funding.needed}}
<buttonng-click="requestFunding()">Fundmystartup!</button>
<buttonng-click="reset()">Reset</button>
</form>
</body>
</html>
列表、表格以及其他迭代型元素
ng-repeat会通过$index返回当前引用的元素序号。示例代码如下：
<htmlng-app>
<head>
<title>表单</title>
<scripttype="text/javascript"src="angular.min.js"></script>
<scripttype="text/javascript">
varstudents=[{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
functionStudentListController($scope){
$scope.students=students;
} </script> </head> <body> <tableng-controller="StudentListController"> <trng-repeat='studentinstudents'> <td>{{$index+1}}</td> <td>{{student.name}}</td> <td>{{student.score}}</td> </tr> </table> </body> </html>