Περιεχόμενο
- Ετοιμαστείτε
- Προσθήκη υλικού σχεδιασμού
- Δημιουργία διαλόγου MD
- Δημιουργήστε την κύρια εφαρμογή
- Πηγαίνοντας μπροστά
Το Angular Material είναι ένα πλαίσιο συνιστωσών διεπαφής χρήστη που εφαρμόζει τις προδιαγραφές σχεδιασμού υλικών της Google για το Angular 2 - τη νέα, ταχύτερη υλοποίηση του Angular, γραμμένη σε TypeScript. Αν και εξακολουθεί να είναι άλφα, το Angular Material παρέχει ήδη ένα σύνολο επαναχρησιμοποιήσιμων και προσβάσιμων στοιχείων UI με βάση το Material Design.
Το ίδιο το Angular 2 έχει σχεδιαστεί για χρήση σε όλες τις πλατφόρμες (Ιστός, κινητό και επιτραπέζιο υπολογιστή) και έχει πολλές νέες τεχνολογίες που σχετίζονται με αυτό. Σε επίπεδο JavaScript έχουμε την πρόσθετη σύνταξη του ECMAScript 2015 (ES6), πληκτρολόγησης και υποστήριξη διεπαφής από το TypeScript, μαζί με διακοσμητές από το Metadata Reflection API. Χρησιμοποιεί παρατηρήσιμα από τη βιβλιοθήκη Reactive Extensions για τη διαχείριση ακολουθιών συμβάντων με λειτουργικό τρόπο προγραμματισμού. Χρησιμοποιεί ζώνες για την ενθυλάκωση και την παρεμπόδιση ασύγχρονης δραστηριότητας για την παροχή μιας μορφής τοπικού χώρου αποθήκευσης, επιτρέποντας στο Angular να ανταποκρίνεται αυτόματα σε αλλαγές δεδομένων σε ασύγχρονα συμβάντα για τη διατήρηση δεσμεύσεων δεδομένων. Τέλος, η φόρτωση της μονάδας γίνεται από το SystemJS.
Σε αυτό το σεμινάριο πρόκειται να χρησιμοποιήσουμε το Angular 2 για να δημιουργήσουμε μια απλή εφαρμογή που πρέπει να κάνουμε με ορισμένα στοιχεία σχεδιασμού υλικού. Αποκτήστε τα αρχεία προέλευσης εδώ.
Ετοιμαστείτε
Η ρύθμιση του αρχικού περιβάλλοντος μπορεί να είναι δύσκολη. Υπάρχει ένα γωνιακός 2-σπόρος διαθέσιμο, καθώς και ένα γωνιακός 2-εκκινητής. Ωστόσο, υπάρχει κάτι ακόμα καλύτερο: με γωνιακή-cli μπορείτε να διαμορφώσετε το έργο σας Angular 2 με μία μόνο εντολή.
Όχι μόνο θα μεριμνήσει για τη ρύθμιση όλων των τεχνολογιών που ανέφερα στην τελευταία ενότητα (μέσω Node και npm), θα προσθέσει επίσης σκαλωσιές για δοκιμές μονάδων Jasmine, δοκιμές End-to-end Protractor, καθώς και δοκιμές TSLint και ανάλυση στατικού κωδικού codelyzer του Angular 2 TypeScript. Αν και δεν χρειάζεται να τα χρησιμοποιήσετε όλα αυτά, σίγουρα θα πρέπει. Είναι τόσο απλό στη χρήση, θα αναρωτιέστε πώς τα πήγατε ποτέ χωρίς αυτό.
Το Angular CLI είναι διαθέσιμο ως πακέτο npm, οπότε θα χρειαστεί να εγκαταστήσετε Node και npm παγκοσμίως στο μηχάνημά σας χρησιμοποιώντας npm εγκατάσταση -g angular-cli. Τώρα δημιουργήστε μια νέα εφαρμογή Angular 2 με ng νέο υλικό2-do. Θα πρέπει να περιμένετε λίγο, γιατί αφού δημιουργήσει τα απαραίτητα αρχεία, ξεκινά ένα repo Git και κάνει εγκατάσταση npm για να κατεβάσετε όλες τις απαραίτητες ενότητες node_modules /. Ρίξτε μια ματιά στο package.json και εξοικειωθείτε με τις ενότητες και τα σενάρια εκεί.
Έχετε πλέον δημιουργήσει μια νέα εφαρμογή Angular 2 που ακολουθεί τις επίσημες βέλτιστες πρακτικές.
Προσθήκη υλικού σχεδιασμού
Η προεπιλεγμένη εφαρμογή δεν γνωρίζει τίποτα για το σχεδιασμό υλικών (μια επίβλεψη είμαι σίγουρος), οπότε πρέπει να το προσθέσουμε μόνοι μας.
Υπάρχει μια λίστα με τα δημοσιευμένα πακέτα σχεδιασμού υλικών Angular 2 στο @ angular2-υλικό βιβλιοθήκη. Σε αυτό το παράδειγμα πρόκειται να χρησιμοποιήσουμε πυρήνας (απαιτείται για όλες τις εφαρμογές Angular Material 2), καθώς και κουμπί, κάρτα, πλαίσιο ελέγχου, εικόνισμα, εισαγωγή, λίστα και γραμμή εργαλείων:
εγκατάσταση npm --save @ angular2-material / {core, button, card, checkbox, icon, input, list, toolbar} @ 2.0.0-alpha.5
Για να λειτουργήσει το πακέτο προμηθευτών, πρέπει να προσθέσουμε @ angular2-material / * * / * στη συστοιχία του vendorNpmFiles σε angular-cli-build.js. Πρέπει επίσης να προσθέσουμε το μονοπάτι στο @ angular2-υλικό στο χάρτες αντικείμενο:
const map: any = {'@ angular2-material': 'vendor / @ angular2-material'};
Ενημερώστε το SystemJS πώς να επεξεργάζεται νέες ενότητες επισημαίνοντας τα κύρια αρχεία καθενός από τα πακέτα:
const πακέτα: any = {}; // βάλτε τα ονόματα οποιουδήποτε από τα στοιχεία Υλικού σας εδώ const materialPkgs: string [] = ['core', 'button', 'card', 'checkbox', 'icon', 'input', 'list', 'toolbar "]; materialPkgs.forEach ((pkg) => {πακέτα [`@ angular2-material / $ {pkg}"] = {main: `$ {pkg} .js`};});
Τώρα ήρθε η ώρα να φορτώσετε τη γραμματοσειρά εικονιδίου Material Design στο src / index.html. Οποιαδήποτε γραμματοσειρά θα λειτουργήσει, αλλά χρησιμοποιούμε τα τυπικά εικονίδια σχεδίασης υλικών:
σύνδεσμος href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
Δημιουργία διαλόγου MD
Τώρα μπορούμε να συνεργαστούμε με το Material Design στην εφαρμογή που πρέπει να κάνουμε. Ένα από τα στοιχεία που λείπουν αυτήν τη στιγμή από το Angular 2 Material Design είναι μια προτροπή ή διάλογος, οπότε για την πρώτη μας εργασία θα φτιάξουμε ένα!
Ας δημιουργήσουμε ένα νέο στοιχείο χρησιμοποιώντας μια κάρτα σχεδίασης υλικών, μια γραμμή εργαλείων, μια είσοδο και μερικά κουμπιά. Στο src / εφαρμογή φάκελο του repo σας, πληκτρολογήστε ng δημιουργία παραθύρου διαλόγου. Αυτό δημιουργεί ένα νέο Διαλογικό στοιχείο σε src / app / διάλογος, και προσθέτει ένα βαρέλι σε system-config.ts έτσι το SystemJS ξέρει πώς να το φορτώσει.
Αν κοιτάξετε το δημιουργημένο dialog.component.ts αρχείο, θα δείτε ότι η πρώτη γραμμή είναι: εισαγωγή {Component, OnInit} από «@ Γωνιακό / πυρήνα»; . Συστατικό είναι ένα από τα κύρια δομικά στοιχεία του Angular, και OnInit είναι μία από τις διεπαφές που εφαρμόζει. Ωστόσο, για να έχουμε πρόσβαση στην επικοινωνία μεταξύ ένθετων στοιχείων, καθώς και των στοιχείων σχεδιασμού υλικών που αναφέρονται παραπάνω, πρέπει να εισαγάγουμε είσοδο, Παραγωγή και EventEmitter από @ γωνιακό / πυρήνα; και MdCard, Εισαγωγή Md, MdToolbar και MdButton από τις αντίστοιχες ενότητες τους στο @ angular2- υλικό βιβλιοθήκη.
Για να αποδώσουμε αυτά τα υλικά στοιχεία, πρέπει να εγχύσουμε τις οδηγίες μας Διαλογικό στοιχείο απαιτεί. Θα προσθέσουμε τις ακόλουθες οδηγίες στο @Συστατικά μεταδεδομένα:
templateUrl: «dialog.component.html», οδηγίες: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: [’dialog.component.css»]
Στη συνέχεια δηλώνουμε έναν αριθμό @Εισαγωγή μεταβλητές (εντάξει κείμενο, ακύρωση κειμένου και ούτω καθεξής) που μας επιτρέπουν να καθορίσουμε τα περιεχόμενα του διαλόγου. Πρέπει επίσης να προσθέσουμε ένα @Παραγωγή emitter που μας επιτρέπει να ενεργοποιήσουμε μια συνάρτηση με τιμή στο γονικό στοιχείο όταν κλείσει ο διάλογος.
Τώρα μπορούμε να αντικαταστήσουμε τον παραγόμενο κατασκευαστή στο dialog.component.ts με τον ακόλουθο κωδικό:
κατασκευαστής () {this.okText = «OK»; this.cancelText = «Ακύρωση»; } emitValue (τιμή) {this.valueEmitted.emit (τιμή); }
Εκτός από τη χρήση του @Εισαγωγή μεταβλητές μέσα μας Διαλογικό στοιχείο μέσα στο dialog.component.html πρότυπο, το είσοδος md μας επιτρέπει να δεχόμαστε πληροφορίες από τον χρήστη:
md-input [placeholder] = "placeholder" [(ngModel)] = "value" #dialogInput (keyup.enter) = "emitValue (value)" (keyup.escape) = "emitValue (null)"> / md-input >
ο κουμπιά md επιτρέψτε στον χρήστη να κάνει κλικ στο «OK», στο «Ακύρωση» ή σε οτιδήποτε αποφασίσετε να επισημάνετε αυτά τα κουμπιά:
κουμπί md-button (κλικ) = "emitValue (null)" color = "primer"> {{cancelText}} / κουμπί> κουμπί md-raise-button (κλικ) = "emitValue (value)" color = "primer"> {{okText}} / κουμπί>
Παρατηρήστε το κλειδί χειριστές συμβάντων, οι οποίοι φροντίζουν τα πράγματα όταν πατηθεί το πλήκτρο Enter ή Escape. Αυτοί οι χειριστές είναι πανομοιότυποι με το Κάντε κλικ χειριστές εκδηλώσεων για ακύρωση κειμένου και εντάξει κείμενο. Το Escape κάνει το ίδιο πράγμα με την ακύρωση (emitValue (null)), και πατώντας Enter θα έχει το ίδιο αποτέλεσμα με το κλικ OK (emitValue (τιμή)). Αυτό μας επιτρέπει να ζητάμε από τον χρήστη για ένα αξία μέσω ενός είσοδος mdκαι λάβετε εκπεμπόμενη έξοδο.
Μπορούμε να δούμε παραδείγματα ορισμένων στοιχείων σχεδιασμού υλικών: κάρτα-md, κουμπί md, και ούτω καθεξής. Πρέπει επίσης να προσθέσουμε κάποιο CSS dialog.component.css για να επιτύχουμε τη διάταξη που επιθυμούμε - μπορείτε να δείτε τον πλήρη κώδικα στο συνοδευτικό repo GitHub.
Τώρα ας προσθέσουμε αυτό Διαλογικό στοιχείο προς την material2-do.component.html για να δείτε πώς φαίνεται:
app-dialog [title] = "'Dialog Prompt'" [template] = "'Αυτό είναι το νέο μας Υλικό με βάση το στοιχείο:'" [placeholder] = "'Εισαγάγετε κείμενο εδώ'" [okText] = "'Ναι'" [cancelText] = "'No'" [value] = "'Έναρξη κειμένου'" (valueEmitted) = "log ($ event)" [showPrompt] = "true"> / app-dialog>
Παρατηρήστε ότι έχουμε κυριολεκτικές χορδές για όλα τα @ Είσοδοι. Αυτά απαιτούν από εμάς να χρησιμοποιούμε τόσο μεμονωμένα όσο και διπλά εισαγωγικά, διαφορετικά η Angular θα ερμήνευε το περιεχόμενο ως μεταβλητό όνομα στο Συστατικό πεδίο εφαρμογής.
Έχουμε επίσης αυτό που εκπέμπεται @Παραγωγή. Αυτό καθιστά τον διάλογο απλό και εξαιρετικά διαμορφώσιμο. Οι περισσότερες από τις εισόδους θα είχαν προεπιλεγεί σε κενές συμβολοσειρές εάν παραλειφθούν.
Ας τροποποιήσουμε Υλικό2DoComponent. Πρέπει να εισαγάγουμε το DialogComponent και να το δηλώσουμε ως οδηγία, διαφορετικά Υλικό2DoComponent δεν θα είναι σε θέση να το αποδώσει. Θα προσθέσουμε επίσης τη λειτουργία καταγραφής:
log (κείμενο) {console.log (κείμενο); }
Ας ρίξουμε μια ματιά στην χειροτεχνία μας. Μπορείτε να προβάλλετε την εφαρμογή (η προεπιλεγμένη θύρα είναι 4200) εκτελώντας έναρξη λειτουργίας σεναρίου npm, το οποίο με τη σειρά του τρέχει διακομιστής ng. Εάν ανοίξετε την κονσόλα, μπορείτε να δείτε τι καταγράφεται: τα περιεχόμενα της εισόδου εκπέμπονται όταν κάνετε κλικ στο «Ναι» και μηδενικό εκπέμπεται όταν κάνετε κλικ στο «Όχι».
Είμαστε τώρα έτοιμοι να χρησιμοποιήσουμε αυτό το νέο Διαλογικό στοιχείο για να δημιουργήσουμε την εφαρμογή που πρέπει να κάνουμε.
Δημιουργήστε την κύρια εφαρμογή
Θα χρησιμοποιήσουμε τα ακόλουθα MD Components για την κύρια εφαρμογή: γραμμή εργαλείων, λίστα, λίστα-είδος, πλαίσιο ελέγχου, κουμπί, εικόνισμα, εικονίδιο-μητρώοκαι εξαρτάται από αυτό, HTTP_PROVIDER, από τη βιβλιοθήκη Angular HTTP. Αυτά πρέπει λοιπόν να προστεθούν στο τμήμα εισαγωγής του Υλικό2DoComponent.
Για άλλη μια φορά, για να μπορέσουμε να αποδώσουμε αυτά τα στοιχεία, πρέπει να τα συμπεριλάβουμε στο @Συστατικά μεταδεδομένα οδηγίες συστοιχία μαζί με Διαλογικό στοιχείο, το οποίο μόλις προσθέσαμε:
οδηγίες: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent],
Για να αποκτήσετε πρόσβαση στο MdIconRegistry, πρέπει να το εγχύσουμε, μαζί με HTTP_PROVIDERS, μέσω του @Συστατικά μεταδεδομένα πάροχοι πίνακας:
παροχείς: [MdIconRegistry, HTTP_PROVIDERS],
Τώρα αξιοποιούμε το δικό μας Διαλογικό στοιχείο, προσθέτοντας αρκετή λογική για μια απλή εφαρμογή που πρέπει να κάνετε. ο todoDialog καλείται να ανοίξει το διάλογό μας, είτε με την εργασία να επεξεργαστεί (να κάνω) ή μηδενικό αν δημιουργούμε ένα νέο.
Ρυθμίζουμε τις προεπιλεγμένες μεταβλητές για μια νέα εργασία ή εάν επεξεργαζόμαστε μια εργασία, αντίθετα τις αλλάζουμε. Στη συνέχεια δείχνουμε το Διαλογικό στοιχείο ρυθμίζοντας το showDialog μεταβλητή σε αληθής:
todoDialog (todo = null) {this.okButtonText = "Δημιουργία εργασίας"; this.fieldValue = ’’; this.editingTodo = todo; εάν (todo) {this.fieldValue = todo.title; this.okButtonText = «Επεξεργασία εργασίας»; } this.showDialog = true; }
ο updateTodo Η συνάρτηση καλείται όταν θέλουμε να την κλείσουμε. Οι άλλες λειτουργίες (editTodo, addTodo, hideDialog) είναι βοηθητικές μέθοδοι για updateTodo.
updateTodo (title) {if (τίτλος) {title = title.trim (); εάν (this.editingTodo) {this.editTodo (τίτλος); } αλλιώς {this.addTodo (τίτλος); }} this.hideDialog (); }
Σε material2-do.component.html δώσαμε στην αίτησή μας ένα γραμμή εργαλείων md όπου έχουμε βάλει τον τίτλο, και ένα md-εικονίδιο που ονομάζεται Προσθήκη (που μοιάζει με σύμβολο συν) για το κουμπί αιωρούμενης ενέργειας (FAB), το οποίο μας επιτρέπει να δημιουργήσουμε μια νέα εργασία:
κουμπί md-fab (κλικ) = "todoDialog ()"> md-icon> add / md-icon> / κουμπί>
Χρησιμοποιούμε md-card-περιεχόμενο να κρατήσει ένα λίστα-md και ένα * ngΓια για να επαναλάβουμε και να εμφανίσουμε το δικό μας todoList πίνακας ως md-list-αντικείμενα:
md-list-item * ngFor = "let todo of todoList; let index = index">
πλαίσιο ελέγχου md μας δίνει τη δυνατότητα να σημειώσουμε στοιχεία στη λίστα μας. Και έχουμε δύο md-mini-fab κουμπιά που μπορούμε να χρησιμοποιήσουμε για να διαγράψουμε και να επεξεργαστούμε την εργασία μας: md-icons delete_forever και mode_edit:
κουμπί md-mini-fab (κλικ) = "remove (index)" color = "primer"> md-icon> delete_forever / md-icon> / κουμπί> κουμπί md-mini-fab (κλικ) = "todoDialog (todo) "color =" primer "[απενεργοποιημένο] =" todo.completed "> md-icon> mode_edit / md-icon> / κουμπί>
Με λίγο CSS, αυτά παραμένουν κρυμμένα μέχρι να μετακινηθείτε (ή κάντε κλικ). Μπορείτε να δείτε τον κωδικό στο repo.
Πηγαίνοντας μπροστά
Καθώς το Angular Material 2 βρίσκεται ακόμα σε άλφα, λείπουν ορισμένα πράγματα - συγκεκριμένα, το εφέ κυματισμού του κουμπιού MD. Παρόλο που μπορεί να υπάρξουν αλλαγές στο API μπροστά, λειτουργεί πολύ. Επίσης ανταποκρίνεται στον ισχυρισμό ότι έχει ένα απλό API που δεν μπερδεύει τους προγραμματιστές και είναι εύκολο να αξιοποιήσει τη δημιουργία εξαιρετικών εφαρμογών.
Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 284 του net, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Εγγραφείτε εδώ.
