Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to fetch and show records using Angular Js with Mysql

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 278
    Comment on it

    Hi reader's, 
    If you have done enough work with the technologies like PHP then you can switch to Angular Js. Using Angular Js is quick and fast to compile than PHP. If you want to fetch Mysql records now a days you can perform same task by using Anguar JS also.

    Lets get started working with Angular JS.

    Step1 : Create a basic html file name to records.html. By using simple HTML and bit of Anuglar JS you have to desigg the front end of page it's code will go like this:-

    <!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>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
     
    </body>
    </html>

    Step2: In the above code which is simple a html page now create a div and assign it a angular ID it's code will go like this:-

    <div ng-app="getSchool" ng-controller="schoolsCtrl">
     
    <table>
      <tr ng-repeat="x in names">
        <td>{{ x.School }}</td>
        <td>{{ x.City }}</td>
      </tr>
    </table>
     
    </div>

    Step 3: Since you have already call the Angular JS from CDN so it will find the div with ng-app and put  the results from the  mysql file inside the table which we had created above. By writing ng-repeat = "x" you don't have to write code for loops. It will auto fetch mulitple records and put then in row by row. All you need to is create the js code it will go like this:-

     
    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
       $http.get("localhost/myproject/school_mysql.php")
       .then(function (response) {$scope.names = response.data.records;});
    });
    </script>

    In the code above you can see the ajax hit initiated which will target to shool_mysql.php file. In this file you can write the same query which you have used to PHP.  The result should be return back and those will print on the  Table inside the div (getSchool). You will notice that there is no compiling time taken by server like in PHP. Anguar will print the records in real time. Which makes it fast.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: