Friday 24 February 2017

Angularjs Use get and post method with php and mysql

INTRODUCTION

I will be mistreatment angularjs $http service to induce information from the mysql info with php.
HTML is nice for declaring static documents,
however it falters once we try and use it for declaring dynamic views in web-applications.
in AngularJS just allows you to extend HTML elemets for your application.
The ensuing setting is awfully communicative , readable, and fast to develop.
you’re currently able to build the AngularJS easy app with MVC style pattern.
Recently I found AngularJS, a therefore referred to as “Superheroic Javascript MVC framework” by Google®.
I must say i’m affected by its easy, clear and fast approach of operating.
This framework is sensible, very smart. Go have a glance once you’re prepared on the AngularJS website. particularly the fundamentals tutorial is value waiting for beginners.
I have created a straightforward GET technique wont to retrive information type with a PHP rear and AngularJS to handle the request and response.

It’s divided in 3 elements:

1st :- The form
2nd :- The AngularJS script
3rd :- The server-side script
Example : AngularJS Easy Code for get(GET Method) MySql data using PHP

File Name : controllers.js:

my_simple_App.controller('conInfoCtrl', function ($scope, $http) {
    $http({method: 'GET', url: 'sales_content.php'}).success(function(data) {
        $scope.all_contents = data;
    });
});

other way

my_simple_App.controller('conInfoCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('sales_content.php')
    .success(function(data) {
        $scope.all_contents = data;
    });
}]);

File Name : sales_content.php :

require_once("sdb.php");//databased connection
//Query
$result_salesorder = pg_query($dbconn, "SELECT * FROM salesorder ORDER BY sales_name ASC");
//set header
header('Content-Type: application/json');
// all result send to client side
echo json_encode(pg_fetch_assoc($result_salesorder));

File Name : index.php:

<!DOCTYPE html>
<html lang="en">
<head>
<title>All Data Retrive in angularjs and GET json data from a php file for an Angular scope</title>
<link rel="stylesheet" href="yourprojectdir/css/style.css"/>
</head>
<body ng-app="my_simple_App">
 <!-- Controller start -->

<div ng-controller="conInfoCtrl">

<ul class="focus">

<li ng-repeat="content in all_contents">
       <a href="#">{{content.sales_name}}</a>
     </li>

   </ul>

 </div>

 <!-- Controller end -->
</body>
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22yourprojectdir%2Fjs%2Fjquery-1.10.2.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22yourprojectdir%2Fjs%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22yourprojectdir%2Fjs%2Fcontrollers.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>

angularjs call to an external url with $http.get

Get $http(request) in AngularJS is a core service for reading data from web servers.
$http.get(url) is the function to use for reading(retrive) server fetch data.
  var appc = angular.module('salesApp', []);
  appc.controller('paymentController', function($scope, $http) {
    $http.get("http://www.techieupgrader.in/AngularJS/files/httpRequest/payment.json")
    .success(function(response) {$scope.sales_name = response;});
  });

File name :- payment.json

[{
  "id": 1,
  "sales_name": "Zaam-Dox",
  "last_name": "Sanders",
  "city": "Wāling"
}, {
  "id": 2,
  "sales_name": "Stronghold",
  "last_name": "Andrews",
  "city": "Yeysk"
}, {
  "id": 3,
  "sales_name": "Treeflex",
  "last_name": "Freeman",
  "city": "Quillota"
}, {
  "id": 4,
  "sales_name": "Bitchip",
  "last_name": "Murray",
  "city": "Huangtugang"
}, {
  "id": 5,
  "sales_name": "Stronghold",
  "last_name": "Garza",
  "city": "Rumāh"
}, {
  "id": 6,
  "sales_name": "Y-find",
  "last_name": "Brown",
  "city": "Shaxi"
}, {
  "id": 7,
  "sales_name": "Transcof",
  "last_name": "Hanson",
  "city": "Blois"
}, {
  "id": 8,
  "sales_name": "Y-Solowarm",
  "last_name": "Kim",
  "city": "Ḩawf"
}, {
  "id": 9,
  "sales_name": "Konklux",
  "last_name": "Stephens",
  "city": "Maevatanana"
}, {
  "id": 10,
  "sales_name": "Daltfresh",
  "last_name": "Bailey",
  "city": "Itsandra"
}]

0 comments: