Διεπαφή Ιστού

Ένα βήμα προς βήμα εκπαιδευτικό πρόγραμμα για την πρώτη σας εφαρμογή AngularJS

Τι είναι το AngularJS;

Γωνιακό JS είναι ένα πλαίσιο JavaScript MVC που αναπτύχθηκε από την Google, το οποίο σας επιτρέπει να δημιουργήσετε καλά δομημένες εφαρμογές front-end που είναι εύκολο να ελεγχθούν και να συντηρηθούν.

Και γιατί να το χρησιμοποιήσω;

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

Το AngularJS επεκτείνει HTML, παρέχοντας Κατευθυντήριες γραμμές που προσθέτουν λειτουργικότητα στο περιθώριο κέρδους σας και σας επιτρέπουν να δημιουργήσετε ισχυρά δυναμικά πρότυπα. Μπορείτε επίσης να δημιουργήσετε τις δικές σας οδηγίες, δημιουργώντας επαναχρησιμοποιήσιμα στοιχεία που θα συμπληρώνουν τις ανάγκες σας και θα αφαιρείτε όλη τη λογική για χειρισμό του DOM.

Εφαρμόζει επίσης αμφίδρομη σύνδεση δεδομένων, συνδέοντας την HTML (προβολές) σε αντικείμενα JavaScript (μοντέλα) απρόσκοπτα. Με απλά λόγια, αυτό σημαίνει ότι οποιαδήποτε ενημέρωση του μοντέλου σας θα αντικατοπτρίζεται αμέσως στην άποψή σας, χωρίς την ανάγκη για χειρισμό DOM ή χειρισμό συμβάντων (π.χ. με το jQuery).

Η Angular παρέχει υπηρεσίες πάνω από το XHR που απλοποιούν πολύ τον κώδικά σας και σας επιτρέπουν να αφαιρέσετε κλήσεις API σε επαναχρησιμοποιήσιμες υπηρεσίες. Με αυτό, μπορείτε να μετακινήσετε το επιχειρηματικό μοντέλο και τη λογική σας στο front-end και να δημιουργήσετε ανεξάρτητες εφαρμογές web back-end (agnostic).

Τέλος, λατρεύω το Angular λόγω της ευελιξίας του όσον αφορά την επικοινωνία διακομιστή. Όπως τα περισσότερα πλαίσια JavaScript MVC, το Angular σάς επιτρέπει να εργάζεστε με οποιαδήποτε τεχνολογία διακομιστή, αρκεί να μπορεί να εξυπηρετεί την εφαρμογή σας μέσω ενός REST Web API. Αλλά η Angular παρέχει επίσης υπηρεσίες εκτός από το XHR, το οποίο απλοποιεί σημαντικά τον κώδικά σας και σας επιτρέπει να αφαιρέσετε κλήσεις API σε επαναχρησιμοποιήσιμες υπηρεσίες. Ως αποτέλεσμα, μπορείτε να μετακινήσετε το επιχειρηματικό μοντέλο και τη λογική στο front-end και να δημιουργήσετε εφαρμογές ιστού back-end ανεξάρτητος. Σε αυτήν την ανάρτηση, θα κάνουμε ακριβώς αυτό: ένα βήμα τη φορά.

Λοιπόν, από πού ξεκινάμε;

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

Δεδομένου ότι είμαι οπαδός των μηχανοκίνητων σπορ και της Formula 1, θα χρησιμοποιήσω μια υπηρεσία API Autosport ως back-end. Ευτυχώς, τα παιδιά από Ergast είναι αρκετά καλοί για να παρέχουν ένα δωρεάν μηχανοκίνητο αθλητικό API, το οποίο είναι ιδανικό για εμάς.

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

Οδηγός για να ξεκινήσετε

Ας ξεκινήσουμε το δείγμα της εφαρμογής μας με λίγο Boilerplate. Συνιστώ το έργο γωνιακός-σπόρος δεδομένου ότι δεν παρέχει μόνο έναν εξαιρετικό σκελετό για bootstrapping, αλλά επίσης θέτει τα θεμέλια για τη δοκιμή μονάδας με Κάρμα Υ Γιασεμί (Δεν κάνουμε καμία δοκιμή σε αυτό το demo, οπότε ας το αφήσουμε στην άκρη για τώρα. Δείτε το Μέρος 2ο αυτού του σεμιναρίου για να μάθετε περισσότερα σχετικά με τη ρύθμιση του έργου σας, για δοκιμή μονάδων και από άκρο σε άκρο).

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

Εντάξει, τώρα που κλωνοποιήσαμε το αποθετήριο και εγκαταστήσαμε τις εξαρτήσεις, ο σκελετός της εφαρμογής μας θα μοιάζει με αυτό:

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

Λαμβάνοντας υπόψη ότι έχουμε ήδη μια λίστα προγραμμάτων οδήγησης που ορίζονται στο πεδίο εφαρμογής μας (Μείνετε μαζί μου - Θα φτάσουμε εκεί) και αγνοώντας οποιοδήποτε CSS (για ευκολότερη ανάγνωση), το HTML μας θα μπορούσε να είναι:

  Drivers Championship Standings
 
  {{$index + 1}}     {{driver.Driver.givenName}} {{driver.Driver.familyName}}  {{driver.Constructors[0].name}}  {{driver.points}}

Το πρώτο πράγμα που θα παρατηρήσετε σε αυτό το πρότυπο είναι η χρήση των εκφράσεων ('{{' και '}}') για την επιστροφή τιμών από μεταβλητές. Στο AngularJS, οι εκφράσεις σας επιτρέπουν να εκτελέσετε ορισμένους υπολογισμούς, προκειμένου να επιστρέψετε μια επιθυμητή τιμή. Ορισμένες έγκυρες εκφράσεις θα ήταν:

{{ 1 + 1 }}
{ date }
{{ user.name }}

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

Κατανόηση των βασικών οδηγιών

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

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

Η οδηγία ng-app είναι υπεύθυνη για την εκκίνηση της εφαρμογής σας, για τον καθορισμό του πεδίου εφαρμογής της. Στο AngularJS, μπορείτε να έχετε πολλές εφαρμογές στην ίδια σελίδα, οπότε αυτή η οδηγία καθορίζει πού ξεκινά και τελειώνει κάθε εφαρμογή.
αρχείο κεφαλίδας σε c++
Η οδηγία ng-controller καθορίστε ποιος ελεγκτής θα είναι υπεύθυνος για την άποψή σας. Σε αυτήν την περίπτωση, το δηλώνουμε driversController, το οποίο θα παρέχει τη λίστα αγωγών μας (driversList).
Η οδηγία ng-repeat Είναι ένα από τα πιο συχνά χρησιμοποιούμενα και χρησιμοποιείται για τον καθορισμό του εύρους προτύπων σας όταν περνάτε από συλλογές. Στο παραπάνω παράδειγμα, επαναλαμβάνετε μια γραμμή στον πίνακα για κάθε αγωγό στο driversList.

Προσθήκη προγραμμάτων οδήγησης

Φυσικά, η άποψή μας είναι άχρηστη, χωρίς ελεγκτή. Ας προσθέσουμε προγράμματα οδήγησηςController στο controllers.js:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: 'German', Constructors: [ {name: 'Red Bull'} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: 'Spanish', Constructors: [ {name: 'Ferrari'} ] } ]; });

Ίσως παρατηρήσατε τη μεταβλητή εύρους $ που μεταδίδουμε ως παράμετρο στον ελεγκτή. Η μεταβλητή $scope υποτίθεται ότι δεσμεύει τον ελεγκτή και τις προβολές σας. Συγκεκριμένα, μεταφέρει όλα τα δεδομένα που θα χρησιμοποιηθούν στο πρότυπο. Όλα όσα προστίθενται σε αυτό (όπως το driversList στο προηγούμενο παράδειγμα) θα είναι άμεσα προσβάσιμα στις προβολές σας. Προς το παρόν, πρόκειται να εργαστούμε με μια σειρά εικονικών δεδομένων (στατικών), τα οποία πρόκειται να αντικαταστήσουμε αργότερα με την υπηρεσία API μας.

Τώρα, προσθέστε το στο app.js:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);

Με αυτήν τη γραμμή κώδικα αρχικοποιούμε την εφαρμογή μας και καταγράφουμε τις ενότητες από τις οποίες εξαρτάται. Θα επιστρέψουμε σε αυτό το αρχείο (app.js) αργότερα.

Τώρα, ας τα βάλουμε όλα σε index.html:

 F-1 Feeder  Drivers Championship Standings
 
  {{$index + 1}}     {{driver.Driver.givenName}} {{driver.Driver.familyName}}  {{driver.Constructors[0].name}}  {{driver.points}}

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

Σημείωση: Εάν χρειάζεστε βοήθεια για τον εντοπισμό σφαλμάτων της εφαρμογής σας και την προβολή των μοντέλων σας και την εμβέλεια στο πρόγραμμα περιήγησης, σας συνιστώ να ρίξετε μια ματιά στο εντυπωσιακό batarang. προσθήκη για Chrome.

Φόρτωση δεδομένων διακομιστή

Δεδομένου ότι ήδη γνωρίζουμε πώς να προβάλλουμε τα δεδομένα του ελεγκτή μας στην άποψή μας, είναι καιρός να ανακτήσουμε ζωντανά δεδομένα από έναν διακομιστή RESTful.

Για να διευκολύνει την επικοινωνία με διακομιστές HTTP, η AngularJS παρέχει τις υπηρεσίες $http και $resource. Το πρώτο είναι ένα επίπεδο πάνω από XMLHttpRequest ή JSONP , ενώ το τελευταίο παρέχει υψηλότερο επίπεδο αφαίρεσης. Θα χρησιμοποιήσουμε $http.

Για να αφαιρέσουμε τις κλήσεις API του διακομιστή μας από τον ελεγκτή πρόκειται να δημιουργήσουμε τη δική μας προσαρμοσμένη υπηρεσία, η οποία θα καταγράψει τα δεδομένα και θα λειτουργήσει ως αναδίπλωση $http προσθέτοντάς το στο services.js:

angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });

Με τις δύο πρώτες γραμμές, δημιουργούμε μια νέα ενότητα (F1FeederApp.services) και καταχωρίζουμε μια υπηρεσία μέσα σε αυτήν τη μονάδα (F1FeederApp.services). Σημειώστε ότι μεταβιβάζουμε $ http ως παράμετρο σε αυτήν την υπηρεσία. Αυτό λέει στον κινητήρα ένεση εξάρτησης από την Angular, την οποία απαιτεί η νέα μας υπηρεσία ( ή εξαρτάται ) της υπηρεσίας $http.

Με παρόμοιο τρόπο, πρέπει να πούμε στην Angular να συμπεριλάβει τη νέα μας ενότητα στην εφαρμογή μας. Ας το καταχωρήσουμε στο app.js, αντικαθιστώντας τον υπάρχοντα κωδικό μας με:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers', 'F1FeederApp.services' ]);

Τώρα, το μόνο που πρέπει να κάνουμε είναι να προσαρμόσουμε το controller.js λίγο, ενσωματώστε ergastAPIservice ως εξάρτηση και θα είμαστε έτοιμοι να συνεχίσουμε:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });

Τώρα, φορτώστε ξανά την εφαρμογή και ελέγξτε το αποτέλεσμα. Παρατηρήστε ότι δεν κάναμε αλλαγές στο πρότυπό μας, αλλά προσθέσαμε μια μεταβλητή nameFilter στο χέρι μας. Θα χρησιμοποιήσουμε αυτήν τη μεταβλητή.

Φίλτρα

Εξαιρετική! Έχουμε έναν λειτουργικό ελεγκτή. Αλλά δείχνει μόνο μια λίστα προγραμμάτων οδήγησης. Πρόκειται να προσθέσουμε ορισμένες λειτουργίες μέσω μιας απλής εισαγωγής αναζήτησης κειμένου, η οποία θα φιλτράρει τη λίστα. Ας προσθέσουμε την ακόλουθη γραμμή στο index.html μας, ακριβώς κάτω από την ετικέτα:

ng-model

Τώρα χρησιμοποιούμε την οδηγία $scope.nameFilter. Αυτή η οδηγία δεσμεύει το πεδίο κειμένου μας στη μεταβλητή index.html και διασφαλίζει ότι η τιμή του είναι πάντα ενημερωμένη με την τιμή εισαγωγής. Τώρα, ας επισκεφτούμε ng-repeat για άλλη μια φορά και ας κάνουμε μια μικρή προσαρμογή στη γραμμή που περιέχει την οδηγία :

ng-repeat

Αυτή η γραμμή λέει driversList ότι, πριν από την εξαγωγή των δεδομένων, ο πίνακας nameFilter πρέπει να φιλτραριστεί από την τιμή που είναι αποθηκευμένη στο $scope.nameFilter.

