Display data with AngularJS
Angular $http GET Ajax Call In Database and display data with Angular
STEP 1 : CREATE 'index.php' AND WRITE THIS CODE IN IT
<html ng-app="fetch">
<head>
<title>AngularJS GET request with PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<br>
<div class="row">
<div class="container">
<h1>Angular $http GET Ajax Call In Database</h1>
<div ng-controller="dbCtrl">
<input type="text" ng-model="searchFilter" class="form-control" placeholder="Search Contry">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Nicename</th>
<th>ISO</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in data| filter:searchFilter">
<td>{{country.name}}</td>
<td>{{country.nicename}}</td>
<td>{{country.iso}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var fetch = angular.module('fetch', []);
fetch.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get("GetData.php")
.success(function (data) {
debugger;
$scope.data = data;
console.log(data);
})
.error(function () {
$scope.data = "error in fetching data";
});
}]);
</script>
</body>
</html>
STEP 2 : IN 'GetData.php' , WRITE THIS CODE FOR GET DATA FROM country TABLE
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "fruxinfo_o_cart");
$result = mysqli_query($connect, "select * from country");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
STEP 3 :CREATE DATABASE 'countrydb' AND IMPORT THIS TABLE QUERY
-- phpMyAdmin SQL Dump-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Mar 05, 2016 at 07:45 PM
-- Server version: 10.1.9-MariaDB
-- PHP Version: 5.6.15
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `countrydb`
--
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE `country` (
`id` int(11) NOT NULL,
`iso` char(2) NOT NULL,
`name` varchar(80) NOT NULL,
`nicename` varchar(80) NOT NULL,
`iso3` char(3) DEFAULT NULL,
`numcode` smallint(6) DEFAULT NULL,
`phonecode` int(5) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`id`, `iso`, `name`, `nicename`, `iso3`, `numcode`, `phonecode`) VALUES
(1, 'AF', 'AFGHANISTAN', 'Afghanistan', 'AFG', 4, 93),
(2, 'AL', 'ALBANIA', 'Albania', 'ALB', 8, 355),
(3, 'DZ', 'ALGERIA', 'Algeria', 'DZA', 12, 213),
(4, 'AS', 'AMERICAN SAMOA', 'American Samoa', 'ASM', 16, 1684),
(5, 'AD', 'ANDORRA', 'Andorra', 'AND', 20, 376),
(6, 'AO', 'ANGOLA', 'Angola', 'AGO', 24, 244),
(7, 'AI', 'ANGUILLA', 'Anguilla', 'AIA', 660, 1264),
(8, 'AQ', 'ANTARCTICA', 'Antarctica', NULL, NULL, 0),
--
-- Indexes for dumped tables
--
--
-- Indexes for table `country`
--
ALTER TABLE `country`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=240;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
0 comments:
Post a Comment