AngularJS Hello World: Το πρώτο σας παράδειγμα προγράμματος

Με: Τζέιμς Χάρτμαν Τζέιμς Χάρτμαν
Hours Ενημερώθηκε

⚡ Έξυπνη Σύνοψη

Τα προγράμματα AngularJS Hello World χρειάζονται μόνο ένα αρχείο HTML, μία αναφορά σεναρίου και δύο οδηγίες, ng-app και ng-controller, για να συνδέσουν μια μεταβλητή εμβέλειας ελεγκτή στη σελίδα μέσω μιας έκφρασης με διπλή αγκύλη.

  • 🔘 εφαρμογή ng: Το χαρακτηριστικό ng-app σηματοδοτεί το ριζικό στοιχείο και εκκινεί αυτόματα την επώνυμη ενότητα AngularJS.
  • ☑️ ελεγκτής ng: Το ng-controller συνδέει το HelloWorldCtrl στο στοιχείο h1, καθιστώντας το πεδίο εφαρμογής του ελεγκτή διαθέσιμο εκεί.
  • ✅ Σύνδεση πεδίου εφαρμογής: Η ανάθεση του $scope.message μέσα στον ελεγκτή τροφοδοτεί την έκφραση {{message}} που αποδίδεται στην προβολή.
  • 🧪 Εις μια σειρά: Ένα αρχείο HTML συν μία αναφορά σεναρίου εκτελεί το παράδειγμα, χωρίς να απαιτείται βήμα δημιουργίας.
  • ️ Αντιμετώπιση προβλημάτων: Οι κυριολεκτικές αγκύλες στην οθόνη σχεδόν πάντα σημαίνουν ότι η βιβλιοθήκη δεν φορτώθηκε ποτέ ή ότι λείπει το ng-app.
  • 📊 Σημείωση έκδοσης: Η υποστήριξη του AngularJS έληξε τον Ιανουάριο του 2022, με την έκδοση 1.8.3 να είναι η τελική έκδοση. Η νέα δουλειά ανήκει στο Angular.
Περισσότερα

Το πρώτο παράδειγμα προγράμματος AngularJS Hello World που χρησιμοποιεί ng-app και ng-controller

Ο καλύτερος τρόπος για να δείτε τη δύναμη μιας εφαρμογής AngularJS είναι να δημιουργήσετε την πρώτη σας βασική εφαρμογή προγράμματος "Hello World" σε AngularJS.

Υπάρχουν πολλά ολοκληρωμένα περιβάλλοντα ανάπτυξης που μπορείτε να χρησιμοποιήσετε για AngularJS ανάπτυξη, μερικές από τις δημοφιλείς αναφέρονται παρακάτω. Στο παράδειγμά μας, χρησιμοποιούμε Webstorm ως IDE μας.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Γεια σου κόσμο, AngularJS

Σημείωση έκδοσης: Το AngularJS 1.x αποχώρησε από τη Μακροπρόθεσμη Υποστήριξη στις 31 Δεκεμβρίου 2021 και η ομάδα του framework επιβεβαιώνει ότι Η υποστήριξη του AngularJS έληξε επίσημα τον Ιανουάριο του 2022, με την έκδοση 1.8.3 την τελική έκδοση και χωρίς ενημερώσεις ασφαλείας μετά από αυτήν. Κάθε βήμα και μπλοκ κώδικα παρακάτω διατηρείται ακριβώς όπως έχει γραφτεί. Τα νέα έργα ανήκουν στο σύγχρονο Angular, όπου η ίδια άσκηση ξεκινά με ng serve και ένα αυτόνομο στοιχείο και εξακολουθεί να χρησιμοποιεί το ίδιο {{ }} σύνταξη παρεμβολής.

Το παρακάτω παράδειγμα δείχνει τον ευκολότερο τρόπο για να δημιουργήσετε την πρώτη σας εφαρμογή "Hello world" στο AngularJS.

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

Αρχείο HTML Hello World με σχολιασμούς AngularJS με επτά αριθμημένες κλήσεις για το ng-app, το ng-controller, την αναφορά σεναρίου και τη μεταβλητή scope

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Επεξήγηση:

  1. Ο "ng-appΗ λέξη-κλειδί "" χρησιμοποιείται για να υποδηλώσει ότι αυτή η εφαρμογή θα πρέπει να θεωρηθεί ως εφαρμογή AngularJS. Σε αυτήν την εφαρμογή μπορεί να δοθεί οποιοδήποτε όνομα.
  2. Ο ελεγκτής είναι αυτός που χρησιμοποιείται για τη διατήρηση της επιχειρηματικής λογικής. Στην ετικέτα h1, θέλουμε να έχουμε πρόσβαση στο ελεγκτής, το οποίο θα έχει τη λογική να εμφανίζει την ένδειξη "Hello World", επομένως μπορούμε να πούμε ότι σε αυτήν την ετικέτα θέλουμε να έχουμε πρόσβαση στον ελεγκτή με το όνομα "HelloWorldCtrl".
  3. Χρησιμοποιούμε μια μεταβλητή μέλους που ονομάζεται "μήνυμα", η οποία δεν είναι παρά ένα σύμβολο κράτησης θέσης για την εμφάνιση του μηνύματος "Hello World".
  4. Η «ετικέτα script» χρησιμοποιείται για την αναφορά στο script angular.js, το οποίο διαθέτει όλες τις απαραίτητες λειτουργίες για το AngularJS. Χωρίς αυτήν την αναφορά, αν προσπαθήσουμε να χρησιμοποιήσουμε οποιεσδήποτε συναρτήσεις του AngularJS, δεν θα λειτουργήσουν.
  5. Ο «Ελεγκτής» είναι το σημείο όπου δημιουργούμε στην πραγματικότητα την επιχειρηματική μας λογική, η οποία είναι ο ελεγκτής μας. Οι λεπτομέρειες κάθε λέξης-κλειδιού θα εξηγηθούν στα επόμενα κεφάλαια. Αυτό που είναι σημαντικό να σημειωθεί είναι ότι ορίζουμε μια μέθοδο ελεγκτή που ονομάζεται «HelloWorldCtrl», η οποία αναφέρεται στο Βήμα 2.
  6. Δημιουργούμε μια «συνάρτηση» η οποία θα καλείται όταν ο κώδικάς μας καλεί αυτόν τον ελεγκτή. Το αντικείμενο $scope είναι ένα ειδικό αντικείμενο στο AngularJS, το οποίο είναι ένα καθολικό αντικείμενο που χρησιμοποιείται στο AngularJS. Το αντικείμενο $scope χρησιμοποιείται για τη διαχείριση των δεδομένων μεταξύ του ελεγκτή και της προβολής.
  7. Δημιουργούμε μια μεταβλητή-μέλος με το όνομα "message", της αντιστοιχίζουμε την τιμή "Hello World" και την συνδέουμε με το αντικείμενο scope.

ΣΗΜΕΊΩΣΗ: Η οδηγία ng-controller είναι μια λέξη-κλειδί που ορίζεται στο AngularJS (Βήμα 2) και χρησιμοποιείται για τον ορισμό ελεγκτών στην εφαρμογή σας. Εδώ στην εφαρμογή μας, χρησιμοποιήσαμε τη λέξη-κλειδί ng-controller για να ορίσουμε έναν ελεγκτή με το όνομα 'HelloWorldCtrl'. Η πραγματική λογική για τον ελεγκτή θα δημιουργηθεί στο (Βήμα 5).

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

Παραγωγή:

Θα εμφανιστεί το μήνυμα 'Hello World'.

Παράθυρο προγράμματος περιήγησης με τίτλο Guru99 απόδοση της επικεφαλίδας Hello World από τη μεταβλητή εμβέλειας AngularJS

Πώς να φορτώσετε το AngularJS: CDN ή τοπικό αρχείο

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

Υπάρχουν δύο τρόποι για να εισαγάγετε αυτό το αρχείο.

  1. Αναφέρετε ένα αντίγραφο CDN. Το παράδειγμα δείχνει code.angularjs.org και καρφιτσώνει την έκδοση 1.6.9. Αυτός ο κεντρικός υπολογιστής εξακολουθεί να εξυπηρετεί εκδόσεις 1.x, με την υψηλότερη να είναι η 1.8.2, ενώ Google Οι φιλοξενούμενες βιβλιοθήκες δεν εμφανίζουν πλέον το AngularJS.
  2. Λήψη τοπικού αντιγράφου. Αποθηκεύστε το αρχείο δίπλα στη σελίδα HTML και στρέψτε την ετικέτα script προς αυτό. Ένα τοπικό αντίγραφο διατηρεί το παράδειγμα σε λειτουργία εκτός σύνδεσης, κάτι που έχει σημασία όταν ένας διακομιστής μεσολάβησης αποκλείει το CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Χρήση angular.js ενώ μαθαίνω και angular.min.js σε παραγωγή: η μη ελαχιστοποιημένη έκδοση εκτυπώνει αναγνώσιμη στοίβα traces, ενώ οι αναφορές ελαχιστοποιημένης δημιουργίας μετονομάζουν μεταβλητές.

