Τι είναι το AngularJS; ArchiΤεχνολογία, Χαρακτηριστικά & Πλεονεκτήματα

Τι είναι το AngularJS;

AngularJS είναι ένα πλαίσιο Model-View-Controller ανοιχτού κώδικα γραμμένο σε JavaΓραφήΤο AngularJS ήταν ένα από τα πιο δημοφιλή web frameworks της δεκαετίας του 2010 και χρησιμοποιείται για την ανάπτυξηping κυρίως εφαρμογές μίας σελίδας. Αυτό το πλαίσιο έχει αναπτυχθεί από μια ομάδα προγραμματιστών από Google Itself.

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

Ένα σημείο ορολογίας αξίζει να διευκρινιστεί νωρίς. Το AngularJS περιγράφεται ευρέως ως πλαίσιο MVC, το οποίο αποτελεί ένα χρήσιμο σημείο εκκίνησης. Η ίδια η ομάδα του AngularJS, ωστόσο, προτίμησε την ετικέτα MVW (Προβολή-Μοντέλου-Ό,τιδήποτε), επειδή το runtime συμπεριφέρεται πιο κοντά στο Model-View-ViewModel παρά στο κλασικό MVC. Το επίσημο Τεκμηρίωση AngularJS το αποκαλεί δομικό πλαίσιο για δυναμικές εφαρμογές ιστού. Αφού το διευθετήσαμε αυτό, δείτε πώς συνδέονται τα κομμάτια.

AngularJS Archiδομή

Το AngularJS ακολουθεί την αρχιτεκτονική MVC. Το διάγραμμα του πλαισίου MVC φαίνεται παρακάτω:

AngularJS Archiδιάγραμμα δομής

Κάθε ένα από τα τρία επίπεδα έχει μια σαφή δουλειά:

• Ο ελεγκτής αντιπροσωπεύει το επίπεδο που έχει την επιχειρηματική λογική. Τα συμβάντα χρήστη ενεργοποιούν τις λειτουργίες που είναι αποθηκευμένες στον ελεγκτή σας. Τα συμβάντα χρήστη αποτελούν μέρος του ελεγκτή.
• Οι προβολές χρησιμοποιούνται για την αναπαράσταση του επιπέδου παρουσίασης που παρέχεται στους τελικούς χρήστες.
• Τα μοντέλα χρησιμοποιούνται για την αναπαράσταση των δεδομένων σας. Τα δεδομένα στο μοντέλο σας μπορεί να είναι τόσο απλά όσο να έχετε απλώς πρωτόγονες δηλώσεις. Για παράδειγμα, εάν διατηρείτε μια φοιτητική εφαρμογή, το μοντέλο δεδομένων σας θα μπορούσε απλώς να έχει ένα αναγνωριστικό φοιτητή και ένα όνομα. Ή μπορεί επίσης να είναι πολύπλοκο έχοντας ένα δομημένο μοντέλο δεδομένων. Εάν διατηρείτε μια εφαρμογή ιδιοκτησίας αυτοκινήτου, μπορείτε να έχετε δομές για να ορίσετε το ίδιο το όχημα από την άποψη της χωρητικότητας του κινητήρα, της χωρητικότητας καθισμάτων κ.λπ.

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

Χαρακτηριστικά του AngularJS

Το AngularJS έχει τα ακόλουθα βασικά χαρακτηριστικά που το καθιστούν ένα από τα ισχυρότερα frameworks στην αγορά:

1. MVC – Το πλαίσιο βασίζεται στη διάσημη έννοια του MVC (Model-View-Controller). Αυτό είναι ένα σχέδιο σχεδίασης που χρησιμοποιείται σε όλες τις σύγχρονες εφαρμογές web. Αυτό το μοτίβο βασίζεται στο διαχωρισμό του επιπέδου επιχειρηματικής λογικής, του επιπέδου δεδομένων και του επιπέδου παρουσίασης σε ξεχωριστές ενότητες. Η διαίρεση σε διαφορετικά τμήματα γίνεται έτσι ώστε το καθένα να μπορεί να διαχειρίζεται πιο εύκολα.
2. Δέσμευση μοντέλου δεδομένων – Δεν χρειάζεται να γράψετε ειδικό κώδικα για να συνδέσετε δεδομένα με τα στοιχεία ελέγχου HTML. Αυτό μπορεί να γίνει από το AngularJS προσθέτοντας απλώς μερικά τμήματα κώδικα.
3. Γράψτε λιγότερο κώδικα – Κατά την εκτέλεση πολλών χειρισμών DOM JavaΓραφή ήταν απαραίτητο να γραφτεί για τον σχεδιασμό οποιασδήποτε εφαρμογής. Αλλά με το AngularJS, θα εκπλαγείτε με τη λιγότερη ποσότητα κώδικα που χρειάζεται να γράψετε για τον χειρισμό του DOM.
4. Μονάδα Δοκιμές έτοιμοι – Οι σχεδιαστές στο Google όχι μόνο ανέπτυξε το AngularJS, αλλά ανέπτυξε και ένα πλαίσιο δοκιμών που ονομάζεται "Karma", το οποίο βοηθά στο σχεδιασμό δοκιμών μονάδας για εφαρμογές AngularJS.
5. Οδηγιών – Δείκτες όπως ng-app, ng-model και ng-repeat προσθήκη συμπεριφοράς σε συνηθισμένα στοιχεία HTML.

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

