Δημιουργήστε μια εφαρμογή σχεδιασμού υλικών με το Angular 2

Οθόνες φορητού υπολογιστή και τηλεφώνου με γωνιακό λογότυπο

Το 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, δοκιμές Protractor end-to-end, plus test TSLint και ανάλυση στατικού κωδικού codelyzer του Angular 2 TypeScript. Αν και δεν χρειάζεται να τα χρησιμοποιήσετε όλα αυτά, σίγουρα θα πρέπει. Είναι τόσο απλό στη χρήση, θα αναρωτιέστε πώς τα πήγατε ποτέ χωρίς αυτό.

Το Angular CLI είναι διαθέσιμο ως πακέτο npm, οπότε θα χρειαστεί να εγκαταστήσετε Node και npm παγκοσμίως στον υπολογιστή σας χρησιμοποιώντας npm εγκατάσταση -g angular-cli . Τώρα δημιουργήστε μια νέα εφαρμογή Angular 2 με από νέο υλικό2-do . Θα πρέπει να περιμένετε λίγο, γιατί αφού δημιουργήσει τα απαραίτητα αρχεία, ξεκινά ένα repo Git και κάνει εγκατάσταση npm για να κατεβάσετε όλες τις απαραίτητες ενότητες node_modules / . Ρίξτε μια ματιά στο package.json και εξοικειωθείτε με τις ενότητες και τα σενάρια εκεί.

Έχετε πλέον δημιουργήσει μια νέα εφαρμογή Angular 2 που ακολουθεί τις επίσημες βέλτιστες πρακτικές.

Προσθήκη υλικού σχεδιασμού

Η προεπιλεγμένη εφαρμογή δεν γνωρίζει τίποτα για το σχεδιασμό υλικών (μια επίβλεψη είμαι σίγουρος), οπότε πρέπει να το προσθέσουμε μόνοι μας.

Υπάρχει μια λίστα με δημοσιευμένα πακέτα σχεδιασμού υλικών Angular 2 στο @ angular2-υλικό βιβλιοθήκη. Σε αυτό το παράδειγμα πρόκειται να χρησιμοποιήσουμε πυρήνας (απαιτείται για όλες τις εφαρμογές Angular Material 2), καθώς και κουμπί , κάρτα , πλαίσιο ελέγχου , εικόνισμα , εισαγωγή , λίστα και γραμμή εργαλείων :

npm install --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 packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}; });

Τώρα ήρθε η ώρα να φορτώσετε τη γραμματοσειρά εικονιδίου Material Design στο του src / index.html . Οποιαδήποτε γραμματοσειρά θα λειτουργήσει, αλλά χρησιμοποιούμε τα τυπικά εικονίδια σχεδίασης υλικών:

πώς να πλένετε βούρτσες λαδομπογιά

Δημιουργία διαλόγου 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', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']

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

Τώρα μπορούμε να αντικαταστήσουμε τον παραγόμενο κατασκευαστή στο dialog.component.ts με τον ακόλουθο κωδικό:

constructor() { this.okText = 'OK'; this.cancelText = 'Cancel'; } emitValue(value) { this.valueEmitted.emit(value); }

Εκτός από τη χρήση του @Εισαγωγή μεταβλητές μέσα μας Διαλογικό στοιχείο μέσα στο dialog.component.html πρότυπο, το είσοδος md μας επιτρέπει να δεχόμαστε πληροφορίες από τον χρήστη:

ο κουμπιά md επιτρέψτε στο χρήστη να κάνει κλικ στο 'OK', 'Ακύρωση' ή οτιδήποτε αποφασίσετε να επισημάνετε αυτά τα κουμπιά:

{{cancelText}} {{okText}}

Παρατηρήστε το κλειδί χειριστές συμβάντων, οι οποίοι φροντίζουν τα πράγματα όταν πατηθεί το πλήκτρο Enter ή Escape. Αυτοί οι χειριστές είναι πανομοιότυποι με το Κάντε κλικ χειριστές εκδηλώσεων για ακύρωση κειμένου και εντάξει κείμενο . Το Escape κάνει το ίδιο πράγμα με την ακύρωση (emitValue (null)) , και πατώντας Enter θα έχει το ίδιο αποτέλεσμα με το κλικ OK (emitValue (τιμή)) . Αυτό μας επιτρέπει να ζητάμε από τον χρήστη για ένα αξία μέσω ενός είσοδος md και λάβετε εκπεμπόμενη έξοδο.

Μπορούμε να δούμε παραδείγματα ορισμένων στοιχείων σχεδιασμού υλικών: κάρτα-md , κουμπί md , και ούτω καθεξής. Πρέπει επίσης να προσθέσουμε κάποιο CSS dialog.component.css για να επιτύχουμε τη διάταξη που επιθυμούμε - μπορείτε να δείτε τον πλήρη κώδικα στο συνοδευτικό repo GitHub.

Τώρα ας προσθέσουμε αυτό Διαλογικό στοιχείο προς την material2-do.component.html για να δείτε πώς φαίνεται:

Παρατηρήστε ότι έχουμε κυριολεκτικές χορδές για όλα τα @ Εισαγωγές . Αυτά απαιτούν από εμάς να χρησιμοποιούμε τόσο μεμονωμένα όσο και διπλά εισαγωγικά, διαφορετικά η Angular θα ερμήνευε το περιεχόμενο ως μεταβλητό όνομα στο Συστατικό πεδίο εφαρμογής.

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