Μόλις φορτωθεί το αρχείο, ng-app ξεκινά το framework. Το AngularJS αναζητά αυτό το χαρακτηριστικό όταν ολοκληρωθεί η φόρτωση του εγγράφου, αντιμετωπίζει το στοιχείο που το μεταφέρει ως τη ρίζα της μεταγλώττισης και εκκινεί την ενότητα που ονομάζεται στην τιμή της. Ακολουθούν τρεις συνέπειες:

  • Μόνο το πρώτο ng-app σε μια σελίδα εκκινείται αυτόματα. Ένα δεύτερο αγνοείται εκτός εάν angular.bootstrap καλείται χειροκίνητα.
  • Η τιμή πρέπει να ονομάζει μια ενότητα που έχει καταχωρηθεί με γωνιακός.ενότητα, διαφορετικά η κονσόλα αναφέρει [$injector:modulerr].
  • Τοποθέτηση ng-app σχετικά με την html Το στοιχείο, όπως κάνει το παράδειγμα, μεταφέρει ολόκληρο το έγγραφο στην περιοχή AngularJS. Ένα στενότερο κοντέινερ λειτουργεί επίσης.
Μην χάσετε:

Πώς λειτουργούν οι εκφράσεις {{ }} και η σύνδεση μοντέλου ng

Οι διπλές τιράντες γύρω message στην ετικέτα h1 δεν υπάρχει placeholder που συμπληρώνεται μία φορά κατά τη φόρτωση. Το AngularJS μεταγλωττίζει αυτόν τον κόμβο κειμένου σε έναν παρατηρητή στον περιβάλλοντα κόμβο. έκταση, επομένως η απόδοση που αποδίδεται tracks $scope.message για όσο διάστημα ζει η σελίδα.

Ο κύκλος εκτελείται σε τρία βήματα.

  1. Ο ελεγκτής γράφει μια τιμή σε $scope.
  2. Ένα πέρασμα σύνοψης συγκρίνει κάθε έκφραση που παρακολουθήθηκε με το προηγούμενο αποτέλεσμά της.
  3. Κάθε έκφραση της οποίας η τιμή άλλαξε επανεμφανίζεται στη θέση της.

Μια παρεμβαλλόμενη έκφραση είναι επομένως μονόδρομη, από το πεδίο εφαρμογής στην οπτική γωνία. Απαιτείται αμφίδρομη σύνδεση ng-μοντέλο, Οδηγιών σχεδιασμένο για στοιχεία ελέγχου φόρμας. Προσθήκη <input ng-model="message"> Δίπλα στην επικεφαλίδα, πληκτρολογήστε στο πλαίσιο και η επικεφαλίδα αλλάζει με κάθε πάτημα πλήκτρου, επειδή το ng-model γράφει την τιμή του πεδίου πίσω στην ίδια ιδιότητα εμβέλειας που παρακολουθεί η έκφραση.

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

Πώς να διορθώσετε μια κενή σελίδα ή ένα μη αποδοθέν {{ }}

Ένα πρώτο πρόγραμμα AngularJS αποτυγχάνει με έναν από τους δύο ορατούς τρόπους: η σελίδα παραμένει κενή ή το κείμενο {{message}} εμφανίζεται εκεί που θα έπρεπε να βρίσκεται το Hello World. Και τα δύο σημαίνουν ότι το framework δεν ανέλαβε ποτέ την επισήμανση. Επεξεργαστείτε τους παρακάτω ελέγχους με τη σειρά, με την κονσόλα του προγράμματος περιήγησης ανοιχτή.

  1. Επιβεβαιώστε ότι έχει φορτωθεί η βιβλιοθήκη. Ανοίξτε τον πίνακα "Δίκτυο" και αναζητήστε το angular.js Ένα αίτημα 404 ή ένα μη προσβάσιμο CDN αφήνει τα σιδεράκια στην οθόνη ανέπαφα.
  2. Ελέγξτε τη διαδρομή του σεναρίου. Μια σχετική διαδρομή επιλύεται σε σχέση με τον φάκελο που περιέχει το αρχείο HTML, επομένως ένα αντίγραφο σε ένα js ανάγκες υποφακέλων js/angular.min.js.
  3. Επαλήθευση ng-app. Ένα χαρακτηριστικό που λείπει ή είναι γραμμένο με λάθος ορθογραφία δεν σημαίνει τίποτα bootstraps. Το χαρακτηριστικό έχει παύλα ως ng-app στη σήμανση, παρόλο που η οδηγία έχει καμηλοειδή περίβλημα JavaΓραφή.
  4. Διαβάστε το σφάλμα της κονσόλας. [$injector:modulerr] σημαίνει ότι η ενότητα που ονομάστηκε από το ng-app δεν καταχωρήθηκε ποτέ. [ng:areq] συνήθως σημαίνει ότι το όνομα του ελεγκτή στο markup δεν ταιριάζει με το όνομα που έχει δοθεί .controller().
  5. Αναζητήστε μια δεύτερη εφαρμογή ng. Μόνο το πρώτο είναι bootstrapped, επομένως ένα αδέσποτο αντίγραφο που αφήνεται σε ένα εσωτερικό στοιχείο απενεργοποιεί σιωπηλά αυτό το μέρος της σελίδας.