Πώς να ρυθμίσετε το AngularJS και να δημιουργήσετε την πρώτη σας εφαρμογή

Το να διαβάζεις για τη σύνδεση δεδομένων είναι ένα πράγμα και το να την παρακολουθείς να λειτουργεί είναι κάτι άλλο. Το AngularJS δεν χρειάζεται διαχειριστή πακέτων, ούτε bundler ούτε μεταγλωττιστή, επομένως η πρώτη σας εφαρμογή είναι ένα μόνο αρχείο HTML που εκτελείται απευθείας από τον σκληρό σας δίσκο.

Βήμα 1) Προσθέστε τη βιβλιοθήκη AngularJS

Φορτώστε τη βιβλιοθήκη από ένα CDN με μία ετικέτα script. Η έκδοση 1.8.3 είναι η τελική έκδοση του AngularJS, επομένως καρφιτσώστε τη σελίδα σας σε αυτήν ακριβώς την έκδοση αντί για μια κινητή.

Βήμα 2) Σημειώστε τη ρίζα της εφαρμογής με το ng-app

Η οδηγία ng-app λέει στον μεταγλωττιστή AngularJS ποιο μέρος της σελίδας ανήκει. Η τοποθέτησή της στην ετικέτα html παραδίδει ολόκληρο το έγγραφο στο framework και η τιμή που της δίνετε ονομάζει την ενότητα που πρόκειται να δημιουργήσετε.

Βήμα 3) Σύνδεση δεδομένων με ng-model και μια έκφραση

Η οδηγία ng-model συνδέει ένα στοιχείο εισόδου με μια ιδιότητα στο πεδίο εφαρμογής και μια έκφραση διπλής αγκύλης εκτυπώνει την ίδια ιδιότητα αλλού στη σελίδα. Επειδή η σύνδεση είναι αμφίδρομη, typing στο πλαίσιο ενημερώνει την επικεφαλίδα αμέσως, χωρίς δικό σας χειριστή συμβάντων.

Βήμα 4) Προσθέστε έναν ελεγκτή για τη λογική

Ένας ελεγκτής είναι ένας απλός JavaΣυνάρτηση script που λαμβάνει το αντικείμενο $scope και ορίζει αρχικές τιμές σε αυτό. Η καταχώρισή του στη μονάδα το καθιστά διαθέσιμο στην οδηγία ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Βήμα 5) Εκτελέστε τη σελίδα και ελέγξτε το αποτέλεσμα

Αποθηκεύστε το αρχείο ως index.html και ανοίξτε το σε οποιοδήποτε πρόγραμμα περιήγησης. Η επικεφαλίδα γράφει αρχικά "Hello World!" και ξαναγράφεται με κάθε πάτημα πλήκτρων. Δεν απαιτείται διακομιστής ιστού και κανένα βήμα δημιουργίας.

Εάν δεν εμφανιστεί τίποτα, ανοίξτε την κονσόλα του προγράμματος περιήγησης και επιβεβαιώστε ότι έχει φορτωθεί το σενάριο CDN και ότι το όνομα της ενότητας μέσα στο ng-app ταιριάζει ακριβώς με το όνομα που δόθηκε στο angular.module, επειδή μια αναντιστοιχία αποτυγχάνει σιωπηλά. Αυτή η μικρή σελίδα δείχνει ήδη τα δυνατά σημεία που περιγράφονται στη συνέχεια.

Πλεονεκτήματα AngularJS

Εδώ είναι τα πλεονεκτήματα του AngularJS:

