Prem Tiwari - - Angular JS, Featured, Mysql
Hi friends, hope you are doing well. In today’s post i will share a very important things with you. Now days AngularJS is the best option to develop next web application. If you are going to start a new project, then why not choose AngularJS as front-end and PHP as back-end.
In this post i will let you know how to get data from mysql using AngularJS and PHP. Follow the below steps and use simple and easy snippets to get mysql data using angulaJS.
Below is the complete example to display the data from mysql database using angularJS and PHP. Add below angularJS file.
1 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
First open phpmyadmin in your browser and create a test database. Select test database and create user table by using below code. Open SQL tabs and copy paste below sql queries to create user table.
1 2 3 4 5 6 7 8 9 | -- -- Table structure for table `users` -- CREATE TABLE `users` ( `id` int(11) NOT NULL, `name` varchar(50) DEFAULT NULL, `email` varchar(50) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
Copy and paste below SQL queries to insert some sample users data.
1 2 3 4 5 6 7 8 9 10 | -- -- Dumping data for table `users` -- INSERT INTO `users` (`id`, `name`, `email`) VALUES |
Recommended:
Benefits of using AngularJS 2.0 in your next web application
5 Best AngularJS Frameworks To Develop Next Generation Apps Quickly
Below angularJS code will call the PHP based API to get users data from mysql table.
1 2 3 4 5 6 7 | <script> var app = angular.module('myApp', []); app.controller('usersCtrl', function($scope, $http) { $http.get("https://freewebmentor.com/api/users_mysql.php") .then(function (response) {$scope.names = response.data.records;}); }); </script> |
Now call the usersCtrl to display the all users data in your webpage.
1 2 3 4 5 6 7 8 9 10 | <div ng-app="myApp" ng-controller="usersCtrl"> <table> <tr ng-repeat="result in names"> <td>{{ result.username }}</td> <td>{{ result.email }}</td> </tr> </table> </div> |
Below is the complete code to get data from mysql table using angularJS and PHP.
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 32 33 34 35 36 37 38 39 | <!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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="usersCtrl"> <table> <tr ng-repeat="x in results"> <td>{{ x.username }}</td> <td>{{ x.email }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('usersCtrl', function($scope, $http) { $http.get("https://freewebmentor.com/api/users_mysql.php") .then(function (response) {$scope.results = response.data;}); }); </script> </body> </html> |
Below is the output of above example.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: angular js, angular js mysql exampl, angularjs and php, angularjs and php example, AngularJS Controllers, angularjs mysql database, angularjs mysql database example, angularjs php mysql tutorial, fetch data from database in php angularjs
