How to fetch data from database using Angularjs

In this tutorial , you will learn how to fetch data from mysql database and display it on the html page.

1) In order to show data from mysql, you need to create a php or dotnet page and write the logic to fetch data from the
database.

Once the php page is created , write the ng-controller code to fetch the data from the server. Below is the example to
fetch data from database

a) First we will create the div , where the angular js will execute.

<div ng-app=”testapp” ng-controller=”datacntrl”>
ng-app defines the div to execute angular js app. testapp is the name of the app.

ng-controller defines the name of the controller which will fetch the data from the database using php file.

 

Below is the definition of the controller

<script>
var app = angular.module(‘testapp’, []);
app.controller(‘datacntrl’, function($scope, $http) {
$http.get(“http://www.ojhasfotsolutions.in/test_mysql.php”)
.success(function (response) {$scope.names = response.records;});
});
</script>
$http in angular is used to send request and get response from the server. Once we get the response , that response is
collected in the variable names.
now the names variable is used to display the data in the html.

 

<table>
<tr ng-repeat=”x in names”>
<td>{{ x.firstName }}</td>
<td>{{ x.lastname }}</td>
</tr>
</table>
using ng-repeat directive in angular js , we fetch the record one by one from the variable name.

Request from different server needs the below settings on the php page

header(“Access-Control-Allow-Origin: *”);
Angular js includes:

Using angular js , you can now import html content, within an existing html document. Please check the below code, how to import html file

Using ng-include directive in angular js you can include other html document.
<div class=”container”>

<div class=“container”>
<div ng-include=“‘file1.htm'”></div>
<div ng-include=“‘file2.htm'”></div>
</div

</div>

 

Learn angular JS

Learn angular Tutorial