在任何Web应用程序中, 我们都需要在数据库中保存, 更新, 插入数据以及从中获取数据。 AngularJS是Google开发的JavaScript MVC或Model-View-Controller框架。它帮助开发人员构建结构良好, 易于测试且可维护的前端应用程序。
特征Angular JS库中的重要概念如下：
- 概念
- 模板
- 指令
- 模型
- 范围
- 表达方式
- 编译器
- 过滤
- 数据绑定
- 控制者
- 模组
- 服务
需要AngularJS框架的解释和基本示例通过使用HTML元素和属性的指令, 可以通过添加其他代码轻松创建动态网页。 AngularJS对于显示数据库中的数据非常有帮助。提供的数据应为JSON格式。让我们看一个例子。数据在MySQL中, 在服务器端, PHP与MySQL交互并以JSON格式获取数据。 Angular JS显示输出。通过下面的基本示例, 让我们详细了解Angular JS SQL。
例子：
<html>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<body>
<div ng-app= "empApp"
ng-controller= "employeeCtrl" >
<table>
<tr ng-repeat= "output in names" >
<td>{{ output.Name }}</td>
<td>{{ output.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module( "empApp" , []);
app.controller(
"employeeCtrl" , function ($scope, $http) {
$http.get(
"employee_mysql.php" ).then( function (response) {
$scope.names = response.data.records;
});
});
</script>
</body>
</html>说明：ng-app指令是一个起点。此处的" empApp"在ng-app中给出, 此处开始初始化并编译HTML模板ng-controller用于在HTML元素中指定控制器。该控制器将添加行为或维护该HTML元素及其子元素中的数据服务器代码PHP和MySQL这里的主要事情是输出应为JSON格式
服务器代码PHP和MySQL：
<?php
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: application/json; charset=UTF-8" );
$connection = new mysqli( "myServer" , "<username>" , "<password>" , "<dbname>" );
$result = $connection ->query(
"SELECT EmployeeName, EmployeeCity, EmployeeCountry FROM Employees");
$output = "" ;
while ( $rs = $result ->fetch_array(MYSQLI_ASSOC)) {
if ( $output != "" ) {
$output = ", " ;
}
$output .= '{"Name":"' . $rs ["EmployeeName "] . '" , ';
$output .= '"City":"' . $rs ["EmployeeCity "] . '" , ';
$output .= '"Country":"' .
$rs [ "EmployeeCountry" ] . '"}' ;
}
$output = '{"records":[' . $output . ']}' ;
$connection ->close();
echo $output ;
?>假设Employees表有6条记录, 它们在MySQL中。 PHP代码以JSON格式从MySQL检索数据, Angular JS显示输出。
输出如下：
HTML代码：
<!DOCTYPE html>
< html >
< style >
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</ style >
< table >
< tr >
< td >Avinash</ td >
< td >USA</ td >
</ tr >
< tr >
< td >Aisha</ td >
< td >UK</ td >
</ tr >
< tr >
< td >Emma</ td >
< td >Australia</ td >
</ tr >
< tr >
< td >Shreyas</ td >
< td >India</ td >
</ tr >
< tr >
< td >Rachel</ td >
< td >USA</ td >
</ tr >
< tr >
< td >Shravan</ td >
< td >India</ td >
</ tr >
</ table >
</ html >输出如下：
