Πώς να δημιουργήσετε ένα αναπτυσσόμενο πλαίσιο χρησιμοποιώντας το Angular;



Σε αυτό το blog μαθαίνουμε πώς να δημιουργήσουμε ένα απλό αναπτυσσόμενο πλαίσιο χρησιμοποιώντας το Angular framework. Το αναπτυσσόμενο πλαίσιο δημιουργείται χρησιμοποιώντας δύο μοναδικές μεθόδους.

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

Τι είναι η γωνιακή;


Γωνιακό λογότυπο - Angular MVC - edurekaΛοιπόν, αν διαβάζετε ένα ιστολόγιο σχετικά με τον τρόπο δημιουργίας ενός αναπτυσσόμενου πλαισίου χρησιμοποιώντας το Angular, μπορεί να υποτεθεί ότι έχετε ήδη μια γενική ιδέα του Angular. Για όσους από εσάς δεν έχετε και έχετε σκοντάψει αυτό το ιστολόγιο λόγω των ιδιοτροπιών και της φαντασίας του Διαδικτύου, είναι ένα πλαίσιο ανάπτυξης front-end. Αναπτύσσεται και συντηρείται από τον τεχνολογικό γίγαντα, την Google. Παρέχει έναν αρθρωτό τρόπο για την ανάπτυξη εφαρμογών ιστού μιας σελίδας όπως το Gmail, το PayPal και το Lego. Οι εφαρμογές που δημιουργήθηκαν με τη χρήση Angular εφαρμόζουν την προσέγγιση Model-View-View-Model.





Τι είναι το αναπτυσσόμενο πλαίσιο;

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

πώς να βγείτε στην Ιάβα
Επιλογή 1 Επιλογή 2 Επιλογή 3

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



Αναπτυσσόμενο κουτί χρησιμοποιώντας γωνιακό

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

Μέθοδος 1: Δημιουργία αναπτυσσόμενης λίστας με χρήση επιλογών ng

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

πώς να ρίξετε ένα διπλό σε ένα int
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ lingkup) {$ lingkop.names = ['Demavand', 'Pradeep', 'Ashutosh']})

Μέθοδος 2: Δημιουργία μιας αναπτυσσόμενης λίστας με χρήση του ng-repeat

Γωνιακό είναι ένα ευέλικτο , προφανώς έχει πολλούς τρόπους για να δημιουργήσει ένα βασικό αναπτυσσόμενο μενού. Η οδηγία ng-repeat επαναλαμβάνει ένα μπλοκ κώδικα HTML για κάθε στοιχείο σε έναν πίνακα, μπορεί να χρησιμοποιηθεί για τη δημιουργία επιλογών σε μια αναπτυσσόμενη λίστα, αλλά η οδηγία ng-options δημιουργήθηκε ειδικά για τη συμπλήρωση μιας αναπτυσσόμενης λίστας με επιλογές και έχει ένα σημαντικό πλεονέκτημα, δηλαδή τα αναπτυσσόμενα μενού που γίνονται με επιλογές ng επιτρέπει στην επιλεγμένη τιμή να είναι αντικείμενο, ενώ τα αναπτυσσόμενα μενού που γίνονται από ng-επανάληψη πρέπει να είναι συμβολοσειρά.



Αυτό το συγκεκριμένο απόσπασμα κώδικα εφαρμόζει την ίδια λίστα χρησιμοποιώντας ng-επανάληψη

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ lingkup) {$ cakupan.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

Αυτό μας φέρνει στο τέλος αυτού του μάλλον σύντομου «αναπτυσσόμενου καταλόγου blog χρησιμοποιώντας γωνιακό». Ελπίζω τώρα να έχετε μια ιδέα για το πώς θα μπορούσατε να εφαρμόσετε ένα αναπτυσσόμενο μενού στο δικό σας έργο. Εάν έχετε αμφιβολίες σχετικά με αυτό το ιστολόγιο, μπορείτε να τα δημοσιεύσετε ως σχόλιο στην παρακάτω ενότητα σχολίων. Θα μπορούσατε επίσης να μοιραστείτε τον δικό σας δημιουργικό τρόπο δημιουργίας ενός αναπτυσσόμενου πλαισίου.

talend open studio tutorial pdf

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

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'Angular Dropdown' και θα επικοινωνήσω μαζί σας.