Σε αυτό το σημείο, η σύνδεση αμφίδρομων δεδομένων μπαίνει: κάθε φορά που μια τιμή εισάγεται στο πεδίο αναζήτησης, το Angular διασφαλίζει αμέσως ότι το nameFilter που συσχετίζουμε με αυτό ενημερώνεται με τη νέα τιμή. Δεδομένου ότι η δέσμευση λειτουργεί αμφίδρομα, τη στιγμή η τιμή ng-repeat ενημερώνεται, ο δεύτερος ηγέτης που σχετίζεται με αυτό (δηλαδή, Driver.givenName) λαμβάνει επίσης τη νέα τιμή και η προβολή ενημερώνεται αμέσως.

Ενημερώστε την εφαρμογή και δείτε τη γραμμή αναζήτησης.

Λάβετε υπόψη ότι αυτό το φίλτρο θα αναζητήσει τη λέξη-κλειδί σε όλα τα χαρακτηριστικά του μοντέλου, συμπεριλαμβανομένων αυτών που δεν χρησιμοποιούμε. Ας πούμε ότι θέλουμε απλώς να φιλτράρουμε Driver.familyName και driversController: Πρώτα, προσθέτουμε στο $scope.driversList =[];, ακριβώς κάτω από τη γραμμή $scope.searchFilter = function (driver) ; :

ng-repeat

Τώρα πίσω στο index.html, ενημερώνουμε τη γραμμή που περιέχει την οδηγία :

$routeProvider

Ενημερώστε την εφαρμογή για άλλη μια φορά και τώρα έχουμε μια αναζήτηση με όνομα.

Διαδρομές

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

Πρώτον, θα συμπεριλάβουμε την υπηρεσία app.js (el app.js) που θα μας βοηθήσουν να αντιμετωπίσουμε αυτές τις διάφορες διαδρομές εφαρμογών. Στη συνέχεια, θα προσθέσουμε δύο από αυτές τις διαδρομές: μία για τον πίνακα του πρωταθλήματος και μία για τα δεδομένα του προγράμματος οδήγησης. Εδώ είναι το νέο μας angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/drivers', {templateUrl: 'partials/drivers.html', controller: 'driversController'}). when('/drivers/:id', {templateUrl: 'partials/driver.html', controller: 'driverController'}). otherwise({redirectTo: '/drivers'}); }]); :

http://domain/#/drivers

Με αυτήν την αλλαγή, πλοήγηση σε driversController θα φορτώσει το partials/drivers.html και θα βρει τη μερική προβολή που θα αποδίδεται στο ng-view. Αλλά περίμενε! Δεν έχουμε μερική θέα ακόμα; Θα πρέπει επίσης να τα δημιουργήσουμε.

Μερικές προβολές

Το AngularJS θα σας επιτρέψει να συνδέσετε τις διαδρομές σας με συγκεκριμένους ελεγκτές και προβολές.

Αλλά πρώτα, πρέπει να πούμε στην Angular πού να αποδώσουμε αυτές τις μερικές απόψεις. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε την οδηγία index.html, τροποποιώντας το F-1 Feeder να αντικατοπτρίζει τα εξής:

partials/drivers.html

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

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

και να βάλουμε εκεί το τραπέζι πρωταθλήματος HTML. Θα χρησιμοποιήσουμε επίσης αυτήν την ευκαιρία για να συνδέσουμε το όνομα του οδηγού με τη διαδρομή μας από τα στοιχεία του οδηγού:

services.js

Τέλος, θα αποφασίσουμε τι θέλουμε να δείξουμε στη σελίδα λεπτομερειών. Τι γίνεται με μια περίληψη όλων των σχετικών γεγονότων σχετικά με τον οδηγό (π.χ. ημερομηνία γέννησης, εθνικότητα), μαζί με έναν πίνακα που περιέχει τα πρόσφατα αποτελέσματά σας; Για να το κάνουμε αυτό, προσθέτουμε τα εξής στο angular.module('F1FeederApp.services', []) .factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverRaces = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK' }); } return ergastAPI; }); :

controllers.js

Αυτή τη φορά, παρέχουμε το αναγνωριστικό προγράμματος οδήγησης στην υπηρεσία, ώστε να μπορούμε να ανακτήσουμε τις σχετικές πληροφορίες για ένα συγκεκριμένο πρόγραμμα οδήγησης. Τώρα, τροποποιούμε angular.module('F1FeederApp.controllers', []). /* Drivers controller */ controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) ; ergastAPIservice.getDrivers().success(function (response) { //Digging into the response to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }). /* Driver controller */ controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); ergastAPIservice.getDriverRaces($scope.id).success(function (response) { $scope.races = response.MRData.RaceTable.Races; }); }); :

$routeParams

Το σημαντικό πράγμα που πρέπει να σημειωθεί εδώ είναι ότι χορηγούμε μόνο την υπηρεσία $routeParams.id στον ελεγκτή του προγράμματος οδήγησης. Αυτή η υπηρεσία θα μας επιτρέψει να αποκτήσουμε πρόσβαση στις παραμέτρους της διεύθυνσης URL (για: id, σε αυτήν την περίπτωση) χρησιμοποιώντας partials/driver.html.

Τώρα που διαθέτουμε τα δεδομένα μας, χρειαζόμαστε μόνο την υπόλοιπη μερική προβολή. Ας δημιουργήσουμε ένα αρχείο με το όνομα <- Back to drivers list {{driver.Driver.givenName}} {{driver.Driver.familyName}} Country: {{driver.Driver.nationality}} Team: {{driver.Constructors[0].name}} Birth: {{driver.Driver.dateOfBirth}} Biography

Formula 1 2013 Results
Round	Grand Prix	Team	Grid	Race
{{race.round}}	{{race.raceName}}	{{race.Results[0].Constructor.name}}	{{race.Results[0].grid}}	{{race.Results[0].position}}

και προσθέτουμε:

ng-show

Παρατηρήστε ότι θέτουμε τώρα την οδηγία true σε καλή χρήση. Αυτή η οδηγία θα εμφανίσει το στοιχείο HTML μόνο εάν η παρεχόμενη έκφραση είναι false (δηλαδή, ούτε null, ούτε index.html). Σε αυτήν την περίπτωση, το avatar θα εμφανίζεται μόνο όταν το αντικείμενο του προγράμματος οδήγησης έχει φορτωθεί στο πεδίο εφαρμογής, από τον ελεγκτή.

Τελευταίες πινελιές

Προσθέστε μια δέσμη CSS και δώστε τη σελίδα σας. Θα πρέπει να καταλήξετε με κάτι τέτοιο:

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

|_+_|

, για να βελτιώσετε τις δυνατότητες πλοήγησης του χρήστη. Οι πιθανότητες είναι ατελείωτες.

Επεξεργασμένο (Μάιος 2014): Έχω λάβει πολλά αιτήματα για μια έκδοση με δυνατότητα λήψης του κώδικα που δημιουργήσαμε σε αυτό το σεμινάριο. Επομένως, αποφάσισα να το διαθέσω εδώ (απογυμνωμένο οποιοδήποτε CSS). Ωστόσο, η αλήθεια είναι ότι δεν το προτείνω να το κατεβάσετε, καθώς αυτός ο οδηγός περιέχει κάθε βήμα που χρειάζεστε για να δημιουργήσετε την ίδια εφαρμογή με τα χέρια σας, η οποία θα είναι μια πολύ πιο χρήσιμη και αποτελεσματική μαθησιακή άσκηση.

συμπέρασμα

Σε αυτό το σημείο στο σεμινάριο, έχουμε καλύψει όλα όσα χρειάζεστε για να γράψετε μια απλή εφαρμογή (όπως ένας πληροφοριοδότης της Φόρμουλας 1). Κάθε μία από τις υπόλοιπες σελίδες στο live demo (π.χ. πίνακας Πρωταθλήματος Κατασκευαστών, λεπτομέρειες ομάδας, πρόγραμμα) μοιράζεται την ίδια βασική δομή και ιδέες που έχουμε ελέγξει.

Τέλος, λάβετε υπόψη ότι το Angular είναι ένα πολύ ισχυρό πλαίσιο, και έχουμε μόλις χάσει την επιφάνεια, σε σχέση με όλα όσα έχει να προσφέρει. Στο μέρος 2ο Από αυτό το σεμινάριο, θα δώσουμε παραδείγματα για το γιατί η Angular ξεχωρίζει μεταξύ των συνομηλίκων της στα πλαίσια MVC front-end: δοκιμή. Ας εξετάσουμε τη διαδικασία σύνταξης και εκτέλεσης δοκιμών μονάδας με Κάρμα , επιτύχετε συνεχή ολοκλήρωση με Γιούμεν , Εδαφος Γ Κληματαριά και άλλα πλεονεκτήματα αυτού του φανταστικού πλαισίου front-end.