Δύο ακόμη αιτίες ευθύνονται για τις περισσότερες από τις υπόλοιπες αναφορές.

  • Το πρωτόκολλο αρχείων. Αυτό το παράδειγμα ενός αρχείου εκτελείται κανονικά όταν ανοίγεται απευθείας από τον δίσκο, αλλά οποιοδήποτε πρότυπο ανακτάται μέσω XHR αποκλείεται από τους κανόνες προέλευσης του προγράμματος περιήγησης. Προωθήστε τον φάκελο μέσω HTTP μόλις εμφανιστούν τα πρότυπα.
  • Μια σύντομη εμφάνιση σιδεράκια. Όταν η σήμανση αποδίδεται πριν τη μεταγλωττίσει το πλαίσιο, η ακατέργαστη έκφραση είναι ορατή για μια στιγμή. Προσθήκη ng-cloak στο στοιχείο ή αντικαταστήστε την έκφραση με ng-bind="message", το οποίο δεν εμφανίζει ποτέ τη δική του σήμανση.

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

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

Οποιοδήποτε από τα τέσσερα που αναφέρονται παραπάνω λειτουργεί, και αυτό το παράδειγμα χρησιμοποιεί WebstormΕπειδή το πρόγραμμα είναι ένα μόνο στατικό αρχείο HTML, ένας επεξεργαστής απλού κειμένου είναι αρκετός. Ένα IDE προσθέτει μόνο ολοκλήρωση οδηγιών, ζωντανή επαναφόρτωση και ενσωματωμένο εντοπισμό σφαλμάτων.

Το $scope είναι το αντικείμενο σύνδεσης που μοιράζεται μεταξύ ενός ελεγκτής και την προβολή του. Η εγγραφή του $scope.message μέσα στο HelloWorldCtrl καθιστά αυτήν την ιδιότητα ορατή στην έκφραση που τοποθετείται στο στοιχείο h1.

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

Το AngularJS είναι το framework 1.x που φαίνεται εδώ, το οποίο καθοδηγείται από οδηγίες, $scope και plain. JavaScript. Το Angular, που σημαίνει έκδοση 2 και νεότερες εκδόσεις, είναι ξεχωριστό TypeScript πλαίσιο που βασίζεται σε στοιχεία και είναι η ενεργά συντηρούμενη γραμμή.

Κυρίως για τη διατήρηση υπαρχουσών εφαρμογών 1.x, οι οποίες παραμένουν ευρέως διαδεδομένες. Το λεξιλόγιο των συνδέσμων, των οδηγιών και ένεση εξάρτησης μεταφορές, ωστόσο η υποστήριξη έληξε τον Ιανουάριο του 2022, επομένως τα νέα έργα ανήκουν στο σύγχρονο Angular.

Ναι. Καταχωρίστε το καθένα με την εντολή .controller() στην ίδια ενότητα και συνδέστε τα σε διαφορετικά στοιχεία χρησιμοποιώντας την εντολή ng-controller. Κάθε ένα λαμβάνει το δικό του θυγατρικό πεδίο εφαρμογής, επομένως οι ιδιότητες με το ίδιο όνομα παραμένουν ανεξάρτητες.

Οι σύγχρονοι βοηθοί διαβάζουν μια βάση κώδικα 1.x και παράγουν ένα απόθεμα οδηγιών, φίλτρων και υπηρεσιών με προτεινόμενα ισοδύναμα στοιχείων και υπηρεσιών. Αυτό το απόθεμα είναι χρήσιμο για sco.ping το έργο, αν και κάθε χάρτηςping εξακολουθεί να χρειάζεται χειροκίνητη επαλήθευση.

GitHub Copilot ολοκληρώνει το στερεότυπο του ελεγκτή, τις αναθέσεις $scope και ng-υποβολή χειριστές από ένα σύντομο σχόλιο, αλλά η εκπαίδευσή του κλίνει προς το σύγχρονο Angular, οπότε ελέγξτε ότι οι προτάσεις χρησιμοποιούν πραγματικά σύνταξη 1.x.

Συνοψίστε αυτήν την ανάρτηση με: