Bygg en materialdesignapp med vinkel 2

Vinkelmaterial är en UI-komponentram som implementerar Googles materialdesignspecifikation för vinkel 2 - det nya, snabbare implementeringen av vinkel, skrivet i typsnitt. Även om det fortfarande finns i alfa, ger vinkelmaterial redan en uppsättning återanvändbara och tillgängliga UI-komponenter baserade på materialdesign.

Vinkel 2 själv är konstruerad för användning över alla plattformar (webb, mobil och skrivbord) och har många nya tekniker i samband med den. På Javascript-nivån har vi den extra syntaxen för ECMAScript 2015 (ES6), skrivnings- och gränssnittsstöd från Typescript, tillsammans med dekoratörer från metadata reflektions API. Den använder observerbara ämnen från det reaktiva förlängningsbiblioteket för att hantera händelsesekvenser på ett funktionellt programmeringsväg. Den använder zoner för att inkapsla och avlyssna asynkron aktivitet för att ge en form av tråd-lokal lagring, vilket gör att vinkel kan automatiskt svara på dataändringar i asynkrona händelser för att upprätthålla databindningar. Slutligen hanteras modulbelastningen av SystemJs.

I den här handledningen kommer vi att använda vinkel 2 för att skapa en enkel att göra app med några signaturmaterialdesignelement. Få källfilerna här .

Sätta upp

Att ställa in den ursprungliga miljön kan vara svårt. Där är en angular2-frö tillgänglig, liksom en angular2-starter . Det finns dock något ännu bättre: med vinkelklubb Du kan konfigurera ditt Angular 2-projekt med ett enda kommando.

Det kommer inte bara att ta hand om installationen för all den teknik som jag nämnde i det sista avsnittet (via nod och npm), det kommer också att lägga till i byggnadsställningar för jasminenhetstestning, protractor end-to-end-testning, plus TSLint-testning och Kodelyzer statisk kodanalys av vinkel 2 typsnitt. Även om du inte behöver använda alla dessa, borde du definitivt. Det är så enkelt att använda, du kommer att undra hur du någonsin kom med utan det.

Angular CLI är tillgänglig som ett NPM-paket, så du måste installera nod och npm globalt på din maskin med npm installera -g vinkel-cli . Skapa nu en ny vinkel 2 app med ng ny material2-do . Du måste vänta lite, för efter det att det genererar de nödvändiga filerna, initierar den en git repo och gör en npm installera För att ladda ner alla nödvändiga moduler till Node_modules / . Ta en titt på paket.json och bli bekant med modulerna och skript där.

Du har nu skapat en ny vinkel 2-program som följer de officiella bästa praxisen.

Lägg till materialdesign

Standard app vet ingenting om materialdesign (ett tillsyn jag är säker), så vi måste lägga till det själva.

Det finns en lista över publicerade vinkel 2 materialdesignpaket i @ Angular2-material bibliotek. I det här exemplet kommer vi att använda kärna (krävs för alla vinkelmaterial 2 apps), såväl som knapp , kort , kryssruta , ikon , inmatning , lista och verktygsfält :

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

För att leverantörsbunten ska fungera måste vi lägga till @ Angular2-material / ** / * till utbudet av Vendornpmfiles i vinkel-cli-build.js . Vi måste också lägga till vägen till @ Angular2-material till Kartor objekt:

 CONST MAP: Any = {
  '@ Angular2-material': 'leverantör / @ angular2-material'
}; 

Låt SystemJs veta hur man behandlar nya moduler genom att peka på huvudfilerna i var och en av paketen:

 CONST-paket: Alla = {};

// Lägg namnen på någon av dina materialkomponenter här
const materialpkgs: String [] = ['Core', 'knapp', 'Card', 'Checkbox',
'ikon', 'Input', 'List', 'Toolbar'];

materialpkgs.foreach ((pkg) = & gt; {
  Paket [`@ Angular2-material / $ {pkg}`] = {Main: `$ {pkg} .js`};
}); 

Nu är det dags att ladda ikonen för materialdesignikonet i av src / index.html . Alla teckensnitt kommer att fungera, men vi använder standardmaterialets designikoner:

 & lt; länk href = "https://fonts.googleapis.com/icon?family=material +ikoner" rel = "stylesheet" & gt; 

Skapa en MD-dialogruta

Vi kan nu arbeta med materialdesign i vår to-do-app. En av de komponenter som saknas från vinkel 2 materialdesign är en snabb eller dialog, så för vår första uppgift kommer vi att göra en!

Låt oss skapa en ny komponent med ett materialdesignkort, en verktygsfält, en ingång och ett par knappar. I src / app mapp av din repo, typ ng generera komponentdialogrutan . Detta genererar en ny Dialogkomponent i SRC / APP / DIALOG och lägger till en fat till System-config.ts Så Systemjs vet hur man laddar den.

Om du tittar på den genererade Dialog.component.ts Fil, du kommer att se den första raden är: Importera {COMPONENT, ONINIT} från '@ vinkel / kärna'; . Komponent är en av de viktigaste byggstenarna av vinkeln, och Försätta är en av de gränssnitt som den implementerar. För att få tillgång till kommunikation mellan kapslade komponenter, liksom de ovan nämnda materialdesignkomponenterna, måste vi importera inmatning, Produktion och Evenemangsmitter från @ vinkel / kärna; och Mdcard , Mdinput , Mdtoolbar och Mdbutton från deras motsvarande moduler i @ Angular2-material bibliotek.

För att göra dessa materialkomponenter måste vi injicera direktiven Dialogkomponent kräver. Vi lägger till följande direktiv till @Komponenter Metadata:

 Templateurl: 'Dialog.component.html',
Direktiv: [MDCARD, MDTOOLBAR, MDINPUP, MDBUTTON]
StyleUls: ['Dialog.component.css'] 

Vi förklarar sedan ett antal @Inmatning variabler ( oktext , canceltext och så vidare) som tillåter oss att definiera innehållet i dialogrutan. Vi måste också lägga till en @Produktion Emitter som gör det möjligt för oss att utlösa en funktion med ett värde i moderkomponenten när dialogrutan är stängd.

Nu kan vi ersätta den genererade konstruktören i Dialog.component.ts med följande kod:

 konstruktör () {
 this.oktext = 'OK';
 this.cancelText = 'Avbryt';
}

emitvalue (värde) {
 detta.ValueMitted.Emit (värde);
} 

Såväl som att använda @Inmatning variabler inuti vår Dialogkomponent inom dialog.component.html mall, md-ingång Gör det möjligt för oss att acceptera inmatning från användaren:

 & lt; md-ingångsklass = "fullbredd" [platshållare] = "platshållare"
        [(ngmodel)] = "värde" #dialoginput
        (Keyup.Enter) = "Emitvalue (värde)"
        (Keyup.Ecape) = "Emitvalue (NULL)" & GT; / LT; ​​/ MD-Input & GT; 

De MD-knappar Låt användaren klicka på "OK", "Avbryt" eller vad du än bestämmer dig för att märka dessa knappar:

 & lt; Knapp MD-knapp (klicka) = "Emitvalue (null)" Color = "Primär" & GT;
  {{canceltext}}
& lt; / knapp & gt;
& LT; KNAPP MD-RAISED-KNAPP (Click) = "Emitvalue (Value)" Color = "Primär" & GT;
  {{oktext}}
& lt; / knapp & gt; 

Märka nyckel Händelsehanterare, som tar hand om saker när Ange eller Escape-tangenten trycks in. Dessa hanterare är identiska med klick Händelsehanterare för canceltext och oktext . Escape gör samma sak som avbryt (Emitvalue (null)) , och träffar Enter kommer att ha samma resultat som att klicka på OK (Emitvalue (värde)) . Detta gör det möjligt för oss att uppmana användaren för a värde via en md-ingång och ta emot Emitted Output.

Vi kan se exempel på ett antal materialdesignkomponenter: md-kort , MD-knapp , och så vidare. Vi måste också lägga till några CSS i Dialog.component.css För att uppnå den layout vi önskar - kan du se hela koden i den medföljande GitHub Repo.

Låt oss nu lägga till det här Dialogkomponent till material2-do.component.html För att se hur det ser ut:

 & lt; app-dialog [title] = "'Dialog prompt'"
  [Template] = "'Detta är vår nya materialdesignbaserad komponent:'"
  [Placeholder] = "" Skriv in text här ""
  [OKTEXT] = "" Ja ""
  [CANCELTEXT] = "'NO'"
  [Värde] = "" Starttext ""
  (ValueMemed) = "Log ($ -händelse)"
  [ShowPrompt] = "True" & GT;
& LT; / App-Dialog & GT; 

Märker vi har bokstavliga strängar för alla @Inputs . Dessa kräver att vi använder både enkla och dubbla citat, annars skulle vinkeln tolka innehållet som ett variabelt namn i Komponent omfattning.

Vi har också den som emitteras @Produktion . Detta gör dialogrutan enkel och extremt konfigurerbar. De flesta ingångarna skulle ha försummat att tömma strängar om de utelämnas.

Låt oss ändra Material2dokomponent . Vi måste importera dialogrutan och förklara det som ett direktiv, annars Material2dokomponent kommer inte att kunna göra det. Vi lägger också till loggenfunktionen:

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

Låt oss ta en titt på vårt handarbete. Du kan servera appen (standardporten är 4200) genom att springa NPM Run-Script Start , som i sin tur körs ng server . Om du öppnar konsolen kan du se vad som är loggat: Inmatningsinnehållet släpps ut när du klickar på "Ja" och null emitteras när du klickar på "nej".

