Construiți o aplicație de proiectare a materialelor cu unghiular 2

Materialul unghiular este un cadru component UI care implementează specificația Google de proiectare a materialelor pentru unghiul 2 - noua implementare mai rapidă a unghiulară, scrisă în TipsCript. Deși încă în alfa, materialul unghiular oferă deja un set de componente UI reutilizabile și accesibile pe baza designului materialului.

Unghiul 2 este conceput pentru a fi utilizat pe toate platformele (Web, Mobile și desktop) și are multe tehnologii noi asociate cu acesta. La nivel JavaScript avem sintaxa suplimentară a ECMAScript 2015 (ES6), tipărirea și interfața de la TipCript, împreună cu decoratorii din API-ul de reflecție metadate. Utilizează observabile din biblioteca de extensii reactive pentru a gestiona secvențele evenimentelor într-un mod de programare funcțional. Utilizează zone pentru a încapsula și intercepta activitatea asincronă pentru a furniza o formă de depozitare locală a firului, permițând unghiular să răspundă automat la modificările de date ale evenimentelor asincrone pentru a menține legăturile de date. În cele din urmă, încărcarea modulului este manipulată de Systems.

În acest tutorial vom folosi unghiular 2 pentru a crea o aplicație simplă de a face cu unele elemente de design de material semnătură. Obțineți fișierele sursă aici .

Obțineți configurați

Configurarea mediului inițial poate fi dificilă. Este o unghiular2-semințe disponibil, precum și un Angular2-Starter . Cu toate acestea, există ceva chiar mai bun: cu Unghiul-cli. Puteți configura proiectul unghiular 2 cu o singură comandă.

Nu numai că va avea grijă de configurarea pentru toate tehnologiile pe care le-am menționat în ultima secțiune (prin nod și npm), va adăuga, de asemenea, în schele pentru testarea unității de iasomie, testarea terminală a protractorului, plus testarea TSLint și CodeLyzer Codul static Analiza tipului unghiular 2. Deși nu trebuie să utilizați toate acestea, cu siguranță aveți. Este atât de simplu de utilizat, vă veți întreba cum ați ajuns vreodată fără ea.

CLI unghiulară este disponibil ca pachet NPM, deci va trebui să instalați nod și npm la nivel global pe aparatul dvs. utilizând npm install -g angular-cli . Acum creați o nouă aplicație unghiulară 2 cu ng material nou2-do . Va trebui să așteptați un pic, pentru că după ce generează fișierele necesare, acesta inițializează o repo git și face un instalarea npm. Pentru a descărca toate modulele necesare în node_module / . Aruncați o privire la pachet.json. și să vă familiarizați cu modulele și scripturile de acolo.

Ați creat acum o nouă aplicație unghiulară 2 care urmează cele mai bune practici oficiale.

Adăugați design de materiale

Aplicația implicită nu cunoaște nimic despre designul materialului (o supraveghere sunt sigură), așa că trebuie să-i adăugăm noi înșine.

Există o listă cu pachetele de design unghiular 2 publicate în @ Angular2-material bibliotecă. În acest exemplu, vom folosi miez (necesar pentru toate aplicațiile din materialul unghiular), precum și buton , card , Caseta de bifat , pictograma , intrare , listă și Bara de instrumente :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Pentru pachetul de vânzări de lucru, trebuie să adăugăm @ Angular2-Material / ** / * la gama de Vendornpmfiles. în Angular-CLI-buy.js . De asemenea, trebuie să adăugăm calea către @ Angular2-material la. Hărți obiect:

 const hartă: oricare = {
  '@ unghiular2-material ":" Vendor / @ unghiular2-material "
}; 

Fie ca Systems să știe cum să proceseze module noi, indicând fișierele principale ale fiecărui pachet:

 CONST Pachete: oricare = {};

// pune numele oricare dintre componentele dvs. materiale aici
CONST Materialpkgs: șir [] = ["Core", "buton", "card", "caseta de selectare",
"pictogramă", "intrare", "listă", "bara de instrumente"];

materialpkgs.forech ((pkg) = & gt; {
  Pachete [`@ unghiular2-material / $ {pkg}`] = {Principal: `$ {pkg }js`};
}); 

Acum este timpul să încărcați fontul pictogramei de proiectare a materialului în de src / index.html. . Orice font va funcționa, dar folosim icoanele standard de proiectare a materialelor:

 & Link Href = "https://fonts.googleapis.com/icon?family=Material+)" Rel = "Stylesheet" & GT; 

Creați un dialog MD

Acum putem lucra cu designul materialului în aplicația noastră de la-do. Unul dintre componentele care lipsesc în prezent din designul unghiular 2 este un prompt sau de dialog, deci pentru prima noastră sarcină pe care o vom face!

Să creăm o nouă componentă utilizând un card de design material, o bară de instrumente, o intrare și câteva butoane. În Src / App. dosarul repo, tastați NG generează dialog Component . Aceasta generează un nou DialogComponent în Src / App / Dialog , și adaugă un butoi SYSTEM-CONFIG.TS. Deci, sistemele știe cum să o încarce.

