).scope() είναι πραγματικά πολύ περίπλοκο. Αξίζει ωστόσο να το διαβάσετε, καθώς τα ξεκαρδιστικά προειδοποιήσεις αντισταθμίζουν.

Κοινό λάθος # 15: Δεν εξαρτάται από τον αυτοματισμό ή δεν βασίζεται σε αυτό πολύ

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

Ίσως χρησιμοποιείτε bower και ίσως npm ανάλογα με τον τρόπο με τον οποίο εξυπηρετείτε την εφαρμογή σας. Υπάρχει πιθανότητα να χρησιμοποιείτε γκρίνια, γουλιά ή brunch. Ή bash, το οποίο είναι επίσης δροσερό. Στην πραγματικότητα, ίσως έχετε ξεκινήσει το τελευταίο σας έργο με κάποια γεννήτρια Yeoman!

Αυτό οδηγεί στην ερώτηση: καταλαβαίνετε όλη τη διαδικασία του τι πραγματικά κάνει η υποδομή σας; Χρειάζεστε αυτό που έχετε, ειδικά αν περάσατε ώρες προσπαθώντας να επιδιορθώσετε τη λειτουργικότητά σας με σύνδεση webserver;

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

Κοινό λάθος # 16: Δεν εκτελούνται οι δοκιμές μονάδας σε λειτουργία TDD

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

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

Δοκιμή βάσει ανάπτυξης ως εφαρμογή για π.χ. gulp-karma runner, εκτελεί βασικά όλες τις δοκιμές μονάδας σας σε κάθε αποθήκευση αρχείου. Ο αγαπημένος μου τρόπος για να γράψω δοκιμές είναι, γράφω απλώς άδειες διαβεβαιώσεις πρώτα:

angular.reloadWithDebugInfo()

Μετά από αυτό, γράφω ή αναπαράγω τον πραγματικό κώδικα και μετά επιστρέφω στις δοκιμές και συμπληρώνω τις διαβεβαιώσεις με τον πραγματικό κωδικό δοκιμής.

Η εκτέλεση μιας εργασίας TDD σε ένα τερματικό επιταχύνει τη διαδικασία κατά περίπου 100%. Οι δοκιμές μονάδας εκτελούνται σε λίγα δευτερόλεπτα, ακόμα κι αν έχετε πολλά από αυτά. Απλώς αποθηκεύστε το δοκιμαστικό αρχείο και ο δρομέας θα το πάρει, θα αξιολογήσει τις δοκιμές σας και θα παράσχει σχόλια αμέσως.

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

καλύτεροι ιστότοποι για να μάθετε c ++
var injector = $(document.body).injector(); var someService = injector.get('someService');

Κοινό λάθος # 17: Μη χρήση των διαθέσιμων εργαλείων

Α - σημεία διακοπής χρωμίου

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

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

Υπάρχουν άλλοι τρόποι με τους οποίους μπορείτε να έχετε παρόμοια πρόσβαση στο χρόνο εκτέλεσης, π.χ. προσθέτοντας Ng-init κλήσεις. Αλλά τα σημεία διακοπής είναι πιο περίπλοκα.

Το AngularJS σάς επιτρέπει επίσης να έχετε πρόσβαση στο πεδίο εφαρμογής μέσω στοιχείων DOM (εφόσον είναι ενεργοποιημένο το ng-if) και να κάνετε ένεση διαθέσιμων υπηρεσιών μέσω της κονσόλας. Εξετάστε τα ακόλουθα στην κονσόλα:

ng-repeat

ή δείξτε ένα στοιχείο στον επιθεωρητή και μετά:

var ngInitDirective = ngDirective({ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } });

Ακόμα κι αν το debugInfo δεν είναι ενεργοποιημένο, μπορείτε να κάνετε τα εξής:

