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

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

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

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

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

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

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

Πρόγραμμα AngularJS Hello World

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

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

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

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

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

Παραγωγή:

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

Πρόγραμμα AngularJS Hello World