1、
ng-app表达式
<html>
<head>
<title>表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
打印结果：{{100+100}}
</body>
</html>
2、
ng-model动态绑定、ng-init初始化指令
<html>
<head>
<title>动态绑定，初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='李海'">请输入你的姓名:<input ng-model="myname">
<br>
{{myname}},你好！
</body>
</html>
3、
ng-controller控制器
<html>
<head>
<title>控制器</title>
<script src="angular.min.js"></script>
<script>
//建立模型
var app = angular.module("myApp",[]);
//创建控制器 $scope就是控制层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.add=function(){
return $scope.x+$scope.y;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一个数：<input ng-model="x">
第二个数：<input ng-model="y">
{{add()}}
</body>
</html>
4、
ng-click事件指令$scope内置服务
<html>
<head>
<title>事件指令</title>
<script src="angular.min.js"></script>
<script>
//建立模型
var app = angular.module("myApp",[]);
//创建控制器 $scope就是控制层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.add=function(){
$scope.z = parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一个数：<input ng-model="x">
第二个数：<input ng-model="y">
<button ng-click="add()">运算</button>
运算结果:{{z}}
</body>
</html>
5、
ng-repeat循环数组
<html>
<head>
<title>循环数组 </title>
<script src="angular.min.js"></script>
<script>
//建立模型
var app = angular.module("myApp",[]);
//创建控制器 $scope就是控制层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.list=[102,203,349,555];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
6、循环对象数组
<html>
<head>
<title>循环对象数组 </title>
<script src="angular.min.js"></script>
<script>
//建立模型
var app = angular.module("myApp",[]);
//创建控制器 $scope就是控制层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.list=[
{name:'张三',shuxue:100,yuwen:100},
{name:'李四',shuxue:90,yuwen:90},
{name:'张三',shuxue:40,yuwen:50}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
7、
$http内置服务
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>内置服务$http</title>
<script src="angular.min.js"></script>
<script>
//建立模型
var app = angular.module("myApp",[]);
//创建控制器 $scope就是控制层之间交换数据的桥梁
app.controller("myController",function($scope,$http){
$scope.findList=function(){
$http.get("data.json").success(
function(response){
$scope.list=response;
}
);
}
$scope.findList();
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
data.json
[
{"name":"张三","shuxue":100,"yuwen":100},
{"name":"李四","shuxue":90,"yuwen":90},
{"name":"王五","shuxue":40,"yuwen":50},
{"name":"赵六","shuxue":40,"yuwen":50}
]
