Όταν ήμουν σε AngularJS πριν από μερικές εβδομάδες, ήμουν ενθουσιασμένος στην αρχή. Μέχρι τη στιγμή που είχα εργαστεί μέσω του συνόλου των εκπαιδευτικών που διατίθενται στην ιστοσελίδα του AngularJS, ήμουν ενθουσιασμένος που βρήκα αυτό το πλαίσιο.
Τι είναι το AngularJS; Το AngularJS είναι το (σχετικά) νέο παιδί στο μπλοκ κωδικοποίησης. Για να αναφέρουμε από τον ιστότοπό τους, είναι ένα "δομικό πλαίσιο για δυναμικές εφαρμογές ιστού" το οποίο είναι ιδιαίτερα κατάλληλο για την κατασκευή εφαρμογών ιστού μιας σελίδας, αν και σίγουρα δεν περιορίζεται σε αυτό.
Αναπτύχθηκε το 2009 από τους Miško Hevery και Adam Abrons - και οι δύο εργαζόμενοι της Google εκείνη τη στιγμή - είναι εξ ολοκλήρου JavaScript και αποκλειστικά από τον πελάτη, οπότε οπουδήποτε μπορεί να εκτελεστεί το JavaScript, το AngularJS μπορεί να τρέξει. Είναι επίσης μικρό: συμπιεσμένο και minified είναι λιγότερο από 29 kb. Και είναι ανοικτή πηγή υπό την άδεια MIT. Μπορείτε ακόμη να χρησιμοποιήσετε το λογότυπο, το οποίο διατίθεται με την άδεια Creative Commons Attribution-ShareAlike 3.0 Unported.
Σύμφωνα με τη Wikipedia, ο στόχος του "Angular" είναι να αυξήσει τις εφαρμογές που βασίζονται στον περιηγητή με την ικανότητα του μοντέλου-ελεγκτή (MVC) "και το κάνει αυτό, παρέχοντας ένα δεσμευτικό / MVC πλαίσιο. Αυτό είναι αμφίδρομο δεσμευτικό, σκεφτείτε. Νόστιμο. Με δομή τόσο απλή όσο {{τα δεδομένα μου}}, δεσμεύετε δεδομένα στη σελίδα σας. Η υπηρεσία εύρους $ ανιχνεύει αλλαγές στο μοντέλο και τροποποιεί εκφράσεις HTML στην προβολή μέσω ελεγκτών. Εργαζόμενοι προς την άλλη κατεύθυνση, οι αλλαγές στην προβολή αντανακλώνται στο μοντέλο. Αυτό καταργεί την ανάγκη για τη συντριπτική πλειονότητα των χειρισμών DOM που βασίζονται σε δεδομένα, πολλοί από εμάς, συμπεριλαμβανομένου και εμού, θεωρούν δεδομένο όταν εργάζονται με μια βιβλιοθήκη όπως το jQuery.
Οι γωνιακές λειτουργίες ξεκινούν ακριβώς έξω από το κιβώτιο χωρίς εξαρτήσεις από βιβλιοθήκες, παρόλο που μπορούν να επεκταθούν με τις πολλές λειτουργικές μονάδες που είναι διαθέσιμες και φυσικά μπορείτε να φτιάξετε το δικό σας ώστε να ταιριάζει στις συγκεκριμένες ανάγκες σας. Όντας καθαρό JavaScript, έχει επίσης το πλεονέκτημα ότι είναι server-agnostic.
Έχοντας συνηθίσει σε μια ισχυρή βιβλιοθήκη όπως το jQuery, είναι εύκολο να το συνδυάσεις για να κάνεις πράγματα που μπορεί να κάνει ήδη. Αναγνωρίζοντας αυτήν την πιθανή παγίδα, οι προγραμματιστές έχουν να πουν αυτό: "Εάν αγωνίζεστε να σπάσετε τη συνήθεια, σκεφτείτε να αφαιρέσετε το jQuery από την εφαρμογή σας. Πραγματικά. Το γωνιακό έχει την υπηρεσία $ http και τις ισχυρές οδηγίες που το καθιστούν σχεδόν πάντα περιττό. "Ένα πράγμα είναι σίγουρο, αν παραμείνετε σε Angular, οι jQuery βρόχοι και σαφής back-and-forth με το διακομιστή θα απουσιάζουν από τον κωδικό σας, Το γωνιακό σύστημα παρέχει μια τέτοια συνοπτική και καθαρή μέθοδο επίτευξης των ίδιων πραγμάτων.
Ο γωνιακός χρησιμοποιεί οδηγίες για να συνδέσει τη δράση του στη σελίδα. Οι οδηγίες, όλες προγενέστερες του ng-, τοποθετούνται σε html χαρακτηριστικά.
Ορισμένες κοινές οδηγίες που είναι προ-κατασκευασμένες με το Angular είναι οι εξής:
ng-app: αυτό είναι ουσιαστικά το αρχικό σημείο εισόδου του γωνιακού στη σελίδα. Λέει στο Angular το πού παίρνει να δράσει. είναι το μόνο που χρειάζεται για να ορίσετε μια σελίδα ως γωνιακή εφαρμογή.
ng-bind: αλλάζει το κείμενο ενός στοιχείου στην τιμή μιας έκφρασης.
θα εμφανίσει την τιμή του 'όνομα' μέσα στο εύρος. Οποιεσδήποτε αλλαγές στο 'όνομα' αντικατοπτρίζονται αμέσως στο DOM οπουδήποτε χρησιμοποιείται η μεταβλητή.
ng-controller: καθορίζει την κλάση JavaScript για τη συγκεκριμένη ενέργεια. Οι ελεγκτές διατηρούνται συνήθως σε εξωτερικά αρχεία .js.
ng-repeat: δημιουργεί τις δομές πολύ καθαρού βρόχου στη σελίδα σας.
- {{item.description}}
αγκαλιάζει αβίαστα μέσα από κάθε στοιχείο της συλλογής.
Δεν τα χρησιμοποίησα ακόμα, αλλά έχω διαβάσει ότι η δημιουργία προσαρμοσμένων οδηγιών μπορεί να είναι ένα δύσκολο θέμα, κάτι που χρειάζεται κάποιο χρόνο για να τυλίξετε το κεφάλι σας. Η γωνιακή προσφορά a βίντεο για να διευκρινιστεί η ιδέα.
Όπως αναφέρθηκε προηγουμένως, η οδηγία ng-app στην Η ετικέτα ορίζει τη σκηνή για τη λειτουργία Γωνίας στη σελίδα.
Προσθέτω στο κεφάλι της σελίδας για να φέρετε στο ίδιο το γωνιακό πλαίσιο.
δείχνει το εξωτερικό αρχείο JavaScript ή τα αρχεία που περιέχουν τις κλάσεις JavaScript που θα καλεί η εφαρμογή σας. Μια πολύ απλή τάξη, για παράδειγμα, μπορεί να είναι:
function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" } , {"description": "nero gun"}, {"description": "τηλέφωνο"},],} Περνώντας τον ng-controller "ItemListCtrl", το όνομα της φανταστικής κλάσης JavaScript, λέει στο Angular τον κώδικα που θα τρέξει:
και η σημείωση με διπλό βραχίονα λέει στο Angular ποιες εκφράσεις πρέπει να αξιολογήσει.
ng-repeat είναι μια θαυμάσια σύντομη οδηγία επαναλήπτη που βγαίνει από την τρέχουσα συλλογή και κάνει την συγκεκριμένη ενέργεια ή παρέχει τα συγκεκριμένα δεδομένα. Είναι τόσο απλό και καθαρό.
Stuff on my desk:
{{item.description}}Αυτή η απλή ρύθμιση θα εμφανίσει:
Stuff on my desk:coffee potnerf gunphoneΒεβαίως, αυτό δεν φαίνεται τόσο εντυπωσιακό, αλλά η ίδια η ιδέα είναι. Πολύ απλή σήμανση σελίδων και ελεγκτές καθιστούν ξεκίνημα με Γωνιακό, καλά, πολύ απλό.
Η λήψη πραγματικών δεδομένων στην εφαρμογή σας είναι ευχάριστα απλή. Γωνιακή αρέσει να καταναλώνει JSON:
function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;} }} Αυτό επιστρέφει ένα αντικείμενο JSON που μπορεί να χειριστεί κατά βούληση στη γωνιακή εφαρμογή σας.
Μία από τις βασικές αρχές της γωνίας βασίστηκε στο ότι οι εφαρμογές που κατασκευάστηκαν με αυτό είναι πλήρως δοκιμαστικές. Για δοκιμές από άκρο σε άκρο, διαθέτουμε Runner Γωνιακών Σενάριο για προσομοίωση αλληλεπιδράσεων χρήστη με την εφαρμογή σας. Τροφοδοτείτε τις δοκιμασίες σεναρίου γραμμένες σε JavaScript.
Για τον εντοπισμό σφαλμάτων στο πρόγραμμα περιήγησης, AngularJS Batarang είναι μια επέκταση Chrome διαθέσιμη στο github.
Καθώς το AngularJS κερδίζει περισσότερη πρόσφυση, θα διατεθούν περισσότεροι πόροι, αλλά υπάρχουν ήδη αρκετοί ιστότοποι που παρέχουν οδηγίες και τρόπους επέκτασης του γωνιακού.
ο AngularJS site είναι, φυσικά, η οριστική πηγή σας. Προσφέρουν ροκ-στερεά, απλά μαθήματα και έχουν μια αρκετά ενεργή Παρουσία Google+.
Υπάρχουν ορισμένοι γωνιακοί αποθετήρια στο GitHub.
Γωνιακές μονάδες, προσφέρει μια συλλογή υπομονάδων που υποβλήθηκαν από το χρήστη, από τις υπηρεσίες Backbone έως την ενσωμάτωση Rails.
Έχετε χρησιμοποιήσει το AngularJS ακόμα; Πώς συγκρίνεται με πολύ μεγαλύτερες βιβλιοθήκες όπως το jQuery; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, γωνίας μέσω Shutterstock.