Ας τροποποιήσουμε Υλικό2DoComponent . Πρέπει να εισαγάγουμε το DialogComponent και να το δηλώσουμε ως οδηγία, διαφορετικά Υλικό2DoComponent δεν θα είναι σε θέση να το αποδώσει. Θα προσθέσουμε επίσης τη λειτουργία καταγραφής:

log(text) { console.log(text); }

Ας ρίξουμε μια ματιά στην χειροτεχνία μας. Μπορείτε να προβάλλετε την εφαρμογή (η προεπιλεγμένη θύρα είναι 4200) εκτελώντας έναρξη λειτουργίας σεναρίου npm , το οποίο με τη σειρά του τρέχει του διακομιστή . Εάν ανοίξετε την κονσόλα, μπορείτε να δείτε τι καταγράφεται: τα περιεχόμενα της εισόδου εκπέμπονται όταν κάνετε κλικ στο 'Ναι' και μηδενικό εκπέμπεται όταν κάνετε κλικ στο «Όχι».

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

Δημιουργήστε την κύρια εφαρμογή

Θα χρησιμοποιήσουμε τα ακόλουθα MD Components για την κύρια εφαρμογή: γραμμή εργαλείων , λίστα , λίστα-είδος , πλαίσιο ελέγχου , κουμπί , εικόνισμα , εικονίδιο-μητρώο και εξαρτάται από αυτό, HTTP_PROVIDER , από τη βιβλιοθήκη Angular HTTP. Αυτά πρέπει λοιπόν να προστεθούν στο τμήμα εισαγωγής του Υλικό2DoComponent .

Για άλλη μια φορά, για να μπορέσουμε να αποδώσουμε αυτά τα στοιχεία, πρέπει να τα συμπεριλάβουμε στο @Συστατικά μεταδεδομένα οδηγίες συστοιχία μαζί με Διαλογικό στοιχείο , το οποίο μόλις προσθέσαμε:

directives: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent],

Για να αποκτήσετε πρόσβαση στο MdIconRegistry , πρέπει να το εγχύσουμε, μαζί με HTTP_PROVIDERS , μέσω του @Συστατικά μεταδεδομένα πάροχοι πίνακας:

providers: [MdIconRegistry, HTTP_PROVIDERS],

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

Ρυθμίζουμε τις προεπιλεγμένες μεταβλητές για μια νέα εργασία ή εάν επεξεργαζόμαστε μια εργασία, αντίθετα τις αλλάζουμε. Στη συνέχεια δείχνουμε το Διαλογικό στοιχείο ρυθμίζοντας το showDialog μεταβλητή σε αληθής :

todoDialog(todo = null) { this.okButtonText = 'Create task'; this.fieldValue = ''; this.editingTodo = todo; if (todo) { this.fieldValue = todo.title; this.okButtonText = 'Edit task'; } this.showDialog = true; }

ο updateTodo Η συνάρτηση καλείται όταν θέλουμε να την κλείσουμε. Οι άλλες λειτουργίες ( editTodo , addTodo , hideDialog ) είναι βοηθητικές μέθοδοι για updateTodo .

updateTodo(title) { if (title) { title = title.trim(); if (this.editingTodo) { this.editTodo(title); } else { this.addTodo(title); } } this.hideDialog(); }

Σε material2-do.component.html δώσαμε στην αίτησή μας ένα γραμμή εργαλείων md όπου έχουμε βάλει τον τίτλο, και ένα md-εικονίδιο που ονομάζεται Προσθήκη (που μοιάζει με σύμβολο συν) για το κουμπί αιωρούμενης ενέργειας (FAB), το οποίο μας επιτρέπει να δημιουργήσουμε μια νέα εργασία:

add

Χρησιμοποιούμε md-card-περιεχόμενο να κρατήσει ένα λίστα-md και ένα * ngΓια για να επαναλάβουμε και να εμφανίσουμε το δικό μας todoList πίνακας ως md-list-αντικείμενα :

πλαίσιο ελέγχου md μας δίνει τη δυνατότητα να σημειώσουμε στοιχεία στη λίστα μας. Και έχουμε δύο md-mini-fab κουμπιά που μπορούμε να χρησιμοποιήσουμε για να διαγράψουμε και να επεξεργαστούμε την εργασία μας: md-icons delete_forever και mode_edit :

delete_forever mode_edit

Με λίγο CSS, αυτά παραμένουν κρυμμένα μέχρι να μετακινηθείτε (ή κάντε κλικ). Μπορείτε να δείτε τον κωδικό στο repo.

Πηγαίνοντας μπροστά

Καθώς το Angular Material 2 βρίσκεται ακόμα σε άλφα, λείπουν ορισμένα πράγματα - συγκεκριμένα, το εφέ κυματισμού του κουμπιού MD. Παρόλο που μπορεί να υπάρξουν αλλαγές στο API μπροστά, λειτουργεί πολύ. Επίσης ανταποκρίνεται στον ισχυρισμό ότι έχει ένα απλό API που δεν μπερδεύει τους προγραμματιστές και είναι εύκολο να αξιοποιήσει τη δημιουργία εξαιρετικών εφαρμογών.

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

Σχετικά Άρθρα: