目录
表达式使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-1 表达式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
</head>
<!-- ng-app在这个标签里的可以使用 angular语法 -->
<body ng-app>
<!-- 花括号里面写变量 -->
{{100+100}}
</body>
</html>
页面显示
数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-2 双向绑定</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
</head>
<!-- ng-app在这个标签里的可以使用 angular语法 -->
<body ng-app>
<!-- ng-model 双向绑定变量的属性名 -->
请输入姓名: <input ng-model="name">
{{ name }}
</body>
</html>
页面效果
初始化执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-3 初始化执令</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
</head>
<!-- ng-init 初始化方法给变量name赋默认值 -->
<body ng-app ng-init="name='往大豪'">
<!-- ng-model 双向绑定变量的属性名 -->
请输入姓名: <input ng-model="name">
{{ name }}
</body>
</html>
页面第一次打开效果
控制器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-3 初始化执令</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
<script>
//建立模块 myApp模块名 [] 其他子模块
var app=angular.module("myApp",[])
//创建控制器 $scope 控制层和视图层交换数据的桥梁
app.controller("myController",function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<!-- ng-app 指定模块名 ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
第一个数:<input ng-model="x" > <input ng-model="y">
{{add()}}
</body>
</html>
页面效果 相加
事件执令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-4 事件执令</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
<script>
//建立模块 myApp模块名 [] 其他子模块
var app=angular.module("myApp",[])
//创建控制器 $scope 控制层和视图层交换数据的桥梁
app.controller("myController",function($scope){
// 添加 add 方法
$scope.add=function(){
// 添加 z 变量
$scope.z=parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<!-- ng-app 指定模块名 ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
第一个数:<input ng-model="x" > <input ng-model="y">
<button ng-click="add()">运算</button>
{{z}}
</body>
</html>
页面效果 点击运算
点击事件中的执行方法可以用 ; 分号隔开 ng-click="grade=1;selectList({id:0})"
循环数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-5 循环数组</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
<script>
//建立模块 myApp模块名 [] 其他子模块
var app=angular.module("myApp",[])
//创建控制器 $scope 控制层和视图层交换数据的桥梁
app.controller("myController",function($scope){
// 定义数组变量
$scope.list=[102,201,303,402];
});
</script>
</head>
<!-- ng-app 指定模块名 ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
<table>
<!-- 再循环的位置加 x 循环后的变量 list 要循环的变量-->
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
页面效果
循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-6 循环对象数组</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
<script>
//建立模块 myApp模块名 [] 其他子模块
var app=angular.module("myApp",[])
//创建控制器 $scope 控制层和视图层交换数据的桥梁
app.controller("myController",function($scope){
// 定义数组变量
$scope.list=[{name:"张三",age:"13",sex:"男"},
{name:"李四",age:"3",sex:"女"},
{name:"王五",age:"23",sex:"男"},];
});
</script>
</head>
<!-- ng-app 指定模块名 ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
<table>
<!-- 再循环的位置加 x 循环后的变量 list 要循环的变量-->
<tr >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="person in list">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
</tr>
</table>
</body>
</html>
页面效果
内置服务 http
封装ajax 需要放在tomcat里运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angularDemo-6 循环对象数组</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入angular -->
<script src="js/angular.min.js"></script>
<script>
//建立模块 myApp模块名 [] 其他子模块
var app=angular.module("myApp",[])
//创建控制器 $scope 控制层和视图层交换数据的桥梁
app.controller("myController",function($scope,$http){
$scope.findList=function(){
// 定义内置请求对象
$http.get("https://www.easy-mock.com/mock/5bf274cfa733fb71407cf649/example/angularDemo").success(
function(res){
$scope.list= res.data;
}
)
}
})
</script>
</head>
<!-- ng-app 指定模块名 ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<!-- 再循环的位置加 x 循环后的变量 list 要循环的变量-->
<tr >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="person in list">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
</tr>
</table>
</body>
</html>
EasyMock测试
json对象地址 https://www.easy-mock.com/mock/5bf274cfa733fb71407cf649/example/angularDemo
EasyMock官网 https://www.easy-mock.com/
{
"data": [{
"name": "@cname",
"age": "@integer(60, 100)",
"sex": "@integer(1, 2)"
},
{
"name": "@cname",
"age": "@integer(60, 100)",
"sex": "@integer(1, 2)"
},
{
"name": "@cname",
"age": "@integer(60, 100)",
"sex": "@integer(1, 2)"
},
]
}
页面效果