AngularJS AJAX

Το AJAX είναι η σύντομη μορφή του Asynchronous JavaΣενάριο και XML. Το AJAX σχεδιάστηκε κυρίως για την ενημέρωση τμημάτων μιας ιστοσελίδας, χωρίς επαναφόρτωση ολόκληρης της σελίδας.

Ο λόγος για τον σχεδιασμό αυτής της τεχνολογίας ήταν να μειωθεί ο αριθμός των μετακινήσεων μετ' επιστροφής που πραγματοποιήθηκαν μεταξύ του πελάτη και του διακομιστή και ο αριθμός ολόκληρης της ανανέωσης σελίδας που γινόταν όποτε ένας χρήστης απαιτούσε ορισμένες πληροφορίες.

Το AJAX επέτρεψε στις ιστοσελίδες να ενημερώνονται ασύγχρονα ανταλλάσσοντας μικρές ποσότητες δεδομένων με τον διακομιστή στα παρασκήνια. Αυτό σήμαινε ότι ήταν δυνατή η ενημέρωση τμημάτων μιας ιστοσελίδας, χωρίς επαναφόρτωση ολόκληρης της σελίδας.

Πολλές σύγχρονες διαδικτυακές εφαρμογές ακολουθούν αυτή την τεχνική για την ανανέωση της σελίδας ή τη λήψη δεδομένων από τον διακομιστή.

Αλληλεπιδράσεις υψηλού επιπέδου με διακομιστές που χρησιμοποιούν $resource

Το Angular παρέχει δύο διαφορετικά API για τη διαχείριση των αιτημάτων Ajax. Αυτοί είναι

$πόρος
$http

Θα εξετάσουμε την ιδιότητα "$resource" στο Angular, η οποία χρησιμοποιείται για την αλληλεπίδραση με διακομιστές σε υψηλό επίπεδο.

Όταν μιλάμε για αλληλεπίδραση σε υψηλότερο επίπεδο, σημαίνει ότι θα μας ενοχλεί μόνο τι έχει να προσφέρει ο διακομιστής σχετικά με τη λειτουργικότητα και όχι για το τι ακριβώς κάνει ο διακομιστής λεπτομερώς σε σχέση με αυτήν τη λειτουργικότητα.

Για παράδειγμα, εάν ο διακομιστής φιλοξενούσε μια εφαρμογή που διατηρεί τις πληροφορίες των εργαζομένων μιας συγκεκριμένης εταιρείας, ο διακομιστής ενδέχεται να εκθέσει λειτουργίες σε πελάτες όπως οι GetEmployeeDetails, SetEmployeeDetails κ.λπ.

Έτσι, σε υψηλό επίπεδο, γνωρίζουμε τι μπορούν να κάνουν αυτές οι δύο συναρτήσεις και μπορούμε να τις καλέσουμε χρησιμοποιώντας την ιδιότητα $resource. Αλλά τότε δεν γνωρίζουμε ακριβώς τις λεπτομέρειες των "GetEmployeeDetails" και των "SetEmployeeDetails" και πώς υλοποιείται.

Η παραπάνω εξήγηση εξηγεί αυτό που είναι γνωστό ως αρχιτεκτονική που βασίζεται σε REST.

Το REST είναι γνωστό ως Representational State Transfer, η οποία είναι μια αρχιτεκτονική που ακολουθείται σε πολλά σύγχρονα συστήματα που βασίζονται στο διαδίκτυο.
Σημαίνει ότι μπορείτε να χρησιμοποιήσετε τα κανονικά ρήματα HTTP των GET, POST, PUT και DELETE για να εργαστείτε με μια εφαρμογή που βασίζεται στο web.

Ας υποθέσουμε λοιπόν ότι έχουμε μια διαδικτυακή εφαρμογή που διατηρεί μια λίστα με Εκδηλώσεις.

Αν θέλαμε να φτάσουμε στη λίστα με όλα τα γεγονότα,

Η εφαρμογή Ιστού μπορεί να εκθέσει μια διεύθυνση URL όπως π.χ http://example/events και
Μπορούμε να χρησιμοποιήσουμε το ρήμα "GET" για να λάβουμε ολόκληρη τη λίστα συμβάντων εάν η εφαρμογή ακολουθεί μια αρχιτεκτονική που βασίζεται σε REST.