• Δεδομένου ότι πρόκειται για ένα πλαίσιο ανοιχτού κώδικα, μπορείτε να περιμένετε ότι ο αριθμός των σφαλμάτων ή των προβλημάτων θα είναι ελάχιστος.
• Αμφίδρομη σύνδεση – Το AngularJS διατηρεί συγχρονισμένα τα δεδομένα και το επίπεδο παρουσίασης. Δεν χρειάζεται να γράψετε επιπλέον JavaΚώδικας σεναρίου για να διατηρείτε τα δεδομένα στον κώδικα HTML και στο επίπεδο δεδομένων σας συγχρονισμένα. Το AngularJS θα το κάνει αυτόματα αυτό για εσάς. Απλώς πρέπει να καθορίσετε ποιο στοιχείο ελέγχου είναι συνδεδεμένο με ποιο μέρος του μοντέλου σας.
• Δρομολόγηση – Το AngularJS μπορεί να αναλάβει τη δρομολόγηση, που σημαίνει τη μετάβαση από τη μία προβολή στην άλλη. Αυτή είναι η βασική αρχή των εφαρμογών μίας σελίδας, όπου μπορείτε να μεταβείτε σε διαφορετικές λειτουργίες στην εφαρμογή ιστού σας με βάση την αλληλεπίδραση του χρήστη, αλλά να παραμείνετε στην ίδια σελίδα.
• Το AngularJS υποστηρίζει δοκιμές, και τα δύο Δοκιμή μονάδαςκαι Δοκιμή ολοκλήρωσης.
• Επεκτείνει την HTML παρέχοντας τα δικά της στοιχεία που ονομάζονται οδηγίες. Σε υψηλό επίπεδο, οι οδηγίες είναι δείκτες σε ένα στοιχείο DOM (όπως ένα χαρακτηριστικό, ένα όνομα στοιχείου και ένα σχόλιο ή μια κλάση CSS) που λένε στον μεταγλωττιστή HTML της AngularJS να επισυνάψει μια συγκεκριμένη συμπεριφορά σε αυτό το στοιχείο DOM. Αυτές οι οδηγίες βοηθούν στην επέκταση της λειτουργικότητας των υπαρχόντων στοιχείων HTML για να δώσουν μεγαλύτερη ισχύ στην εφαρμογή ιστού σας.

Πλεονεκτήματα του AngularJS

Μια ισορροπημένη άποψη έχει εξίσου μεγάλη σημασία, επομένως οι συμβιβασμοί παρουσιάζονται στη συνέχεια.

Μειονεκτήματα και περιορισμοί του AngularJS

Κάθε framework ανταλλάσσει κάτι και το AngularJS δεν αποτελεί εξαίρεση. Αυτοί είναι οι περιορισμοί που αναφέρονται συχνότερα από ομάδες που συντηρούν εφαρμογές AngularJS:

• Δεν υπάρχει δικό του επίπεδο ασφαλείας – Το AngularJS δεν παρέχει ούτε έλεγχο ταυτότητας ούτε εξουσιοδότηση, επομένως και τα δύο πρέπει να επιβληθούν στον διακομιστή.
• Συνολική εξάρτηση από JavaΓραφή – Εάν ένας επισκέπτης απενεργοποιήσει JavaΣενάριο, η σελίδα επιστρέφει σε απλή σήμανση και δεν αποδίδεται.
• Απόδοση κύκλου πέψης – Οι αλλαγές ανιχνεύονται με την επανειλημμένη σύγκριση των τιμών που παρακολουθούνται, επομένως οι σελίδες με αρκετές χιλιάδες συνδέσεις μπορεί να φαίνονται αργές.
• Μια απότομη καμπύλη μάθησης – Τα πεδία εφαρμογής, οι οδηγίες, τα εργοστάσια, οι υπηρεσίες και οι πάροχοι αλληλεπικαλύπτονται και συχνά υπάρχουν διάφοροι τρόποι για να επιτευχθεί το ίδιο αποτέλεσμα.
• Ορατότητα μηχανών αναζήτησης – Οι προβολές συγκεντρώνονται στο πρόγραμμα περιήγησης, επομένως απαιτείται επιπλέον εργασία, όπως η προ-απόδοση, πριν τα προγράμματα ανίχνευσης ευρετηριάσουν σελίδες με αξιοπιστία.
• Δεν υπάρχουν περαιτέρω ενημερώσεις – Από τις 31 Δεκεμβρίου 2021 δεν υπάρχουν επίσημες ενημερώσεις κώδικα (patches), επομένως μια πρόσφατα ανακαλυφθείσα ευπάθεια παραμένει άλυτη, εκτός εάν ένας εμπορικός προμηθευτής παρέχει μια επιδιόρθωση.

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

AngularJS εναντίον Angular: Ποια είναι η διαφορά;

Τα AngularJS και Angular συχνά συγχέονται επειδή τα ονόματά τους είναι τόσο κοντά, αλλά είναι ξεχωριστά frameworks με διαφορετικές γλώσσες, αρχιτεκτονικές και γραμμές έκδοσης. Το AngularJS αναφέρεται μόνο στη σειρά 1.x που περιγράφεται σε αυτήν τη σελίδα. Angular σημαίνει έκδοση 2 και κάθε έκδοση μετά από αυτήν, μια πλήρη επανεγγραφή που κυκλοφόρησε το 2016 και η οποία εξακολουθεί να αναπτύσσεται ενεργά. Code δεν μετακινείται μεταξύ τους χωρίς σκόπιμη μεταναστευτική εργασία.

Η πρακτική συνέπεια είναι ότι ένας ελεγκτής AngularJS δεν μπορεί απλώς να ενσωματωθεί σε ένα έργο Angular. Η μετεγκατάσταση σημαίνει επανεγγραφή κάθε ελεγκτή ως στοιχείου, επομένως σχεδιάστε την ως πραγματική εργασία μηχανικής και όχι ως αναβάθμιση. Με λίγα λόγια, αντιμετωπίστε το AngularJS ως μια δεξιότητα συντήρησης και το Angular ως την πλατφόρμα για νέα ανάπτυξη.

Συχνές Ερωτήσεις