Οδηγός για αρχάριους για τη δημιουργία εφαρμογών ιστού με το AngularJS

αρχική σελίδα του angularjs

Ελάτε με το πλαίσιο εφαρμογών ιστού της Google

Εάν είστε επαγγελματίας προγραμματιστής JavaScript, πιθανότατα έχετε ακούσει Ember.js (ένα πλαίσιο JavaScript ανοιχτού κώδικα) και Backbone.js (μια βιβλιοθήκη JavaScript με διεπαφή RESTful JSON). Αλλά αν δεν είστε εξοικειωμένοι με Γωνιακό JS Ωστόσο, θα χάσετε μερικές από τις πολύ συναρπαστικές δυνατότητές του που μπορούν πραγματικά να βελτιώσουν το HTML σας για εφαρμογές ιστού.

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



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

πώς να φτιάξετε μια καλή ιστορία manga

01. Τι είναι το AngularJS;

Το AngularJS, που δημιουργήθηκε από την Google, είναι ένα πλαίσιο εφαρμογών ιστού ανοιχτού κώδικα που έχει σχεδιαστεί για να διευκολύνει τόσο την ανάπτυξη όσο και τη δοκιμή διεπαφών για προγραμματιστές ιστού. Ο κύριος στόχος του AngularJS είναι η επιμήκυνση εφαρμογών Ιστού με δυνατότητα MVC (Μοντέλο-προβολή-ελεγκτής). Είναι ένα πλαίσιο JavaScript MVC / MVVM πελάτη που είναι πλήρως επεκτάσιμο, λειτουργεί χωρίς εξαρτήσεις βιβλιοθήκης και λειτουργεί επίσης καλά με άλλες βιβλιοθήκες. Ακόμα, μπορείτε επίσης να τροποποιήσετε ή να αντικαταστήσετε κάθε χαρακτηριστικό του για να ταιριάζει στις συγκεκριμένες ανάγκες σας.

Το AngularJS αναπτύχθηκε το 2009 από τους Adam Abrons και Mi & scaron; ko Heverym, που ήταν μηχανικοί της Google εκείνη την εποχή. Όπως αναφέρεται στον επίσημο ιστότοπο, είναι ένα «δομικό πλαίσιο για δυναμικές εφαρμογές ιστού», το οποίο είναι καλύτερα προσαρμοσμένο για τη δημιουργία εφαρμογών ιστού μιας σελίδας που απαιτούν μόνο JavaScript, CSS και HTML από την πλευρά του πελάτη.

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

Πώς να χρησιμοποιήσετε το AngularJS

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

1. Συμπεριλάβετε την οδηγία «ng-app» στην ετικέτα. Θα κάνει το AngularJS να τρέχει στη σελίδα, ορίζοντας τη σελίδα ως γωνιακή εφαρμογή.

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

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

Today's tasks

  • {{task.name}}

Εδώ, η οδηγία ng-controller ορίζει ένα χώρο ονομάτων, όπου μπορείτε να τοποθετήσετε το Angular JS για τον έλεγχο των δεδομένων και την αξιολόγηση των εκφράσεων στο HTML σας. Ενώ η οδηγία ng-repeat είναι ένα αντικείμενο Angular repeater, το οποίο ζητά από την Angular να δημιουργήσει στοιχεία λίστας για όσο διάστημα έχετε να προβάλλετε εργασίες.

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

πώς να γίνεις καλύτερος στην τέχνη

Οδηγίες

Οι οδηγίες είναι ένα από τα πιο ισχυρά και συναρπαστικά χαρακτηριστικά του AngularJS. Σας επιτρέπουν να επεκτείνετε το HTML σας και χρησιμοποιούνται από το AngularJS για να συνδέσετε τη δράση του στη σελίδα. Σας επιτρέπουν να καθορίσετε προσαρμοσμένες και επαναχρησιμοποιήσιμες ετικέτες HTML, οι οποίες μπορούν να χρησιμοποιηθούν για τον χειρισμό χαρακτηριστικών DOM και τη μετριοπάθεια της συμπεριφοράς συγκεκριμένων στοιχείων. Όλες οι οδηγίες έχουν προτομή με ng-, σχεδιασμένες να είναι αυτόνομα στοιχεία χωριστά από την εφαρμογή MVC και τοποθετούνται σε χαρακτηριστικά HTML.



