Τι είναι AngularJS?
AngularJS είναι ένα ισχυρό και των διαρθρωτικών πλαίσιο τη Javascript η οποία είναι ευκολότερο να εφαρμοστεί σε ενιαίο web εφαρμογές και επιτρέπει την οργάνωση μεγάλων, πελάτη βαριές εφαρμογές σε κάτι διαχειρίσιμο. Πρόκειται για ένα πλαίσιο web εφαρμογή ανοικτού κώδικα, ελεύθερο και χρησιμοποιείται από χιλιάδες προγραμματιστές σε όλο τον κόσμο.
AngularJS βασίζεται στην MVC (Προβολή Ελέγχου μοντέλο) σχέδιο που έχει ως στόχο να δημιουργήσουν εφαρμογές web πλούσια διαδίκτυο και να απλοποιήσει τόσο την ανάπτυξη και τη δοκιμή των εφαρμογών με τη χρήση MVC αρχιτεκτονική και διαχωρίζει πλούσιες εφαρμογές Διαδικτύου σας σε μοντέλα, απόψεων και των ελεγκτών. AngularJS δημιουργεί εφαρμογές μόνο σελίδα, που σημαίνει το πρόγραμμα περιήγησης πρόκειται να φορτώσει μία σελίδα, ανεξάρτητα από το μέγεθος της αίτησής σας.
AngularJS αναπτύχθηκε από Miskohevery και Adam Abron,συντηρείται από Google; χρησιμοποιείται εσωτερικά από αυτούς και το MIT. Είναι υπό την άδεια έκδοσης άδειας χρήσης Apache 2.0. Αρχικά είχε κυκλοφορήσει στην 2009 και η τρέχουσα σταθερή έκδοση είναι 1.3.5 (Decemeber 1, 2014).
AngularJS: Σε ΑΥΤΗΝ την ΕΝΟΤΗΤΑ, ας συνοψίσουμε τα βασικά της AngularJS.
- Είναι μια βιβλιοθήκη γραμμένο σε JavaScript
- Δεν είναι μια πλατφόρμα ή γλώσσα
- Δεν είναι ένα plug-in ή επέκτασης
- Επεκτείνει HTML, CSS και JavaScript
- Δεν είναι μια βιβλιοθήκη χειραγώγησης DOM, όπως jQuery
- Δεν απαιτεί jQuery ή κληρονομιά
- Δεν απαιτεί μονόδρομο δεσμευτική δεδομένων και κώδικα που
Γιατί AngularJS?
- Βασίζεται στο πρότυπο σχεδιασμού MVC το οποίο παρέχει πολλούς τρόπους για την οικοδόμηση web εφαρμογή στην πλευρά του πελάτη.
- Βοηθά να χτίσει πλευρά του client εφαρμογές με λιγότερο κώδικα και μεγαλύτερη ευελιξία.
- Επεκτείνει HTML χρησιμοποιώντας τη λειτουργικότητα των οδηγιών, γνωρίσματα, εκφράσεις και πρότυπα για την HTML.
- AngularJS είναι μια αρχιτεκτονική MVC η οποία απλοποιεί την ανάπτυξη και δοκιμή εφαρμογών εύκολα για την πλευρά του πελάτη.
- Είναι καλό για την ανάπτυξη εφαρμογών μόνο σελίδα και εμπρός άκρα για web based εφαρμογές.
- Έχει ευέλικτο πλαίσιο και πολλαπλών δυνατοτήτων. Γι 'αυτό χρησιμοποιείται τόσο για μεγάλα έργα εφαρμογής και μικρό μικρό εφαρμογές.
Features:
AngularJS (Βασίζονται σε JavaScript πλαίσιο) δημιουργεί εφαρμογές σε ένα πιο γρήγορο τρόπο χρησιμοποιώντας διάφορα χαρακτηριστικά, όπως η:
- Είναι μια πλευρά του client τεχνολογία η οποία παρέχει ισχυρά πράγματα για τη δημιουργία δυναμικών web εφαρμογές.
- Είναι ένα MVC βασίζεται πλαίσιο, επιτρέπει στους χρήστες να δημιουργήσουν την κατάλληλη αρχιτεκτονική και διατηρήσιμη εφαρμογές web.
- Είναι ένα πλαίσιο ανοικτού κώδικα web εφαρμογή που χρησιμοποιείται από χιλιάδες προγραμματιστές σε όλο τον κόσμο.
- Αυτό επιτρέπει τη χρήση επαναχρησιμοποιήσιμων εξαρτημάτων και επαναχρησιμοποίηση κώδικα.
- Κάνει τη δημιουργία της διεπαφής χρήστη (UI) εύκολο μέσω της διαδικασίας δέσμευσης δεδομένων.
- Δηλωτική προσέγγιση HTML.
- Βοηθά να διαιρέσει την αίτησή σας σε μικρότερα τμήματα.
Αρχιτεκτονικό διάγραμμα και Εξαρτήματα: Ας ρίξουμε μια ματιά στο διάγραμμα αρχιτεκτονική του πλαισίου AngularJS και τα συστατικά του.
Figure: AngularJS Αρχιτεκτονική
AngularJS περιέχει ενότητες τα οποία δρουν ως ένα δοχείο για διαφορετικούς τύπους εφαρμογών, όπως ελεγκτές, προβολές, οδηγίες, εργοστάσιο κ.λπ.. Ενότητα καθορίζει το πώς θα πρέπει να bootstrapped μια εφαρμογή. χρησιμοποιώντας modules, διαδικασίες θα είναι πιο εύκολο να κατανοήσουμε; μπορείτε να χρησιμοποιήσετε ξανά τον κωδικό, άκρο σε άκρο τεστ χρησιμοποιεί ενότητες για να παρακάμψετε τις ρυθμίσεις κ.λπ.. Είναι ο τόπος για τη δημιουργία, την καταχώρηση και ανάκτηση γωνιακές μονάδες.
config συστατικό δέχεται μόνο τους παρόχους από μονάδες, σημαίνει κάθε υπηρεσία, εργοστάσιο κλπ είναι παρουσίες του παρόχου. It provides all these instances to routes.
The Routes are used for linking URL’s to controllers and views.
The Views are used to add sophisticated handling of user events. It uses ng-viewdirective that complements route service by template of the current route to the main layout (index.html) αρχείο.
The controller controls the data of AngularJS applications which are regular JavaScript objects. AngularJS defines ng-controllerdirective which creates new controller objects by using controller function. And new child is available to the controller function as $scopeas shown in the diagram.
The προβολές sends element or attribute to the οδηγίες which tells AngularJS’s HTML compiler to attach specific behavior to the DOM element and its children.
The factory is used to define the AngularJS service and it is called when a service needs to be instantiated.
Ξεκινώντας με AngularJS:
AngularJS είναι εύκολο να ξεκινήσει με. Παρέχει χαρακτηριστικά όπως η αμφίδρομη σύνδεση δεδομένων που καθιστά προσαρμοσμένες ετικέτες, χαρακτηριστικά τα οποία εμπεριέχουν ενσωματωμένες οδηγίες που κάνουν την επέκταση της λειτουργικότητας του HTML ευκολότερη.
- Διανέμεται αρχείο JavaScript και μπορεί να χρησιμοποιηθεί σε μια ιστοσελίδα, συμπεριλαμβάνοντας AngularJS βιβλιοθήκη, όπως φαίνεται παρακάτω:
[κωδικός]
<script src =”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</γραφή>
[/κωδικός]
Μπορείτε επίσης να ελέγξετε την τελευταία έκδοση του AngularJS στην επίσημη ιστοσελίδα τους.
- Μπορείτε να δημιουργήσετε AngularJS εφαρμογή όπως φαίνεται παρακάτω:
[κωδικός]
<htmlng-app></html>
Ή
<html ng-app = "Η εφαρμογή μου"></html>
Ή
<divng-app></div>
Ή
<div ng-app = "Η εφαρμογή μου"></div>
[/κωδικός]
The ng-app Χαρακτηριστικό είναι το στοιχείο ρίζα του AngularJS app.
- Controller μπορεί να οριστεί ως φαίνεται παρακάτω:
[κωδικός]
<div ng-app = "" ng-ελεγκτή = "MyController">
<input type = "text" ng-μοντέλο "μήνυμα" =>
</div>
[/κωδικός]
The ng-controllerοδηγία ορίζει τον ελεγκτή εφαρμογής. The ng-μοντέλοοδηγία δεσμεύει την αξία των ελέγχων HTML, όπως τα πεδία εισαγωγής, επιλέξτε κλπ με τα στοιχεία εφαρμογής.
- Την εφαρμογή του ελέγχου με τη χρήση $scope αντιρρήσεις ως γραπτή παρακάτω:
[κωδικός]
functionMyController($scope){
$scope.message = "Πληκτρολογήστε το όνομά σας";
}
[/κωδικός]
The $scope αντικείμενο αναφέρεται στο μοντέλο εφαρμογής, το οποίο επικαλείται τον ελεγκτή που δημιουργεί μήνυμα ακίνητο στο πεδίο.
βασικές έννοιες:Στην ενότητα αυτή θα έχουμε μια λεπτομερή συζήτηση σχετικά με τα βασικά στοιχεία και τις έννοιες πίσω τους.
- ενότητες
- οδηγίες
- Έκταση
- ελεγκτές
- εκφράσεις
- πρότυπα
- Δρομολόγηση
- φίλτρα
ενότητες:
Ενότητες παρέχουν εξαιρετικό μηχανισμό για τη διαίρεση της αίτησης σε μικρά επαναχρησιμοποιήσιμα στοιχεία και να καθορίσετε πώς θα πρέπει να bootstrapped μια εφαρμογή. Ενότητες καθορίσετε τον τρόπο που ορίζουν τα στοιχεία στην αίτηση και καθιστά την εφαρμογή πιο ευανάγνωστο. Κάθε μονάδα αναγνωρίζεται από ένα μοναδικό όνομα.
οδηγίες:
Οδηγίες αποτελούν βασικές δομικές μονάδες των AngularJS που χρησιμοποιούνται για να δημιουργήσουν προσαρμοσμένες ετικέτες HTML και μπορεί να τοποθετηθεί σε ονόματα στοιχείων, χαρακτηριστικά και τα σχόλια. Οδηγίες μπορούν να χρησιμοποιηθούν ως οδηγίες HTML που τη δημιουργία πολύπλοκων widgets με τη λειτουργικότητα πολυεπίπεδη.
Έκταση:
Πεδίο εφαρμογής είναι ένα αντικείμενο που συνδέεται με θέα στον ελεγκτή. Στη δομή MVC, αναφέρεται στο μοντέλο εφαρμογή. Πεδία εφαρμογής μπορούν να παρακολουθήσουν τις εκφράσεις και να διαδώσει τα γεγονότα όπως είναι διατεταγμένα σε ιεραρχική δομή.
ελεγκτές:
Ελεγκτές είναι αντικείμενα JavaScript που καθορίζει την πραγματική συμπεριφορά της εφαρμογής σας. Είναι υπεύθυνη για τον καθορισμό λεπτομέρεις μοντέλου και τις λειτουργίες με τη χρήση $scope αντικείμενο. The controller does not store state and does not interact with remote services.
εκφράσεις:
Expressions are written inside curly braces “{{ }}” denote bindings which referrers to our application model. Expressions do not support control flow statements. AngularJS will output the data where they are used.
πρότυπα:
Template is just old-plain-HTML that does not include any angular specific file templates. It comes with a set of live templates to create controllers etc by using template engine. Templates are used to show information from the model and controller.
Δρομολόγηση:
It is used for linking URL’s to controller and views. Routing is taken care by service providers called $routeProvider to handle routing which is the provider of the $route service. In other words, είναι φόρτωση των επιμέρους πρότυπα ανάλογα με τη διεύθυνση URL της σελίδας.
φίλτρα:
Τα φίλτρα που χρησιμοποιούνται με εκφράσεις για να μετατρέψει ή να τροποποιήσει τα δεδομένα από τα μοντέλα. Μπορούμε να προσθέσουμε εκφράσεις ή οδηγίες χρησιμοποιώντας το χαρακτήρα του σωλήνα. AngularJS έχει μερικά από τα κοινώς χρησιμοποιούμενα φίλτρα όπως:
- νόμισμα: μετατρέπει τον αριθμό σε μορφή νομίσματος.
- κεφαλαία: μετατρέπει χορδές σε κεφαλαία.
- πεζά: μετατρέπει χορδές σε πεζά.
- φίλτρο: επιλέγει υποσύνολο των στοιχείων από πίνακα.
- Ταξινόμηση κατά: παραγγελίες σειρά με την έκφραση, όπως διέταξε αλφαβητικά για έγχορδα και αριθμητικά για τους αριθμούς.
Παράδειγμα:
Ας δημιουργήσουμε ένα απλό παράδειγμα με τη χρήση της βιβλιοθήκης AngularJS και να δημιουργήσει ένα αρχείο HTML ως FirstExample.html όπως φαίνεται παρακάτω:
Listing1: εφαρμογή απλή AngularJS
[κωδικός]
<!DOCTYPE html>
<html>
<κεφάλι>
<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></γραφή>
</κεφάλι>
<σώμα>
<div ng-app =”” ng-ελεγκτή =”MyController”>
Πληκτρολογήστε το Όνομα: <input type =”κείμενο” ng-μοντέλο =”userName”><br>
<br>
Πλήρες όνομα: {{userName}}
</div>
<γραφή>
functionMyController($scope) {
$scope.userName = “Δαβίδ”;
}
</γραφή>
</σώμα>
</html>
[/κωδικός]
Όπως συζητήθηκε, έχουμε συμπεριλάβει AngularJS JavaScript αρχείου στη σελίδα HTML που ορίζεται στο πλαίσιο του <κεφάλι> tag. Το επόμενο μέρος περιέχει AngularJS app που ορίζεται σύμφωνα με το ng-app χαρακτηριστικό τρέχει στο εσωτερικό του <div> tag.
The ng-controller οδηγία ορίζει τον ελεγκτή εφαρμογής. Οι AngularJS θα επικαλεστεί το "MyController” με $scope αντικείμενο το οποίο δημιουργεί ιδιότητα που ονομάζεται "όνομα χρήστη” στο πεδίο.
Ορίστε το όνομα του μοντέλου, χρησιμοποιώντας ng-μοντέλοοδηγία ορίζεται στο <εισαγωγή> tag. Δεσμεύει το πεδίο εισαγωγής για το ακίνητο ελεγκτή "όνομα χρήστη”.
Άνοιξε το FirstExample.html στο πρόγραμμα περιήγησης και να δούμε το αποτέλεσμα όπως φαίνεται στο στιγμιότυπο οθόνης παρακάτω:
Figure: AngularJS Παράδειγμα
Συμπέρασμα: Έχουμε ήδη συζητήσει όλες τις πτυχές της AnguarJS. Πριν ολοκληρώσω, ας συνοψίσουμε τα σημεία. AngularJS (επίσης γνωστή ως Γωνιακή)είναι ένα open source πλαίσιο εφαρμογής web. Παρέχει πλευρά του πελάτη MVC αρχιτεκτονική, μαζί με τα κοινώς χρησιμοποιούμενα συστατικά που απαιτούνται για πλούσιες εφαρμογές Διαδικτύου. AngularJS εξής δηλωτική μοντέλο προγραμματισμού για τη δημιουργία διεπαφών χρήστη. Ο κύριος στόχος αυτού του πλαισίου είναι να κάνει την ανάπτυξη και τη δοκιμή ευκολότερη.
Ελπίδα έχετε μια σαφή κατανόηση του πλαισίου AngularJS. Απολαύστε την ανάγνωση www.techalpine.com
