Κλήση AngularJS AJAX χρησιμοποιώντας πόρο $, http $ (Παράδειγμα)

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

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

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

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

Σε αυτό το σεμινάριο, θα μάθετε-

Αλληλεπιδράσεις υψηλού επιπέδου με διακομιστές που χρησιμοποιούν πόρο $
Αλληλεπιδράσεις διακομιστή χαμηλού επιπέδου με $ http
Ανάκτηση δεδομένων από διακομιστή που εκτελεί SQL και MySQL

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

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

πόρος $
$ http

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

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

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

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

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

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

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

Αν θέλαμε να φτάσουμε στη λίστα όλων των εκδηλώσεων,

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

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

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

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

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

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

var resource Object = $resource(url);

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

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

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

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

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

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

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

Ας υποθέσουμε ότι περνάτε μια τιμή του Θέματος: «Γωνιακό» ως «param» στη συνάρτηση get ως
λήψη (' http: // example / events ', '{Θέμα:' Γωνιακό '}')
Το URL http: // example / events? Topic = Γωνιακή κλήση ως μέρος της συνάρτησης get.

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

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

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

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

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

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

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

Εάν το κάνετε αυτό, τότε το αντικείμενο πόρου $ θα έχει τη δυνατότητα να επικαλεστεί την απαραίτητη λειτουργικότητα που εκτίθεται από τα τελικά σημεία 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 χρησιμοποιείται για τη δημιουργία των λεπτομερειών αυτής της νέας υπηρεσίας.
Το «Entry» είναι το όνομα που δίνουμε στην υπηρεσία μας και μπορεί να είναι οποιοδήποτε όνομα θέλετε να παρέχετε.
Σε αυτήν την υπηρεσία, δημιουργούμε μια συνάρτηση που πρόκειται να καλέσει το API πόρων $
$ πόρος ('/ example / Event /: 1).

Η συνάρτηση πόρων $ είναι μια υπηρεσία που χρησιμοποιείται για την κλήση ενός τελικού σημείου REST. Το τελικό σημείο REST είναι συνήθως μια διεύθυνση URL. Στην παραπάνω συνάρτηση, χρησιμοποιούμε το URL (/ example / Event /: 1) ως το τελικό σημείο REST. Το REST endpoint (/ example / Event /: 1) υποδηλώνει ότι υπάρχει μια εφαρμογή Event που βρίσκεται στον κύριο ιστότοπό μας "παράδειγμα". Αυτή η εφαρμογή Event αναπτύχθηκε χρησιμοποιώντας αρχιτεκτονική βασισμένη σε REST.
Το αποτέλεσμα της κλήσης συνάρτησης είναι ένα αντικείμενο κλάσης πόρων. Το αντικείμενο πόρου θα έχει τώρα τις συναρτήσεις (get (), query (), save (), remove (), delete ()) που μπορούν να κληθούν.

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

Στο παρακάτω απόσπασμα κώδικα, χρησιμοποιούμε τη συνάρτηση 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 αντικαθίσταται με $ lingkop.id.
Η συνάρτηση 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, ο οποίος μπορεί να χρησιμοποιηθεί για τη λήψη των παραπάνω δεδομένων από τον διακομιστή

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

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

Ανάκτηση δεδομένων από διακομιστή που εκτελεί SQL και MySQL

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

Η ιδέα είναι ότι εάν έχετε μια σελίδα 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 που μπορεί να χρησιμοποιηθεί για τη λήψη των παραπάνω δεδομένων από τον διακομιστή

Βήμα 3) Δώστε τα δεδομένα στην προβολή σας χρησιμοποιώντας την οδηγία ng-repeat.

Παρακάτω χρησιμοποιούμε την οδηγία ng-repeat για να περάσουμε σε κάθε ένα από τα ζεύγη κλειδιών-τιμών στα αντικείμενα JSON που επιστρέφονται με τη μέθοδο "get" της υπηρεσίας $ http.

Για κάθε αντικείμενο JSON, εμφανίζεται το κλειδί που είναι "Όνομα" και η τιμή είναι "Περιγραφή".

<Πίνακας>
 {{x.Name}}  {{x.Description}}

Περίληψη:

Έχουμε ρίξει μια ματιά στο τι είναι μια RESTFUL αρχιτεκτονική, η οποία δεν είναι τίποτα άλλο από μια λειτουργικότητα που εκτίθεται από εφαρμογές ιστού με βάση τα κανονικά ρήματα HTTP των GET, POST, PUT και DELETE.
Το αντικείμενο $ πόρος χρησιμοποιείται με το Angular για να αλληλεπιδράσει με τις RESTFUL διαδικτυακές εφαρμογές σε υψηλό επίπεδο, πράγμα που σημαίνει ότι επικαλούμαστε μόνο τη λειτουργικότητα που εκτίθεται από την εφαρμογή ιστού, αλλά δεν ενοχλούμε για τον τρόπο υλοποίησης της λειτουργικότητας.
Εξετάσαμε επίσης την υπηρεσία http $ που μπορεί να χρησιμοποιηθεί για τη λήψη δεδομένων από μια εφαρμογή ιστού. Αυτό είναι δυνατό επειδή η υπηρεσία $ http μπορεί να λειτουργήσει με εφαρμογές ιστού σε πιο λεπτομερές επίπεδο.
Λόγω της ισχύος της υπηρεσίας $ http, αυτό μπορεί να χρησιμοποιηθεί για τη λήψη δεδομένων από έναν MySQL ή MS SQL Server μέσω μιας εφαρμογής PHP. Τα δεδομένα μπορούν στη συνέχεια να αποδοθούν σε έναν πίνακα χρησιμοποιώντας την οδηγία ng-repeat.