Dacă te uiți la generat Dialog.Component.ts.ts. Fișier, veți vedea prima linie este: Import {component, oninit} din "@ unghiular / nucleu"; . Componenta este una dintre blocurile principale de construcție a unghiulare și Oninit. este una dintre interfețele pe care le implementează. Cu toate acestea, pentru a avea acces la comunicarea între componentele imbricate, precum și componentele de proiectare a materialelor menționate mai sus, trebuie să importăm contribuția, Ieșire și Eventemitter. din @ unghiular / nucleu; și MDcard. , Mdinput. , Mdtoolbar. și Mdbutton. de la modulele lor corespunzătoare din @ Angular2- material bibliotecă.

Pentru a face aceste componente materiale, trebuie să injectăm directivele noastre DialogComponent cere. Vom adăuga următoarele directive la @Componente Metadate:

 Templateurl: "Dialog.Component.html",
directive: [MDCARD, MDTOOLBAR, MDINPUT, MDBUTTON],
Styleurls: ['dialog.component.css'] 

Apoi declarăm un număr de @Intrare Variabile ( Oktext. , Anularext. și așa mai departe) care ne permit să definim conținutul dialogului. De asemenea, trebuie să adăugăm una @Output. Emițătorul care ne permite să declanșăm o funcție cu o valoare în componenta părintească atunci când dialogul este închis.

Acum putem înlocui constructorul generat în Dialog.Component.ts.ts. Cu următorul cod:

 Constructor () {
 acest.oktext = 'ok';
 acest.canceltext = 'anula';
}

EmitValue (valoare) {
 acest.valuedited.emit (valoare);
} 

Precum și utilizarea @Intrare Variabile în interiorul nostru DialogComponent în cadrul dialog.component.html. Șablonul ,. MD-INPUT. ne permite să acceptăm contribuția de la utilizator:

 Clasa de intrare MD = "Lățime întreagă" [Placeholder] = "Placeholder"
        [(ngmodel)] = "valoare" #dialoginput
        (KeyUp.enter) = "EmitValue (valoare)"
        (KeyUp.escape) = "EmitValue (null)" & Lt; / md-input & gt; 

MD-butoane Permiteți utilizatorului să facă clic pe "OK", "Anulare" sau indiferent de ce decideți să etichetați aceste butoane:

 & butonul MD-buton (faceți clic pe) = "EmitValue (null)" Culoare = "primar" & GT;
  {{AnulareXt}}}
& lt; / buton & gt;
și butonul MD-Rid-Button (faceți clic pe) = "EmitValue (valoare)" culoare = "primar" & GT;
  {{oktext}}
& lt; / buton & gt; 

Observați. Keyup Stivuitoare de evenimente, care au grijă de lucruri când este apăsată tasta Enter sau Escation. Acești agenți sunt identici cu clic Stivuitoare de evenimente pentru Anularext. și Oktext. . Escape face același lucru ca anulați (Emitvalue (null)) , și lovirea Enter va avea același rezultat ca și clicul (Emitvalue (valoare)) . Acest lucru ne permite să solicităm utilizatorului un valoare prin intermediul unui an MD-INPUT. , și primiți ieșirea emisă.

Putem vedea exemple de mai multe componente de proiectare a materialelor: MD-card. , MD-buton. , și așa mai departe. De asemenea, trebuie să adăugăm niște CSS în dialog.component.css. Pentru a atinge aspectul pe care îl dorim - puteți vizualiza codul complet în repo-ul însoțitor.

Acum, să adăugăm asta DialogComponent la material2-do.component.html. Pentru a vedea cum arată:

 & lt; App-Dialog [Titlu] = "Dialog Prompt" "
  [Șablon] = "" Aceasta este noua noastră componentă bazată pe materiale: "
  [Placeholder] = "Introduceți textul aici"
  [Oktext] = "'da'"
  [CancelText] = "" Nu "
  [valoare] = "" Text de pornire ""
  (valoare valoroasă) = "jurnal ($ eveniment)"
  [showprompt] = "adevărat" & gt;
& lt; / App-dialog & gt; 

Observați că avem șiruri literale pentru toate @Inputs. . Acestea necesită noi să folosim atât citatele unice, cât și duble, altfel unghiular ar interpreta conținutul ca nume variabil în Componenta Domeniul de aplicare.

De asemenea, avem cel emis @Output. . Acest lucru face ca dialogul să fie simplu și extrem de configurabil. Majoritatea intrărilor ar fi dezmembrat la șirurile goale dacă sunt omise.

Să modificăm Material2docomponent. . Trebuie să importăm dialogComponenta și să o declarăm ca o directivă, altfel Material2docomponent. nu va putea să o facă. De asemenea, vom adăuga funcția de jurnal:

 Log (text) {
   consola.log (text);
 } 

Să aruncăm o privire la lucrarea noastră. Puteți servi aplicația (portul implicit este de 4200) prin rularea NPM Run-Script Start , care, la rândul său, rulează NG Server. . Dacă deschideți consola, puteți vedea ce este înregistrat: Conținutul intrării este emis atunci când faceți clic pe "Da" și nul este emisă atunci când faceți clic pe "Nu".

Suntem gata să folosim acest nou DialogComponent pentru a crea aplicația noastră de to-do.

Creați aplicația principală

Vom folosi următoarele componente MD pentru aplicația principală: Bara de instrumente , listă , Listă-item , Caseta de bifat , buton , pictograma , Icon-registry. , și dependente, Http_provider. , din biblioteca HTTP unghiulară. Astfel încât acestea trebuie adăugate la secțiunea de import a Material2docomponent. .

Încă o dată, pentru a putea face aceste componente, trebuie să le includem în @Componente Metadate. directive Array împreună cu DialogComponent , pe care tocmai am adăugat:

 directive: [MDCard, MDToolbar, MDList, MDLISTITEM, MDCHECKBOX, MDBUTTON, MDICON, DIALOGCOMPONENT], 

Pentru a avea acces la Mdiconieri , trebuie să-l injectăm, împreună cu Http_providerss. , prin intermediul @Componente Metadate. Furnizori Array:

 Furnizori: [MDICONRONGISTORIE, HTTP_PROVIDERS], 

Acum ne schimbăm DialogComponent , adăugând suficientă logică pentru o aplicație simplă de a face. TODODIALOG. este chemat să ne deschidă dialogul, fie cu sarcina de a edita ( a face ) Or. nul Dacă creăm una nouă.

Am stabilit variabilele implicite pentru o nouă sarcină sau dacă edităm o sarcină, în schimb, le schimbăm în consecință. Apoi arătăm DialogComponent Prin stabilirea mesajului Showdialog. variabilă la Adevărat :

 TODODIALOG (TODO = NULL) {
    the.okbuttontext = "Crearea sarcinii";
    acest.fieldvalue = '';
    acest.editingtodo = todo;
    dacă (todo) {
      this.fieldvalue = todo.title;
      the.okbuttontext = 'edit sarcina ";
    }
    acest lucru.showdialog = adevărat;
  } 

UpdateTodo. funcția este numită atunci când dorim să o închidem. Celelalte funcții ( Editodo. , addtodo. , Hidedialog. ) sunt metode de ajutor pentru UpdateTodo. .

 UpdateToDo (titlu) {
    dacă (titlu) {
      Titlu = Titlu.Trim ();
      dacă (acest.editingtodo) {
        acest.edittodo (titlu);
      } altfel {
        acest.addodo (titlu);
      }
    }
    acest.Hidedialog ();
  }

În material2-do.component.html. Am dat cererea noastră un MD-Toolbar. unde am pus titlul și un MD-icon. numit adăuga (care arată ca un semn plus) pentru butonul de acțiune plutitor (FAB), care ne permite să creăm o nouă sarcină:

 Buton MD-Fab Class = "Fab-add" (faceți clic) = "TODODIALOG ()" & GT;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / buton & gt; 

Folosim MD-card-conținut pentru a ține un an Lista MD. si un * ngfor. pentru a itera și a afișa, noi TODOLIST. Array ca. MD-list-elemente :

 și list-list-element * NGFOR = "Lăsați Todolist; Fie Index = Index" & GT; 

MD-Checkbox. ne permite să bifați articolele din lista noastră. Și avem două md-mini-fab Butoane pe care le putem folosi pentru a șterge și edita sarcina noastră: MD-ICONS DELETE_Forever și mode_edit :

& Lt; Buton MD-Mini-Fab (faceți clic) = "Eliminați (index)" culoare = "primar" & gt;
  & lt; md-icon & gt; Delete_Forever & Lt; / MD-icon & GT;
& lt; / buton & gt;

& buton MD-Mini-Fab (faceți clic) = "TODODIALOG (TODO)" Culoare = "primar"
        [Dezactivat] = "TODO COMPLETED" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / buton & gt; 

Cu un mic CSS, acestea rămân ascunse până când vă răsturnați (sau faceți clic pe). Puteți vedea codul în repo.

Mergand inainte

Deoarece materialul unghiular 2 este încă în alfa, există unele lucruri care lipsesc - în special, butonul de semnare a butonului MD. Deși s-ar putea să se facă schimbări de rupere a API înainte, este foarte funcțională. De asemenea, trăiește până la cererea de a avea un API simplu care nu confundă dezvoltatorii și este ușor de îndatorat pentru crearea unor aplicații minunate.

Acest articol a fost publicat inițial în numărul 284 de net, cea mai bună revistă din lume pentru designeri web și dezvoltatori. Abonați-vă aici .

Articole similare:

• Ce este nou în unghiul 4?
• Cum de a construi un site web complet în unghiular
• Construiți un tablou de bord de date cu Angularjs