16) AngularJS http, Ajax

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  }); 

In the above step,

• The get() function in the above snippet issues a GET request to / example /Event/:1.
• The parameter:1 in the URL is replaced with $scope.id.
• The function get() will return an empty object which is populated automatically when the actual data comes from the server.
• The second argument to get() is a callback which is executed when the data arrives from the server. The possible output of the entire code would be a JSON object which would return the list of Events exposed from the «example» website.

  An example of what can be returned is shown below

  {
  { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
  { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
  { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
  
  }

Low-level server interactions with $http

Let’s assume, that we have a PHP page ( http://example/angular/getTopics.PHP ) that returns the following JSON data

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Let’s look at the AngularJS code using $http, which can be used to get the above data from the server

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

In the above example

1. We are adding the $http service to our Controller function so that we can use the «get» function of the $http service.
2. We are now using the get function from the HTTP service to get the JSON objects from the URL http://example /angular/getTopics.PHP
3. Based on the ‘response’ object, we are creating a callback function which will return the data records and subsequently we are storing them in the $scope object.
4. We can then use the $scope.names variable from the controller and use it in our view to display the JSON objects accordingly.

Fetching data from a server running SQL and MySQL

Идея заключается в том, что если у вас есть страница PHP, соединяющаяся с базой данных MySQL, или страница Asp.Net, соединяющаяся с базой данных сервера MS SQL , то вам необходимо убедиться, что страница PHP и ASP.Net отображает данные в формате JSON.

Предположим, у нас есть сайт PHP ( http: // example /angular/getTopics.PHP ), который обслуживает данные из базы данных MySQL или SQL.

Шаг 1) Первый шаг — убедиться, что страница PHP берет данные из базы данных MySQL и обслуживает данные в формате JSON.

Шаг 2) Напишите аналогичный код, показанный выше, чтобы использовать службу $ http для получения данных JSON.

Давайте рассмотрим код AngularJS с использованием $ http, который можно использовать для получения вышеуказанных данных с сервера.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Шаг 3) Отобразите данные в вашем представлении, используя директиву ng-repeat.

Ниже мы используем директиву ng-repeat для прохождения каждой из пар ключ-значение в объектах JSON, возвращаемых методом «get» службы $ http.

Для каждого объекта JSON мы отображаем ключ «Имя», а значение «Описание».

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Резюме:

• Мы рассмотрели, что такое архитектура RESTFUL, представляющая собой не что иное, как функциональность, предоставляемую веб-приложениями на основе обычных HTTP-команд GET, POST, PUT и DELETE.
• Объект $ resource используется с Angular для взаимодействия с веб-приложениями RESTFUL на высоком уровне, что означает, что мы только вызываем функциональность, предоставляемую веб-приложением, но не заботимся о том, как реализована эта функциональность.
• Мы также рассмотрели сервис $ http, который можно использовать для получения данных из веб-приложения. Это возможно, потому что служба $ http может работать с веб-приложениями на более детальном уровне.
• Из-за мощного сервиса $ http его можно использовать для получения данных с MySQL или MS SQL Server через приложение PHP. Затем данные можно отобразить в таблице с помощью директивы ng-repeat.