AngularJS SQL介绍和用法示例

在任何Web应用程序中, 我们都需要在数据库中保存, 更新, 插入数据以及从中获取数据。 AngularJS是Google开发的JavaScript MVC或Model-View-Controller框架。它帮助开发人员构建结构良好, 易于测试且可维护的前端应用程序。
特征Angular JS库中的重要概念如下：

概念
模板
指令
模型
范围
表达方式
编译器
过滤
数据绑定
控制者
模组
服务

【AngularJS SQL介绍和用法示例】需要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 >

输出如下：