AngularJS语法详解
作者：bea
模板和数据的基本运作流程如下： 用户请求应用起始页面 用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板 angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界 angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成DOM视图 连接到服务器去加载需要展示给用户的其他数据 显示文本 一种使用{{}
模板和数据的基本运作流程如下：
用户请求应用起始页面 用户的浏览器向服务器发起一次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>
有用 | 无用
用户请求应用起始页面 用户的浏览器向服务器发起一次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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 使用jQuery实现input数值增量和减量的方法
- Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
- Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理)
- Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
- Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
- Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)
- jQuery选择器querySelector的使用指南
- jQuery中DOM操作实例分析
- jquery实现点击页面计算点击次数
- jQuery中DOM树操作之复制元素的方法
- PHP实现的各种中文编码转换类分享
- jQuery中DOM树操作之使用反向插入方法实例分析
- PHPExcel中的一些常用方法汇总
- jQuery操作DOM之获取表单控件的值
- 使用angular写一个hello world
- Javascript中的几种URL编码方法比较
- jQuery源码分析之jQuery.fn.each与jQuery.each用法
- AngularJS语法详解（续）
- Jquery动态替换div内容及动态展示的方法