15 Χρήσιμα εργαλεία AngularJS για προγραμματιστές

Σκέφτεστε να βυθίζετε τα δάχτυλα των ποδιών σας σε γωνίες; Αν έχετε περάσει από τα 10 καλύτερα μαθήματα μας για να μάθετε το Post AngularJS και θα θέλατε να παίξετε με το Angular από μόνος σας, είστε στη σωστή θέση. Έχουμε εδώ μερικά εργαλεία που μπορούν να βελτιώσουν τη ροή εργασιών ανάπτυξης.

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

IDE & κειμενογράφος

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

WebStorm

Το WebStorm είναι κατάλληλο όχι μόνο για Javascript αλλά και HTML και CSS. Έχει ένα φοβερό ζωντανό πρόγραμμα επεξεργασίας που σας επιτρέπει να δείτε τα αποτελέσματα κωδικοποίησης στο πρόγραμμα περιήγησης χωρίς να απαιτείται συχνή ανανέωση. Από προεπιλογή, η πιο πρόσφατη έκδοση τους φέρει τη δέσμη plugin AngularJS, αν και θα πρέπει πρώτα να συμπεριλάβετε το γωνιακό σενάριο στο έργο σας. Για περισσότερες λεπτομέρειες, διαβάστε την ανάρτηση ιστολογίου WebStorm.

Aptana

Το Aptana είναι ένα ελεύθερο IDE ανοιχτού κώδικα, το οποίο είναι στην πραγματικότητα η εξατομικευμένη έκδοση του Eclipse που εστιάζει σε Javascript, HTML, CSS και άλλα καλούδια Ιστού. Για να επεκτείνετε το Aptana για τη γωνιακή υποστήριξη, το μόνο που χρειάζεται να κάνετε είναι να εγκαταστήσετε την επέκταση Ecclese Eccle από το Eclipse Marketplace.

Υπέροχο κείμενο

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

Περισσότερα για το Υπέροχο κείμενο:

• 18 απαραίτητα πρόσθετα Sublime Text
• 12 πιο περιζήτητες συμβουλές και τεχνάσματα για το Υπέροχο κείμενο
• Πώς να εισαγάγετε τη διαδρομή αρχείου σε Υψηλό κείμενο
• Γρήγορη προεπισκόπηση του έργου Localhost με το Υψηλό κείμενο
• Διαχείριση σημειώσεων και λιστών με Υψηλό κείμενο
• Προσθήκη Προθέματος Προμηθευτή CSS με Υψηλό Κείμενο

Εργαλεία δοκιμής και εντοπισμού σφαλμάτων

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

Κάρμα

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

Γιασεμί

Το Jasmine χρησιμοποιείται για την ανάπτυξη με γνώμονα τη συμπεριφορά (BDD), αλλά μπορείτε να το χρησιμοποιήσετε για δοκιμαστική ανάπτυξη (TDD) με προσαρμογή λίγο. Συνήθως συνδυάζεται με το Karma: Karma ως δοκιμαστής, Jasmine ως δοκιμαστικό πλαίσιο. Η Jasmine θα επιθεωρήσει αυτόματα όλες τις τάξεις και τις λειτουργίες Javascript και θα σας ειδοποιήσει για τον μη επεξεργασμένο κώδικα. Το μειονέκτημα είναι δεν γνωρίζει ποιο περιβάλλον (προγράμματα περιήγησης) πραγματοποίησε τη δοκιμή, αλλά το Κάρμα αντισταθμίζει αυτό το μειονέκτημα.

MochaJS

Σε σύγκριση με το Jasmine, MochaJS είναι πιο ευέλικτη αλλά Η Jasmine έρχεται ως πακέτο all-in-one. Με το MochaJS, αν θέλετε να χρησιμοποιήσετε κατασκοπευτικό πλαίσιο, πρέπει να ρυθμίσετε το Mocha με την κατάλληλη βιβλιοθήκη του, όπως sinon.js. Και αν χρειάζεστε πλαίσιο επιβεβαίωσης, το Mocha πρέπει να διαμορφωθεί με ένα πλαίσιο όπως ο Chai.

Μοιρογνωμόνιο

Ο μοιρογνωμόνας είναι ίσως ο πιο ισχυρός αυτοματοποιημένος από άκρη σε άκρη (e2e) Εργαλείο γωνιακής δοκιμής. Αναπτύχθηκε από την γωνιακή ομάδα, η Protractor είναι χτισμένη συνδυάζοντας μερικές από τις εξαιρετικές τεχνολογίες που είναι διαθέσιμες σήμερα όπως NodeJS, σελήνιο, webDriver, Mocha, αγγούρι και Γιασεμί.