Vi är nu redo att använda den här nya Dialogkomponent för att skapa vår to-do-app.

Skapa huvudappen

Vi ska använda följande MD-komponenter för huvudappen: verktygsfält , lista , listobjekt , kryssruta , knapp , ikon , ikonregister , och dess beroende, Http_provider , från det vinklade HTTP-biblioteket. Så måste dessa läggas till i importavsnittet av Material2dokomponent .

Återigen, för att kunna göra dessa komponenter, måste vi inkludera dem i @Komponenter metadata direktiv array tillsammans med Dialogkomponent , som vi bara lagt till:

 Direktiv: [MDCARD, MDTOOLBAR, MDLIST, MDLISTITIM, MDCHECKBOX, MDBUTTON, MDICON, DIALOGCOMPONENT], 

För att få tillgång till Mdiconregistry , vi måste injicera det, tillsammans med Http_providers , via @Komponenter metadata leverantörer array:

 Leverantörer: [Mdiconregistry, http_providers], 

Nu utnyttjar vi vår Dialogkomponent , lägga till i tillräckligt med logik för en enkel att göra-applikation. De tododialog kallas för att öppna vår dialog, antingen med uppgiften att redigera ( att göra ) eller null Om vi ​​skapar en ny.

Vi ställer in standardvariablerna för en ny uppgift, eller om vi redigerar en uppgift istället ändrar vi dem. Vi visar sedan Dialogkomponent Genom att ställa in showdialog variabel till Sann :

 TODODIALOG (TODO = NULL) {
    this.okbuttontext = 'Skapa uppgift';
    This.FieldValue = '';
    This.EditingTodo = TODO;
    om (todo) {
      this.fieldValue = todo.title;
      this.okbuttontext = 'Redigera uppgift';
    }
    this.showdialog = sant;
  } 

De updatetodo Funktionen kallas när vi vill stänga den. De andra funktionerna ( edittodo , addtodo , hassialog ) är hjälparmetoder för updatetodo .

 UpdateTetodo (titel) {
    Om (titel) {
      Titel = Titel.Trim ();
      IF (This.EditingTodo) {
        this.edittodo (titel);
      } annars {
        this.addtodo (titel);
      }
    }
    this.hedialog ();
  }

I material2-do.component.html Vi har gett vår ansökan en MD-verktygsfält där vi har satt titeln, och en md-ikon kallad Lägg till (som ser ut som ett plustecken) för vår flytande åtgärdsknapp (Fab), vilket gör det möjligt för oss att skapa en ny uppgift:

 & lt; knapp md-fab class = "fab-add" (klicka) = "tododialog ()" & gt;
      & lt; md-icon & gt; Lägg till och lt; / md-icon & gt;
    & lt; / knapp & gt; 

Vi använder md-kort-innehåll att hålla en md-lista och en * ngfor att iterera igenom, och visa, vår att göra lista array som MD-lista-objekt :

 & lt; md-list-item * ngfor = "Låt tdo av todolist; låt index = index" & gt; 

MD-kryssrutan Gör det möjligt för oss att markera objekt på vår lista. Och vi har två md-mini-fab Knappar Vi kan använda för att radera och redigera vår uppgift: MD-ikoner DELETE_FOREVER och mode_edit :

& lt; knapp md-mini-fab (klicka) = "Ta bort (index)" färg = "Primär" & GT;
  & lt; MD-icon & GT; DELETE_FOREVER & LT; / MD-icon & GT;
& lt; / knapp & gt;

& lt; knapp MD-mini-Fab (Click) = "TODODIALOG (TODO)" COLOR = "Primary"
        [Inaktiverad] = "TODO.COMPLETED" & GT;
  & lt; MD-icon & GT; MODE_EDIT & LT; / MD-icon & GT;
& lt; / knapp & gt; 

Med lite CSS är dessa gömda tills du rullar upp (eller klicka). Du kan se koden i repo.

Går framåt

När vinkelmaterialet 2 fortfarande är i alfa, finns det några saker som saknas - i synnerhet signaturen MD-knappen Ripple Effect. Medan det kan bryta förändringar i API framåt, är det väldigt mycket fungerande. Det lever också upp till påståendet att ha en enkel API som inte förvirrar utvecklare, och är lätt att utnyttja för att skapa snygga applikationer.

Denna artikel publicerades ursprungligen i utgåva 284 av Net, världens bästsäljande tidning för webbdesigners och utvecklare. Prenumerera här .

Relaterade artiklar:

• Vad är nytt i vinkel 4?
• Hur man bygger en fullständig webbplats i vinkel
• Bygg en datainstrumentbräda med angularjs