Εφαρμογή AngularJS Hello World: Το πρώτο σας πρόγραμμα

Πίνακας περιεχομένων:

Anonim

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

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

  1. Καταιγίδα Ιστού
  2. Υψηλό κείμενο
  3. AngularJS Eclipse
  4. Visual Studio

Γεια σας, AngularJS

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

Guru99

{{message}}

Επεξήγηση κώδικα:

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

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

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

Παραγωγή:

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