Έτσι, για παράδειγμα, εάν υπήρχε ένα συμβάν με αναγνωριστικό 1, τότε μπορούμε να λάβουμε τις λεπτομέρειες αυτού του συμβάντος μέσω της διεύθυνσης URL. http://example/events/1

Τι είναι το αντικείμενο $resource

Το αντικείμενο $resource στο Angular βοηθά στην εργασία με διακομιστές που εξυπηρετούν εφαρμογές σε αρχιτεκτονική που βασίζεται στο REST.

Η βασική σύνταξη της δήλωσης @resource μαζί με τις διάφορες συναρτήσεις δίνονται παρακάτω

Σύνταξη της δήλωσης @resource

var resource Object = $resource(url);

Αφού έχετε διαθέσιμο το resourceObject, μπορείτε να χρησιμοποιήσετε τις παρακάτω λειτουργίες για να πραγματοποιήσετε τις απαιτούμενες κλήσεις REST.

1. get([params], [success], [error]) – Αυτό μπορεί να χρησιμοποιηθεί για την πραγματοποίηση της τυπικής κλήσης GET.

2. save([params], postData, [success], [error]) – Αυτό μπορεί να χρησιμοποιηθεί για την πραγματοποίηση της τυπικής κλήσης POST.

3. query([params], [success], [error]) – Αυτό μπορεί να χρησιμοποιηθεί για την πραγματοποίηση της τυπικής κλήσης GET, αλλά επιστρέφεται ένας πίνακας ως μέρος της απόκρισης.

4. remove([params], postData, [success], [error]) – Αυτό μπορεί να χρησιμοποιηθεί για την πραγματοποίηση της τυπικής κλήσης DELETE.

Σε όλες τις συναρτήσεις που δίνονται παρακάτω, η παράμετρος 'params' μπορεί να χρησιμοποιηθεί για την παροχή των απαιτούμενων παραμέτρων, οι οποίες πρέπει να περάσουν στη διεύθυνση URL.

Για παράδειγμα,

Ας υποθέσουμε ότι μεταβιβάζετε μια τιμή του θέματος: 'Angular' ως 'param' στη συνάρτηση get ως
παίρνω('http://example/events' ,'{ Θέμα: 'Γωνιακό' }')
Η διεύθυνση URL http://example/events?Topic=Angular καλείται ως μέρος της συνάρτησης get.

Πώς να χρησιμοποιήσετε την ιδιότητα $resource AngularJS

Για να χρησιμοποιήσετε την ιδιότητα $resource, πρέπει να ακολουθήσετε τα ακόλουθα βήματα:

Βήμα 1) Το αρχείο "angular-resource.js" πρέπει να ληφθεί από τον ιστότοπο Angular.JS και να τοποθετηθεί στην εφαρμογή.

Βήμα 2) Η λειτουργική μονάδα εφαρμογής θα πρέπει να δηλώσει μια εξάρτηση από τη λειτουργική μονάδα "ngResource" προκειμένου να χρησιμοποιήσει τον πόρο $.

Στο παρακάτω παράδειγμα, καλούμε τη λειτουργική μονάδα "ngResource" από την εφαρμογή "DemoApp".

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Βήμα 3) Κλήση της συνάρτησης $resource() με το τελικό σημείο REST, όπως φαίνεται στο παρακάτω παράδειγμα.

Εάν το κάνετε αυτό, τότε το αντικείμενο $resource θα έχει τη δυνατότητα να καλέσει την απαραίτητη λειτουργικότητα που εκτίθεται από τα τελικά σημεία REST.

Το ακόλουθο παράδειγμα καλεί τη διεύθυνση URL τελικού σημείου: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

Στο παραπάνω παράδειγμα γίνονται τα ακόλουθα πράγματα

Κατά τον ορισμό της εφαρμογής Angular, δημιουργείται μια υπηρεσία χρησιμοποιώντας τη δήλωση 'DemoApp.services' όπου DemoApp είναι το όνομα που δίνεται στην εφαρμογή Angular.
Η μέθοδος .factory χρησιμοποιείται για τη δημιουργία των λεπτομερειών αυτής της νέας υπηρεσίας.
«Είσοδος» είναι το όνομα που δίνουμε στην υπηρεσία μας και μπορεί να είναι οποιοδήποτε όνομα θέλετε να δώσετε.
Σε αυτήν την υπηρεσία, δημιουργούμε μια συνάρτηση που θα καλέσει το $resource API
$resource('/example/Event/:1). Η συνάρτηση $resource είναι μια υπηρεσία που χρησιμοποιείται για την κλήση ενός τερματικού σημείου REST. Το τελικό σημείο REST είναι συνήθως μια διεύθυνση URL. Στην παραπάνω συνάρτηση, χρησιμοποιούμε τη διεύθυνση URL (/example /Event/:1) ως τελικό σημείο REST. Το τελικό σημείο REST(/example /Event/:1) υποδηλώνει ότι υπάρχει μια εφαρμογή Συμβάντος στον κύριο ιστότοπο μας "παράδειγμα". Αυτή η εφαρμογή Συμβάντος έχει αναπτυχθεί χρησιμοποιώντας μια αρχιτεκτονική που βασίζεται σε REST.
Το αποτέλεσμα της κλήσης συνάρτησης είναι ένα αντικείμενο κλάσης πόρων. Το αντικείμενο πόρου θα έχει τώρα τις συναρτήσεις ( get() , query() , save() , remove(), delete() ) που μπορούν να κληθούν.

Βήμα 4) Μπορούμε τώρα να χρησιμοποιήσουμε τις μεθόδους που επιστράφηκαν στο παραπάνω βήμα( οι οποίες είναι οι get() , query() , save() , remove(), delete() ) στον ελεγκτή μας.

Στο παρακάτω απόσπασμα κώδικα, χρησιμοποιούμε τη συνάρτηση get() ως παράδειγμα

Ας δούμε τον κώδικα που μπορεί να κάνει χρήση της συνάρτησης get().

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

Στο παραπάνω βήμα,

Η συνάρτηση get() στο παραπάνω απόσπασμα εκδίδει ένα αίτημα GET στο / example /Event/:1.
Η παράμετρος:1 στη διεύθυνση URL αντικαθίσταται από το $scope.id.
Η συνάρτηση get() θα επιστρέψει ένα κενό αντικείμενο το οποίο συμπληρώνεται αυτόματα όταν τα πραγματικά δεδομένα προέρχονται από τον διακομιστή.
Το δεύτερο όρισμα για την get() είναι μια επιστροφή κλήσης που εκτελείται όταν τα δεδομένα φτάνουν από τον διακομιστή. Η πιθανή έξοδος ολόκληρου του κώδικα θα ήταν ένα αντικείμενο JSON που θα επέστρεφε τη λίστα συμβάντων που εκτίθενται από τον ιστότοπο "παράδειγμα". Ένα παράδειγμα του τι μπορεί να επιστραφεί φαίνεται παρακάτω
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Αλληλεπιδράσεις διακομιστή χαμηλού επιπέδου με $http

Το $http είναι μια άλλη υπηρεσία Angular JS που χρησιμοποιείται για την ανάγνωση δεδομένων από απομακρυσμένους διακομιστές. Η πιο δημοφιλής μορφή δεδομένων που διαβάζονται από διακομιστές είναι τα δεδομένα σε μορφή JSON.

Ας υποθέσουμε ότι έχουμε ένα PHP σελίδα ( http://example/angular/getTopics.PHP ) που επιστρέφει τα ακόλουθα δεδομένα JSON

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

Ας δούμε τον κώδικα 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.names = response.data.records;});
});
</script>

Στο παραπάνω παράδειγμα

Προσθέτουμε την υπηρεσία $http στη συνάρτηση Controller, ώστε να μπορούμε να χρησιμοποιήσουμε τη συνάρτηση "get" της υπηρεσίας $http.
Τώρα χρησιμοποιούμε τη συνάρτηση λήψης από την υπηρεσία HTTP για να λάβουμε τα αντικείμενα JSON από τη διεύθυνση URL http://example /angular/getTopics.PHP
Με βάση το αντικείμενο 'response', δημιουργούμε μια συνάρτηση επανάκλησης που θα επιστρέψει τις εγγραφές δεδομένων και στη συνέχεια τις αποθηκεύουμε στο αντικείμενο $scope.
Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε τη μεταβλητή $scope.names από τον ελεγκτή και να τη χρησιμοποιήσουμε στην άποψή μας για να εμφανίσουμε τα αντικείμενα JSON ανάλογα.

Πώς να λάβετε δεδομένα από την SQL και MySQL Διακομιστής που χρησιμοποιεί AngularJS

Το Angular μπορεί επίσης να χρησιμοποιηθεί για την ανάκτηση δεδομένων από έναν διακομιστή που λειτουργεί MySQL ή SQL.

Η ιδέα είναι ότι εάν έχετε μια σελίδα PHP που συνδέεται με ένα MySQL βάση δεδομένων ή ένα Asp.Net σελίδα που συνδέεται με ένα MS SQL βάση δεδομένων διακομιστή, τότε πρέπει να βεβαιωθείτε ότι τόσο η PHP όσο και η σελίδα ASP.Net αποδίδει τα δεδομένα σε μορφή JSON.

Ακολουθεί η διαδικασία βήμα προς βήμα σχετικά με τον τρόπο ανάκτησης δεδομένων από την SQL και MySQL Διακομιστής που χρησιμοποιεί AngularJS.

Ας υποθέσουμε ότι έχουμε έναν ιστότοπο PHP (http://example /angular/getTopics.PHP) προβολή δεδομένων είτε από α MySQL ή βάση δεδομένων SQL.

Βήμα 1) Λήψη δεδομένων από α MySQL βάσεις δεδομένων
Το πρώτο βήμα είναι να διασφαλίσετε ότι η σελίδα PHP λαμβάνει τα δεδομένα από ένα MySQL βάση δεδομένων και εξυπηρετεί τα δεδομένα σε μορφή JSON.

Βήμα 2) Λάβετε τα δεδομένα JSON χρησιμοποιώντας την υπηρεσία $http
Γράψτε τον παρόμοιο κώδικα που εμφανίζεται παραπάνω για να χρησιμοποιήσετε την υπηρεσία $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, εμφανίζουμε το κλειδί που είναι "Name" και η τιμή είναι "Descriptιόν".

<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>

Περίληψη

Η πλήρης μορφή του AJAX είναι η Ασύγχρονη JavaΓραφή και XML.
Έχουμε ρίξει μια ματιά σε τι α ΞΕΚΟΥΡΑΣΤΙΚΟΣ αρχιτεκτονική είναι, η οποία δεν είναι παρά μια λειτουργικότητα που εκτίθεται από εφαρμογές Ιστού που βασίζονται στα κανονικά ρήματα HTTP των GET, POST, PUT και DELETE.
Το αντικείμενο $resource χρησιμοποιείται με το Angular για αλληλεπίδραση με τις εφαρμογές Ιστού RESTFUL σε υψηλό επίπεδο, πράγμα που σημαίνει ότι επικαλούμαστε μόνο τη λειτουργικότητα που εκτίθεται από την εφαρμογή Ιστού, αλλά δεν μας απασχολεί ο τρόπος με τον οποίο υλοποιείται η λειτουργικότητα.
Εξετάσαμε επίσης την υπηρεσία $http που μπορεί να χρησιμοποιηθεί για τη λήψη δεδομένων από μια εφαρμογή Ιστού. Αυτό είναι δυνατό επειδή η υπηρεσία $http μπορεί να λειτουργήσει με εφαρμογές web σε πιο λεπτομερές επίπεδο.
Λόγω της ισχύος της υπηρεσίας $http, αυτή μπορεί να χρησιμοποιηθεί για τη λήψη δεδομένων από ένα MySQL ή MS SQL Server μέσω μιας εφαρμογής PHP. Τα δεδομένα μπορούν στη συνέχεια να αποδοθούν σε έναν πίνακα χρησιμοποιώντας την οδηγία ng-repeat.