var ngShowDirective = ['$animate', function($animate) { return { restrict: 'A', multiElement: true, link: function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value) { // we're adding a temporary, animation-specific class for ng-hide since this way // we can control when the element is actually displayed on screen without having // to have a global/greedy CSS selector that breaks when other animations are run. // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845 $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { tempClasses: NG_HIDE_IN_PROGRESS_CLASS }); }); } }; }];

Και το έχετε διαθέσιμο μετά την επαναφόρτωση:

Για να κάνετε ένεση και να αλληλεπιδράσετε με μια υπηρεσία από την κονσόλα, δοκιμάστε:

$watch

B - χρονοδιάγραμμα χρωμίου

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

Εάν διαπιστώσετε ότι η απόδοση της εφαρμογής σας υποβαθμίζεται, πιθανότατα θα μπορείτε να βρείτε την αιτία για αυτό μέσω της καρτέλας χρονολογίου. Απλώς καταγράψτε τις ενέργειές σας που οδήγησαν σε ζητήματα απόδοσης και δείτε τι συμβαίνει. Πάρα πολλοί θεατές; Θα δείτε κίτρινες μπάρες να παίρνουν πολύ χώρο. Διαρροές μνήμης; Μπορείτε να δείτε πόση μνήμη καταναλώθηκε με την πάροδο του χρόνου σε ένα γράφημα.

Λεπτομερής περιγραφή: https://developer.chrome.com/devtools/docs/timeline

Γ - επιθεώρηση εφαρμογών από απόσταση σε iOS και Android

Εάν αναπτύσσετε μια υβριδική εφαρμογή ή μια αποκριτική εφαρμογή ιστού, μπορείτε να αποκτήσετε πρόσβαση στην κονσόλα της συσκευής σας, στο δέντρο DOM και σε όλα τα άλλα εργαλεία που είναι διαθέσιμα είτε μέσω των εργαλείων Chrome ή Safari dev. Αυτό περιλαμβάνει το WebView και το UIWebView.

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

Εδώ είναι οι αναλυτικές οδηγίες για το Android Και για iOS, οι ανεπίσημοι οδηγοί μπορούν να βρεθούν εύκολα μέσω του google.

Πρόσφατα είχα μια υπέροχη εμπειρία με browserSync . Λειτουργεί με παρόμοιο τρόπο με το livereload, αλλά στην πραγματικότητα συγχρονίζει όλα τα προγράμματα περιήγησης που βλέπουν την ίδια σελίδα μέσω του browserSync. Αυτό περιλαμβάνει την αλληλεπίδραση των χρηστών, όπως κύλιση, κλικ σε κουμπιά κ.λπ. Έβλεπα την έξοδο καταγραφής της εφαρμογής iOS, ενώ ελέγχω τη σελίδα στο iPad από την επιφάνεια εργασίας μου. Δούλεψε ωραία!

Κοινό λάθος # 18: Μη ανάγνωση του πηγαίου κώδικα στο παράδειγμα NG-INIT

// when in doubt, comment it out! :) , από τον ήχο του, θα πρέπει να είναι παρόμοια με

|_+_|
και
|_+_|
, σωστά; Αναρωτηθήκατε ποτέ γιατί υπάρχει ένα σχόλιο στα έγγραφα ότι δεν πρέπει να χρησιμοποιείται; IMHO που ήταν εκπληκτικό! Θα περίμενα η οδηγία να αρχικοποιήσει ένα μοντέλο. Αυτό είναι και αυτό που κάνει, αλλά… εφαρμόζεται με διαφορετικό τρόπο, δηλαδή δεν παρακολουθεί την τιμή του χαρακτηριστικού. Δεν χρειάζεται να περιηγηθείτε στον πηγαίο κώδικα του AngularJS - επιτρέψτε μου να τον φέρω:

|_+_|

Λιγότερο από ό, τι θα περίμενε κανείς; Πολύ ευανάγνωστο, εκτός από την περίεργη συντακτική οδηγία, έτσι δεν είναι; Η έκτη γραμμή είναι το θέμα.

Συγκρίνετέ το με το ng-show:

|_+_|

Και πάλι, η έκτη γραμμή. Υπάρχει ένα

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

συμπέρασμα

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

Αυτό που είναι υπέροχο για την ανάπτυξη front-end είναι ότι είναι πολύ ικανοποιητικό. Η δουλειά μας είναι ορατή αμέσως και οι άνθρωποι αλληλεπιδρούν άμεσα με τα προϊόντα που παραδίδουμε. Ο χρόνος που ξοδεύτηκε μαθαίνοντας JavaScript , και πιστεύω ότι πρέπει να επικεντρωθούμε στη γλώσσα JavaScript, είναι μια πολύ καλή επένδυση. Είναι η γλώσσα του Διαδικτύου. Ο ανταγωνισμός είναι εξαιρετικά δυνατός! Υπάρχει μια εστίαση για εμάς - η εμπειρία χρήστη. Για να είμαστε επιτυχημένοι, πρέπει να καλύψουμε τα πάντα.

Μπορείτε να κατεβάσετε τον πηγαίο κώδικα που χρησιμοποιείται σε αυτά τα παραδείγματα GitHub . Μη διστάσετε να το κατεβάσετε και να το κάνετε δικό σας.

Ήθελα να δώσω πιστώσεις σε τέσσερις προγραμματιστές εκδόσεων που με ενέπνευσαν περισσότερο:

Θα ήθελα επίσης να ευχαριστήσω όλους τους υπέροχους ανθρώπους στα κανάλια FreeNode #angularjs και #javascript για πολλές εξαιρετικές συνομιλίες και συνεχή υποστήριξη.

Και τέλος, να θυμάστε πάντα:

|_+_|