AngularJS SQL
AngularJS SQL
To use AngularJS with SQL, we need to create a backend service that can communicate with the SQL database and return data to the AngularJS front end. The backend service can be created using a server-side language like PHP or Node.js.
We need to create a database in SQL that will store the data for our web application. For this example, let’s create a simple database with a single table called ‘users’ that has three columns: ‘id’, ‘name’, and ‘email’.
After the creation of Database we need to create a PHP script to connect
<?php
// Connect to the database
$servername = “localhost”;
$username = “username”;
$password = “password”;
$dbname = “myDB”;
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: “ . $conn->connect_error);}
// Retrieve data from the ‘users’ table
$sql = “SELECT * FROM users”;
$result = $conn->query($sql);
// Convert data to JSON format and return it to the front end
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;}}
echo json_encode($data);
// Close connection
$conn->close();
?>
<?php
// Connect to the database
$servername = “localhost”;
$username = “username”;
$password = “password”;
$dbname = “myDB”;
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: “ . $conn->connect_error);
}
// Retrieve data from the ‘users’ table
$sql = “SELECT * FROM users”;
$result = $conn->query($sql);
// Convert data to JSON format and return it to the front end
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
echo json_encode($data);
// Close connection
$conn->close();
?>
We can use AngularJS directives like ng-repeat and ng-model to display the data and allow users to interact with it.
<div ng-app=”myApp” ng-controller=”myCtrl”>
<ul>
<li ng-repeat=”user in users”>
{{user.name}} — {{user.email}}
</li>
</ul>
<form>
<label>Name:</label>
<input type=”text” ng-model=”newUser.name”>
<label>Email:</label>
<input type=”email” ng-model=”newUser.email”>
<button type=”submit” ng-click=”addUser()”>Add User</button>
</form>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $http) {
// Retrieve data from the backend service
$http.get(“get_users.php”)
.then(function(response) {
$scope.users = response.data;
});
// Add a new user to the database
$scope.addUser = function() {
$http.post(“add_user.php”, {
name: $scope.newUser
email: $scope.newUser.email
})
.then(function(response) {
$scope.users.push(response.data);
$scope.newUser = {};
});
};
});
</script>
Explanation
We use the AngularJS $http service to retrieve the data from the PHP backend service and display it using ng-repeat. We also allow users to add new users to the database by filling out a form and clicking the ‘Add User’ button. The addUser function sends a POST request to the PHP backend service, which inserts the new user into the database and returns the new user data in JSON format. We then push this new user data into the $scope.users array, which automatically updates the view.
Conclusion:
By combining AngularJS with SQL, we can create powerful and dynamic web applications that can retrieve and manipulate data from a SQL database. With the AngularJS $http service and PHP backend service, we can easily communicate with the database and update the view in real-time.