Μερικές από τις αξιοσημείωτες οδηγίες του AngularJS είναι:

  • ng-app: Αυτή η οδηγία λέει στην Angular πού να ενεργοποιηθεί. Για να ορίσετε μια σελίδα ως γωνιακή εφαρμογή, πρέπει να χρησιμοποιήσετε έναν απλό κωδικό:.
  • ng-bind: Αυτή η οδηγία λέει στο Angular να αλλάξει το περιεχόμενο κειμένου ενός στοιχείου HTML με την τιμή της δεδομένης έκφρασης και να ενημερώσει το κείμενο καθώς η τιμή αυτής της έκφρασης αλλάζει.
  • ng-model: Είναι πολύ παρόμοιο με το ng-bind, αλλά δεσμεύει την προβολή στο μοντέλο, το οποίο απαιτούν άλλες οδηγίες όπως select, textarea ή input.
  • ng-class: Επιτρέπει δυναμική φόρτωση χαρακτηριστικών κλάσης.
  • ng-controller: Αυτή η οδηγία σάς επιτρέπει να καθορίσετε μια κλάση ελεγκτή JavaScript για την αξιολόγηση των εκφράσεων HTML.
  • ng-επανάληψη: Βγαίνει χωρίς κόπο ένα στοιχείο, στο οποίο έχει ρυθμιστεί η δεδομένη μεταβλητή βρόχου, σε μια συλλογή.
  • ng-hide και ng-show: Χρησιμοποιώντας την τιμή μιας Boolean έκφρασης, αυτή η οδηγία αποφασίζει εάν το στοιχείο θα εμφανίζεται ή όχι.
  • ngIf: Είναι βασικό εάν η οδηγία δήλωσης επιτρέπει την επανατοποθέτηση ενός κλώνου του μεταγλωττισμένου στοιχείου στο DOM, εάν οι συνθήκες είναι αληθείς. Εάν η συνθήκη είναι λανθασμένη, τότε αφαιρεί το στοιχείο από το DOM.

Ακολουθεί ένα παράδειγμα μιας οδηγίας που ακούει ένα συμβάν και ενημερώνει κατά συνέπεια το εύρος του $.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Αυτή η προσαρμοσμένη οδηγία μπορεί να χρησιμοποιηθεί ως εξής:

Αμφίδρομη σύνδεση δεδομένων

Η δέσμευση δεδομένων είναι ίσως το πιο κυρίαρχο και αξιοσημείωτο χαρακτηριστικό του AngularJS. Γλιτώνει τους προγραμματιστές από τη σύνταξη σημαντικού αριθμού κώδικα μειώνοντας μεγάλο μέρος της επιβάρυνσης στο backend του διακομιστή. Σε μια τυπική εφαρμογή ιστού, το 80% της βάσης κώδικα είναι αφιερωμένο στον χειρισμό, τη διέλευση και την ακρόαση του DOM. Η δέσμευση δεδομένων καθιστά αυτόν τον κώδικα αόρατο, οπότε μπορείτε να εστιάσετε σε άλλα σημαντικά πράγματα της εφαρμογής σας.

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

πώς να χρωματίσετε τα κόμικς με το χέρι

Διάγραμμα μονόδρομης σύνδεσης δεδομένων

Η εικόνα είναι ευγενική προσφορά του http://docs.angularjs.org

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

Αμφίδρομο διάγραμμα δέσμευσης δεδομένων

Η εικόνα είναι ευγενική προσφορά του http://docs.angularjs.org

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

ετικέτα.

Name:

Hello, {{yourName}}!

Ενεση εξάρτησης

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

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

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



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Εκτός από αυτό, μπορείτε να ορίσετε τις δικές σας προσαρμοσμένες υπηρεσίες και να τις κάνετε προσβάσιμες σε ένεση.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Πρότυπα

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

Ακολουθούν γωνιακά στοιχεία και χαρακτηριστικά που μπορούν να χρησιμοποιηθούν:

  • Φίλτρο: Η μορφοποίηση δεδομένων για προβολή γίνεται από αυτό το στοιχείο.
  • Έλεγχοι φόρμας: Χρησιμοποιείται για επικύρωση εισόδου χρήστη.
  • Σήμανση: Για να δεσμεύσετε εκφράσεις σε στοιχεία, χρησιμοποιώντας τη σημείωση διπλού σγουρού στηρίγματος {{}}.
  • Οδηγία: Ένα στοιχείο ή χαρακτηριστικό που καθιστά ένα επαναχρησιμοποιήσιμο στοιχείο DOM ή επιμηκύνει ένα υπάρχον στοιχείο DOM.

Ο κώδικας που δίνεται παρακάτω δείχνει ένα πρότυπο με οδηγίες και σήμανση:

κυριαρχήστε στην τέχνη της ζωγραφικής ταχύτητας
{{buttonText}}

Σε μια τυπική εφαρμογή, το πρότυπο έχει οδηγίες CSS, HTML και Angular σε ένα μόνο αρχείο HTML (συνήθως index.html).

Δοκιμές

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

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

Ένα άλλο είδος δοκιμής στο AngularJS είναι το τεστ μονάδας μέσω του οποίου μπορείτε να δοκιμάσετε μεμονωμένες μονάδες κώδικα. Επιπλέον, η ομάδα Angular δημιούργησε επίσης μια επέκταση Chrome, που ονομάστηκε AngularJS Μπαταράνγκ , το οποίο επιτρέπει στους προγραμματιστές να εντοπίζουν εύκολα σημεία συμφόρησης απόδοσης και να τους επιτρέπουν να εντοπίσουν σφάλματα στις εφαρμογές τους στο πρόγραμμα περιήγησης.

Ο Ajeet Yadav είναι επαγγελματίας προγραμματιστής ιστού, σχετίζεται με το wordpressintegration.com , μια φημισμένη εταιρεία ανάπτυξης ιστοσελίδων που παρέχει υψηλής ποιότητας υπηρεσία μετατροπής θεμάτων / προτύπων Photoshop σε WordPress. Ακολουθηστε @Wordpress_INT στο Twitter.