1.agular普通开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教师页面--将逻辑写在html里面</title>
<!-- 引入angular的js -->
<script type="text/javascript" src="js/angular.js"></script>
<script>
var app = angular.module('teacherApp', []);
app.controller('teacherController', function($scope, $http) {
$http.get("findAll")
.success(function (response) {
$scope.list = response;
});
//成功调取mysql数据，将response.records改为response,因为它是个对象
});
</script>
</head>
<body ng-app="teacherApp" ng-controller="teacherController">
<table border="5" >
<tr>
<td>tid</td>
<td>tname</td>
<td>tcid</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.tid}}</td>
<td>{{entity.tname}}</td>
<td>{{entity.tcid}}</td>
</tr>
</table>
</body>
</html>
2. angular的分层开发
2-1,html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教师页面</title>
<!-- 引入angular的js -->
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../Controller/teacherController.js"></script>
<script type="text/javascript" src="../Service/teacherService.js"></script>
</head>
<body ng-app="teacherApp" ng-controller="teacherController">
<table border="5">
<tr>
<td>tid</td>
<td>tname</td>
<td>tcid</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.tid}}</td>
<td>{{entity.tname}}</td>
<td>{{entity.tcid}}</td>
</tr>
<button type="button" ng-click="findAll()">查询所有</button>
</table>
<table border="5">
<tr>
<td>老师id</td>
<td>老师姓名</td>
<td>老师工号</td>
</tr>
<tr >
<td>{{entity.tid}}</td>
<td>{{entity.tname}}</td>
<td>{{entity.tcid}}</td>
</tr>
<button type="button" ng-click="findOne(entity.tid)">查询单个</button>
</table>
</body>
</html>
2-2 ，controller层
// 定义控制器:
var app = angular.module('teacherApp', []);
app.controller("teacherController", function ($scope, teacherService) {
// 查询所有:
$scope.findAll = function () {
teacherService.findAll().success(function (response) {
$scope.list = response;
});
}
// 查询单个:
$scope.findOne = function (tid) {
teacherService.findOne(tid).success(function (response) {
$scope.entity = response;
});
}
});
2-3.service层
// 定义服务层:
app.service("teacherService", function ($http) {
this.findAll = function () {
return $http.get("../findAll");
}
this.findOne = function (tid) {
return $http.get("../findOne?tid="+2);
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
