با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون با ساختار ها و دستورالعمل ها در AngularJS، و در مباحث اخیر چگونگی دستکاری برخی عناصر HTML از جمله جداول در AngularJS ، آشنا شدید. اما در این بخش قصد داریم به مبحثی بسیار مهم و کاربردی در AngularJS ، تحت عنوان کار با بانک اطلاعاتی SQL در AngularJS ، بپردازیم.
AngularJS به شما اجازه می دهد که با بانک های اطلاعاتی SQL از جمله بانک mysql در php و بانک sqlserver در asp ارتباط برقرار کرده و داده هایی را با این بانک های اطلاعاتی تبادل کنید.
AngularJS ابزاری مناسب برای نمایش داده ها از پایگاه داده است. فقط باید مطمئن شوید که داده ها در فرمت JSON هستند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers_mysql.php") .then(function (response) {$scope.names = response.data.records;}); }); </script> |
گرفتن اطلاعات از سرور ASP.NET در حال اجرای SQL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers_sql.aspx") .then(function (response) {$scope.names = response.data.records;}); }); </script> |
لیستی از کدهای سرور که برای دریافت اطلاعات از SQL بکار می رود:
درخواست داده از سرورهای مختلف (که یک صفحه را درخواست می کند) درخواست cross-site HTTP نامیده می شود.
درخواست های cross-site HTTP در وب معمول هستند. صفحات وب CSS, images, و scripts ها را از سرورهای مختلف لود می کنند.
در مرورگرهای جدید، درخواست های cross-site HTTP از اسکریپت ها، به دلایل امنیتی محدود به یک سایت می شود.
مثال خط کد زیر، برای سرور PHP دسترسی به cross-site را ممکن می کند.
1 | header("Access-Control-Allow-Origin: *"); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT CompanyName, City, Country FROM Customers"); $outp = ""; while($rs = $result->fetch_array(MYSQLI_ASSOC)) { if ($outp != "") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}'; } $outp ='{"records":['.$outp.']}'; $conn->close(); echo($outp); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=ISO-8859-1"); $conn = new COM("ADODB.Connection"); $conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb"); $rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers"); $outp = ""; while (!$rs->EOF) { if ($outp != "") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}'; $rs->MoveNext(); } $outp ='{"records":['.$outp.']}'; $conn->close(); echo ($outp); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <%@ Import Namespace="System.IO"%> <%@ Import Namespace="System.Data"%> <%@ Import Namespace="System.Data.OleDb"%> <% Response.AppendHeader("Access-Control-Allow-Origin", "*") Response.AppendHeader("Content-type", "application/json") Dim conn As OleDbConnection Dim objAdapter As OleDbDataAdapter Dim objTable As DataTable Dim objRow As DataRow Dim objDataSet As New DataSet() Dim outp Dim c conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb") objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn) objAdapter.Fill(objDataSet, "myTable") objTable=objDataSet.Tables("myTable") outp = "" c = chr(34) for each x in objTable.Rows if outp <> "" then outp = outp & "," outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & "," outp = outp & c & "City" & c & ":" & c & x("City") & c & "," outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}" next outp ="{" & c & "records" & c & ":[" & outp & "]}" response.write(outp) conn.close %> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @{ Response.AppendHeader("Access-Control-Allow-Origin", "*") Response.AppendHeader("Content-type", "application/json") var db = Database.Open("Northwind"); var query = db.Query("SELECT CompanyName, City, Country FROM Customers"); var outp ="" var c = chr(34) } @foreach(var row in query){ if (outp != "") {outp = outp + ","} outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + "," outp = outp + c + "City" + c + ":" + c + @row.City + c + "," outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}" } outp ="{" + c + "records" + c + ":[" + outp + "]}" @outp |
در این بخش، چگونگی کار با بانک ها اطلاعاتی مختلف در سرورهای مختلف را در مباحث کار با بانک اطلاعاتی SQL در AngularJS مرور کردیم. امیدواریم که مباحث فوق، مورد توجه و استفاده ی شما قرار گرفته باشد.