AngularJS语法详解
模板和数据的基本运作流程如下：
用户请求应用起始页面
用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板
angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界
angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些dom操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成dom视图
连接到服务器去加载需要展示给用户的其他数据
显示文本
一种使用{{}}形式，如{{greeting}} 第二种ng-bind="greeting"
使用第一种，未被渲染的页面可能会被用户看到，index页面建议使用第二种，其余的页面可以使用第一种
表单输入
<html ng-app>
<head>
<title>表单</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function startupcontroller($scope) {
$scope.funding = {startingestimate:0};
computeneeded = function() {
$scope.funding.needed = $scope.funding.startingestimate * 10;
};
$scope.$watch('funding.startingestimate',computeneeded); //watch model的变化
}
</script>
</head>
<body>
<form ng-controller="startupcontroller">
starting: <input ng-change="computeneeded()" ng-model="funding.startingestimate"> //change的时候调用函数
recommendation: {{funding.needed}}
</form>
</body>
</html>
在某些情况下，我们不想一有变化就立刻做出动作，而是要进行等待。例如：
<html ng-app>
<head>
<title>表单</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function startupcontroller($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,please get more customers first.")
};
}
</script>
</head>
<body>
<form ng-submit="requestfunding()" ng-controller="startupcontroller"> //ng-submit
starting: <input ng-change="computeneeded()" ng-model="funding.startingestimate">
recommendation: {{funding.needed}}
<button>fund my startup!</button>
</form>
</body>
</html>
非表单提交型的交互，以click为例
<html ng-app>
<head>
<title>表单</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function startupcontroller($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,please get more customers first.")
};
$scope.reset = function() {
$scope.funding.startingestimate = 0;
};
}
</script>
</head>
<body>
<form ng-controller="startupcontroller">
starting: <input ng-change="computeneeded()" ng-model="funding.startingestimate">
recommendation: {{funding.needed}}
<button ng-click="requestfunding()">fund my startup!</button>
<button ng-click="reset()">reset</button>
</form>
</body>
</html>
列表、表格以及其他迭代型元素
ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下：
<html ng-app>
<head>
<title>表单</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var students = [{name:'mary',score:10},{name:'jerry',score:20},{name:'jack',score:30}]
function studentlistcontroller($scope) {
$scope.students = students;
}
</script>
</head>
<body>
<table ng-controller="studentlistcontroller">
<tr ng-repeat='student in students'>
<td>{{$index+1}}</td>
<td>{{student.name}}</td>
<td>{{student.score}}</td>
</tr>
</table>
</body>
</html>
隐藏与显示
ng-show和ng-hide功能是等价的，但是运行效果正好相反。
<html ng-app>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function deathraymenucontroller($scope) {
$scope.menustate = {show:false };//这里换成menustate.show = false 效果就显示不出来了。以后声明变量还是放在{}里面吧
$scope.togglemenu = function() {
$scope.menustate.show = !$scope.menustate.show;
};
}
</script>
</head>
<body>
<div ng-controller='deathraymenucontroller'>
<button ng-click='togglemenu()'>toggle menu</button>
<ul ng-show='menustate.show'>
<li ng-click='stun()'>stun</li>
<li ng-click='disintegrate()'>disintegrate</li>
<li ng-click='erase()'>erase from history</li>
</ul>
</div>
</body>
</html>
css类和样式
ng-class和ng-style都可以接受一个表达式，表达式执行的结果可能是如下取值之一：
表示css类名的字符串，以空格分隔
css类名数组
css类名到布尔值的映射
代码示例如下：
<html ng-app>
<head>
<style type="text/css">
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function headercontroller($scope) {
$scope.iserror = false;
$scope.iswarning = false;
$scope.showerror = function() {
$scope.messagetext = "error!!!!"
$scope.iserror = true;
$scope.iswarning = false;
}
$scope.showwarning = function() {
$scope.messagetext = "warning!!!"
$scope.iswarning = true;
$scope.iserror = true;
}
}
</script>
</head>
<body>
<div ng-controller="headercontroller">
<div ng-class="{error:iserror,warning:iswarning}">{{messagetext}}</div>
<button ng-click="showerror()">error</button>
<button ng-click="showwarning()">warning</button>
</div>
</body>
</html>
css类名到布尔值的映射
示例代码如下：
<html ng-app>
<head>
<style type="text/css">
.selected {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function restaurant($scope) {
$scope.list = [{name:"the handsome",cuisine:"bbq"},{name:"green",cuisine:"salads"},{name:"house",cuisine:'seafood'}];
$scope.selectrestaurant = function(row) {
$scope.selectedrow = row;
}
}
</script>
</head>
<body>
<table ng-controller="restaurant">
<tr ng-repeat='restaurant in list' ng-click='selectrestaurant($index)' ng-class='{selected: $index==selectedrow}'> //css类名到布尔值的映射,当模型属性selectedrow的值等于ng-repeat中得$index时，selectd样式就会被设置到那一行
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>
</body>
</html>
上一篇： 你见谁烈日下还穿风衣的
下一篇： rsync 应用总结