Course Progress 41%

AngularJS SQL

← AngularJS Select Boxes AngularJS HTML DOM →

AngularJS सीधे database या SQL के साथ connect नहीं करता। AngularJS एक client-side JavaScript framework है, जबकि SQL databases server-side पर होते हैं। इसलिए AngularJS में SQL का मतलब होता है server से data fetch करना, जो internally SQL queries से आता है।

AngularJS SQL concept को समझने के लिए आपको यह flow समझना ज़रूरी है:

AngularJS → Server-side Script (PHP / Node / Python) → SQL Database

AngularJS $http service का उपयोग करके server से data request करता है, और server-side language SQL query run करके data वापस भेजती है।

AngularJS और SQL का Architecture

AngularJS खुद:

  • SQL query execute नहीं करता
  • Database credentials handle नहीं करता
  • Direct database access नहीं करता

AngularJS:

  • API या server script को call करता है
  • JSON format में data receive करता है
  • उसी data को View में display करता है

AngularJS से SQL Data Fetch करना

सबसे common use case है database से data पढ़कर table में दिखाना।

AngularJS Controller Code

var app = angular.module("myApp", []);

app.controller("sqlCtrl", function($scope, $http) {
  $http.get("fetch-users.php").then(function(response) {
    $scope.users = response.data;
  });
});

Code Explanation

  • $http.get() server-side PHP file को call करता है
  • Server से JSON data return होता है
  • Response data $scope.users में store हो जाता है
  • View automatically update हो जाती है

HTML Table में SQL Data दिखाना

<div ng-app="myApp" ng-controller="sqlCtrl">
  <table border="1">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
    <tr ng-repeat="user in users">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
    </tr>
  </table>
</div>

Code Explanation

  • ng-repeat database records को loop करता है
  • JSON object की properties table cells में bind होती हैं
  • Database update होने पर fresh data show किया जा सकता है

PHP File (SQL Query Example)

यह AngularJS का हिस्सा नहीं है, लेकिन concept समझने के लिए example ज़रूरी है।

<?php
$conn = mysqli_connect("localhost", "root", "", "testdb");

$result = mysqli_query($conn, "SELECT * FROM users");

$data = array();
while ($row = mysqli_fetch_assoc($result)) {
  $data[] = $row;
}

echo json_encode($data);
?>

Code Explanation

  • PHP MySQL database से connect करता है
  • SQL SELECT query run होती है
  • Result array में convert होता है
  • JSON format में AngularJS को भेजा जाता है

SQL WHERE Condition के साथ AngularJS

AngularJS से parameters भेजकर SQL query control की जा सकती है।

AngularJS Code

$http.get("fetch-users.php?age=25")
  .then(function(response) {
    $scope.users = response.data;
  });

Code Explanation

  • URL parameter server तक भेजा जाता है
  • Server-side script SQL WHERE clause use करता है
  • Filtered data AngularJS को मिलता है

AngularJS से SQL Data Insert करना

AngularJS form data को server पर भेजता है।

AngularJS Code

$scope.addUser = function() {
  $http.post("insert-user.php", {
    name: $scope.name,
    email: $scope.email
  }).then(function(response) {
    $scope.message = "User Added Successfully";
  });
};

Code Explanation

  • $http.post() form data server को भेजता है
  • Data JSON format में जाता है
  • Server SQL INSERT query run करता है

SQL Update Operation

$http.put("update-user.php", {
  id: $scope.id,
  name: $scope.name
});

Code Explanation

  • $http.put() update request भेजता है
  • Server-side SQL UPDATE query execute होती है
  • AngularJS response handle करता है

SQL Delete Operation

$http.delete("delete-user.php?id=5")
  .then(function(response) {
    $scope.message = "Record Deleted";
  });

Code Explanation

  • $http.delete() record delete करने के लिए use होता है
  • ID parameter server तक जाता है
  • SQL DELETE query run होती है

Error Handling (SQL Requests)

$http.get("fetch-users.php")
  .then(
    function(response) {
      $scope.users = response.data;
    },
    function(error) {
      $scope.error = "Data load failed";
    }
  );

Code Explanation

  • Second function error handle करता है
  • Server या database issue होने पर message show होता है
  • Production apps के लिए बहुत important है

Security Best Practices

  • SQL queries कभी AngularJS में न लिखें
  • Database credentials client-side पर न रखें
  • Always server-side validation करें
  • SQL Injection से बचने के लिए prepared statements use करें

Common AngularJS SQL Mistakes

  • AngularJS से direct SQL expect करना
  • Database logic controller में लिखना
  • Error handling ignore करना
  • JSON format गलत return करना

Summary

इस chapter में आपने सीखा:

  • AngularJS और SQL कैसे interact करते हैं
  • $http service से database data fetch करना
  • SQL CRUD operations का flow
  • Server-side role और security basics
  • Real-world AngularJS SQL architecture
← AngularJS Select Boxes AngularJS HTML DOM →
  • Home