Γωνιακό Batarang

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

ng-επιθεωρητής

Ο ng-επιθεωρητής είναι μια επέκταση προγράμματος περιήγησης που υποστηρίζεται από το Chrome και το Safari. Σε αντίθεση με το Batarang το οποίο εμφανίζεται στο DevTools, ο ng-επιθεωρητής προτιμά την οθόνη πλευρικού πίνακα. Μπορείτε να επιθεωρήσετε και να επισημάνετε τα στοιχεία DOM καθώς κινείστε πάνω από ένα πεδίο. Μπορείτε επίσης να δείτε το πεδίο εφαρμογής και το μοντέλο ενημερωμένο σε πραγματικό χρόνο.

Ενότητες

Το καλύτερο μέρος για την εύρεση γωνιακών ενοτήτων είναι το ngmodules.org. Αλλά εάν χρειάζεστε μια γρήγορη επισκόπηση, παρακάτω είναι μια λίστα με κάποιους καλούς πόρους που έχουμε συλλέξει για εσάς.

AngularUI

Το AngularUI είναι μια συλλογή από στοιχεία UI που έχουν κατασκευαστεί με το AngularJS. Οι οδηγίες χρησιμότητάς της σάς βοηθούν να δημιουργήσετε γρηγορότερες εφαρμογές. Αντί για widgets, το AngularUI χρησιμοποιεί ακατέργαστες οδηγίες όπως ui-router, ui-χάρτη, ui-ημερολόγιο κ.λπ. Οι οδηγίες που πιθανώς θα σας αρέσουν περισσότερο είναι η UI Bootstrap που μπορεί να γεννηθεί Δημιουργία Twitter Bootstrap σε γωνιακή. Ελέγξτε την καθαρή και ωραία σελίδα τεκμηρίωσης για να ξεκινήσετε.

ng-Table - Πίνακας ταξινόμησης και φιλτραρίσματος

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

Όμορφα

Με το Γωνιακό, μπορεί να έχετε δύσκολη εργασία $ πόρων και $ http για τη δημιουργία του API Rest. Υπόλοιπο μπορεί να βοηθήσει η χρήση των αιτήσεων για λήψη, διαγραφή, ενημέρωση και αποστολή δεδομένων ευκολότερη. Ορισμένες λειτουργίες που θέτουν το Restangular εκτός από $ πόρων είναι υποστήριξη μεθόδου HTTP, στοιχείο αυτοσύνδεσης, υποσχέσεις χρήσης και πολλά άλλα. Μάθετε περισσότερα εδώ και δείτε το live demo στο Plunkr.

Γωνιακό Gettext

Το Angular-Gettext είναι μια εξαιρετική γωνιακή μονάδα για εξαιρετικά εύκολο εντοπισμό. Τα βασικά χαρακτηριστικά είναι ότι μπορείτε να μεταφράσετε την εφαρμογή σας web τόσο εύκολα όσο προσθέτετε Χαρακτηριστικό. Σας επιτρέπει να εστιάσετε στην ανάπτυξη των εφαρμογών σας και να αφήσετε όλες τις μεταφράσεις στο Angular-Gettext.

Εργαλεία & εφαρμογές

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

Γεννήτρια γωνίας

Ο Yeoman έχει μια γεννήτρια κώδικα που ονομάζεται Generator Angular. Με αυτό το εργαλείο, μπορείτε να επιταχύνετε την γωνιακή ανάπτυξή σας μόνο με ζεύγη τερματικών εντολών. Μπορεί να δημιουργήσει αυτόματα διακομιστή ανάπτυξης, δοκιμή μονάδας και πλαισίου, προβολή, οδηγίες και πολλά άλλα.

ngDocs - Αναφορά AngularJS

ngDocs είναι μια εφαρμογή Android που παρέχει τεκμηρίωση και αναφορές για το AngularJS, ωραία και απλή. Ορισμένα βασικά μαθήματα είναι επίσης διαθέσιμα αν είστε νέοι στο γωνιακό. Υπάρχουν επιπλέον λειτουργίες όπως ένας οδηγός προγραμματιστή και μια αναφορά σφάλματος που μπορεί να θέλετε να δείτε. Με αυτό στη συσκευή σας Android, παραλάβετε το Angular όπου κι αν πάτε.