Épít egy anyagi design alkalmazást szögletes 2

Szög anyag egy UI komponens keretrendszer, amely megvalósítja a Google Material Design specifikáció szögletes 2 - az új, gyorsabb végrehajtása Szög írt géppel. Bár még az alfa, a szögletes anyag már olyan újrafelhasználható és hozzáférhető UI komponenseket biztosít az anyagi tervezés alapján.

A 2 szögletes 2 önmagában az összes platformon (web, mobil és asztali) használatra készült, és számos új technológiával rendelkezik vele. A JavaScript szinten van a további szintaxisát ECMAScript 2015 (ES6), gépelés és interfész támogatása géppel együtt lakberendezők a metaadat Reflection API. A reaktív kiterjesztési könyvtárban megfigyelő megfigyelőket használ az események szekvenciáinak kezelésére funkcionális programozási módban. A zónákat az aszinkron aktivitás beágyazására és az aszinkron aktivitás leképezésére használja, hogy a szál- helyi tárolás formájában legyen, lehetővé téve a szögletes, hogy automatikusan válaszoljon az aszinkron események adatváltozására az adatkötések fenntartásához. Végül a modul terhelését a Systemjs kezeli.

Ebben a bemutatóban szögletes 2-et használunk, hogy egy egyszerű to-do-alkalmazást hozzon létre néhány aláírási anyagtervezési elemekkel. Itt kapja meg a forrásfájlokat .

Felállít

A kezdeti környezet beállítása nehéz lehet. Van egy szögletes2-mag elérhető, valamint egy szögletes starter . Azonban van valami még jobb: szögletes-cli A szögletes 2 projektet egyetlen parancs segítségével konfigurálhatja.

Nem csak, hogy vigyázzon a beállítás az összes technológiák már említettem az utolsó rész (via Node NPM), akkor azt is hozzá állványzat Jasmine egység tesztelése, szögmérő end-to-end tesztelés, plusz TSLint tesztelés, és Codelyzer statikus kódelemzés szögletes 2 típusú. Bár nem kell mindezeket használni, biztosan kell. Olyan egyszerűen használható, akkor csodálkozol, hogy valaha is lettél.

A szögletes CLI NPM csomagként érhető el, így a csomópontot és az NPM globálisan kell telepítenie a gépen npm telepítés -g szögletes-cli . Most hozzon létre egy új szögletes 2 alkalmazást ng új anyag2-do . Meg kell várnia egy kicsit, mert miután létrehozza a szükséges fájlokat, inicializálja a git repo-t, és nem NPM telepítés A szükséges modulok letöltéséhez Node_modules / . Nézd meg a csomag.json és ismerkedjen meg a modulokkal és a szkriptekkel.

Most létrehozott egy új, szögletes 2 alkalmazást, amely követi a hivatalos legjobb gyakorlatokat.

Anyagtervezés hozzáadása

Az alapértelmezett alkalmazás nem ismer semmit az anyagtervezésről (Biztos vagyok benne, hogy biztos vagyok benne), így hozzá kell adnunk magunkat.

Van egy listát a közzétett szögletes 2 anyagi tervezési csomagokról a @ szögletes2-anyag könyvtár. Ebben a példában fogjuk használni mag (minden szögletes anyaghoz 2 alkalmazáshoz szükséges), valamint gomb , kártya , Jelölőnégyzet , ikon , bemenet , lista és eszköztár :

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

Az eladó köteghez dolgozni, hozzá kell adnunk @ szögletes2-anyag / ** / * a tömbhöz vendornpmfiles ban ben szögletes-cli-build.js . Azt is hozzá kell adnunk az utat @ szögletes2-anyag hoz térképek tárgy:

 CONST MAP: Bármely = {
  "@ szögletes2-anyag": "Vendor / @ szögletes2-anyag"
}; 

Hagyja, hogy a Systemjs tudja, hogyan kell feldolgozni az új modulokat az egyes csomagok fő fájljainak rámutatásával:

 CONST csomagok: bármilyen = {};

// itt az anyagi összetevők nevét
CONSTRALYPKGS: STRING [] = ['Core', 'Button', 'Card', 'Checkbox',
'Icon', 'Input', 'lista', 'toolbar'];

materialpkgs.foreach ((pkg) = & gt; {
  Csomagok [`@ szögletes2-anyag / $ {pkg}`] = {fő: `$ {pkg} .js`};
}); 

Most itt az ideje, hogy betöltse az anyag tervezési ikon betűtípusa a nak,-nek src / index.html . Bármilyen betűtípus fog működni, de a szabványos anyagi tervezési ikonokat használjuk:

 & lt; link href = "https://fonts.googleapis.com/icon?family=material+icons" rel = "stíluslap" & gt; 

Hozzon létre egy MD párbeszédablakot

Most az anyagtervezéssel dolgozhatunk a te-do alkalmazásunkban. A szögletes 2 anyagtervezésből jelenleg hiányzó komponensek egyike a gyors vagy párbeszéd, így az első feladatunkért fogunk csinálni!

Hozzunk létre egy új összetevőt egy anyagi design kártyával, egy eszköztárral, egy bemenetet és pár gomb segítségével. Ban,-ben SRC / APP A repo mappája, írja be NG Komponens párbeszédablak létrehozása . Ez újat hoz létre Dialogcomponens ban ben SRC / APP / párbeszédablak , és hozzáadja a hordót rendszer-config.ts Tehát a Systemjs tudja, hogyan kell betölteni.

Ha megnézed a generált dialog.proent.ts fájl, akkor az első sor: Import {alkatrész, oninit} tól től '@ szögletes / mag'; . Összetevő az egyik fő építőelem szöge, és Oninit az egyik interfész, amely végrehajtja. Annak érdekében azonban, hogy hozzáférjenek a beágyazott komponensek közötti kommunikációhoz, valamint a fent említett anyagtervezési komponensek között, importálni kell a bemenetet, Kimenet és Eventemitter tól től @ szögletes / mag; és Mdcard , Mdinput , MDTOOLBAR és Mdbutton a megfelelő moduloktól a @ szögletes2- anyag könyvtár.

Hogy ezeket az anyagkomponenseket hozza be, be kell adnunk az irányelveket Dialogcomponens igényel. A következő irányelveket adjuk hozzá a @Alkatrészek Metaadatok:

 Templateurl: 'Dialog.comProent.html,
Irányelvek: [MDCARD, MDTOOLBAR, MDINPUT, MDBUTTON],
STYLEURLS: ['Dialog.vereent.css'] 

Ezután kijelentjük, hogy számos @Bemenet változók ( oktext , cankeltext és így tovább), amelyek lehetővé teszik számunkra, hogy meghatározzuk a párbeszéd tartalmát. Hozzá kell adnunk egy @Kimenet Emitter, amely lehetővé teszi számunkra, hogy a párbeszédablak zárva van-e a szülői összetevőben lévő értékkel ellátott funkciót.

Most helyettesíthetjük a generált konstruktorot dialog.proent.ss A következő kóddal:

 konstruktor () {
 ez.okText = 'OK';
 ez.Canceltext = 'Cancel';
}

emitvalue (érték) {
 ez.valueemitted.emit (érték);
} 

Valamint a @Bemenet változók belsejében Dialogcomponens belül Dialog.comPonent.html sablon, a MD-bemenet Lehetővé teszi, hogy elfogadjuk a felhasználótól származó bemenetet:

 & lt; md-bemeneti osztály = "teljes szélességű" [playholder] = "Playholder"
        [(ngmodel)] = "Érték" #dialoginput
        (Keyup.enter) = "EMITVALUE (érték)"
        (keyup.escape) = "EMITVALUE (NULL)" & gt; & lt; / md-bemenet & gt; 

A MD-gombok lehetővé teszi a felhasználó számára, hogy kattintson az „OK”, „Mégse” vagy bármi, amit úgy dönt, hogy címke ezeket a gombokat:

 & lt; gomb MD-gomb (kattintson) = "EMITVALUE (NULL)" COLOR = "primer" & gt;
  {{cankeltext}}
& lt; / gomb és gt;
& lt; gomb MD-felemelt gomb (kattintson) = "EMITVALUE (érték)" Color = "Primary" & GT;
  {{OKTEXT}}
& lt; / gomb és gt; 

Észrevesz kulcsfontosságú Eseménykezelők, amelyek gondoskodnak a dolgokról, amikor megnyomják az Enter vagy az Escape gombot. Ezek a kezelők azonosak a kattintás Eseménykezelők a cankeltext és oktext . A menekülés ugyanolyan dolog, mint a Mégse (EMITVALUE (NULL)) , és az Enter beillesztése ugyanolyan eredmény lesz, mint az OK gombra (EMITVALUE (érték)) . Ez lehetővé teszi számunkra, hogy a felhasználót a érték egy MD-bemenet , és kapjon kibocsátott kimenetet.

Láthatunk példákat számos anyagtervező komponensre: MD-kártya , MD-gomb , stb. Azt is hozzá kell adnunk néhány CSS-t Dialog.veryent.css Az elrendezés elérése érdekében vágyunk - megtekintheti a teljes kódot a kísérő Github repo-ban.

Most adjuk hozzá ezt Dialogcomponens nak nek material2-do.component.html hogy lássa, mit néz ki:

 & LT; App-párbeszédpanel [cím] = "" párbeszédpanel "
  [Sablon] = "" Ez az új anyagtervezési alapú komponensünk: ""
  [Playholder] = "" Írja be a szöveget itt "
  [oktext] = "Igen" "
  [Canceltext] = "Nem '"
  [VALUE] = "" A szöveg "
  (fogható) = "Log ($ esemény)"
  [ShowPrompt] = "True" & gt;
& lt; / app-dialog & gt; 

Figyeljük meg, hogy az összes szó szerinti karakterláncok vannak @Inputs . Ezek megkövetelik, hogy mindkét, mind kettős idézeteket használjunk, ellenkező esetben szögletes a tartalmat változó névként értelmezné Összetevő Hatály.

Mi is van az egy kibocsátott @Kimenet . Ez egyszerűvé és rendkívül konfigurálhatóvá teszi a párbeszédablakot. A legtöbb bemenet nem teljesítette volna az üres karakterláncokat, ha elhagyta.

Módosítsuk Anyag2Docomponent . A DialogComponent importálnunk kell, és másképp, egyébként kijelenteni kell Anyag2Docomponent nem fogja tudni. A naplófunkciót is hozzáadjuk:

 Napló (szöveg) {
   konzol.log (szöveg);
 } 

Vessünk egy pillantást a kézimunkainkra. Az alkalmazás kiszolgálható (az alapértelmezett port 4200) futással NPM Run-Script Start , ami viszont fut NG Server . Ha megnyitja a konzolt, akkor láthatja, hogy mi van naplózva: a bemenet tartalma kibocsátásra kerül, ha az "Igen" gombra kattint, és nulla a "Nem" gombra kattint.

Most már készen állunk erre az új használatra Dialogcomponens hogy létrehozza a to-do alkalmazást.

Hozzon létre egy főalkalmazást

A következő MD komponenseket fogjuk használni a fő alkalmazáshoz: eszköztár , lista , listaelem , Jelölőnégyzet , gomb , ikon , ikonjegyzék és függője, Http_provider , a szögletes HTTP könyvtárból. Így ezeket hozzá kell adni a Anyag2Docomponent .

Ismét, annak érdekében, hogy képesek legyenek arra, hogy ezeket az összetevőket hozza meg, be kell vonnunk őket a @Alkatrészek metaadat irányelvek tömb együtt Dialogcomponens , amit csak hozzáadtunk:

 Irányelvek: [MDCARD, MDTOOLBAR, MDLIST, MDLISTITEM, MDCHECKBOX, MDBUTTON, MDICON, DialogComponent], 

Ahhoz, hogy hozzáférjenek a Mdiconregistry , be kell adnunk, együtt Http_providers , a @Alkatrészek metaadat szolgáltatók sor:

 szolgáltatók: [MdiconRegistry, http_providers], 

Most kihasználjuk Dialogcomponens , elegendő logikát ad hozzá egy egyszerű to-do alkalmazáshoz. A tododialog hívják a párbeszédablak megnyitásához, akár a szerkesztéshez is csinálni ) vagy nulla Ha újat hozunk létre.

Az alapértelmezett változókat új feladathoz állítottuk be, vagy ha egy feladatot szerkesztünk, akkor ennek megfelelően megváltoztatjuk őket. Ezután megmutatjuk a Dialogcomponens A showdialog változó igaz :

 tododialog (todo = null) {
    this.okbutTontext = "feladat létrehozása";
    ez.fieldValue = '';
    ez.edzőtodo = todo;
    Ha (TODO) {
      ez.fieldValue = todo.title;
      this.okbuttontext = 'szerkesztés feladat';
    }
    ez.Showdialog = igaz;
  } 

A Updatetodo A funkciót akkor hívják, amikor bezárjuk. A többi funkció ( Edittodo , addtodo , hányárus ) a segítő módszerek Updatetodo .

 Updatetodo (cím) {
    Ha (cím) {
      Cím = Cím.TRIM ();
      ha (ez.editingtodo) {
        ez.edittodo (cím);
      } más {
        ez.addtodo (cím);
      }
    }
    ez.HIDEIALOG ();
  }

Ban ben material2-do.component.html Adtunk az alkalmazásunkat MD-eszköztár hol helyeztük el a címet, és egy MD-ikon hívott hozzáad (amely úgy néz ki, mint egy plusz jel) a lebegő akciógomb (FAB), amely lehetővé teszi számunkra, hogy létrehozzunk egy új feladatot:

 & lt; gomb MD-FAB osztály = "Fab-Add" (kattintás) = "tododialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md ikon & gt;
    & lt; / gomb és gt; 

Használjuk MD-kártya-tartalom egy MD-lista és egy * ngfor Az átszivárgás és a megjelenítés, a mi feladatlista tömb, mint MD-listaelemek :

 & lt; md-lista-tétel * ngfor = "Legyen Todo of todolist; legyen index = index" & gt; 

MD-jelölőnégyzet Lehetővé teszi számunkra, hogy jelölje le az elemeket a listánkban. És kettőnk van MD-Mini-Fab A feladatok törléséhez és szerkesztéséhez használható gombok: MD-ikonok DELETE_FOREVER és Mode_edit :

& lt; gomb md-mini-fab (kattintson) = "Eltávolítás (index)" Color = "Primary" & GT;
  & lt; md-icon & gt; delete_forever & lt; / md ikon & gt;
& lt; / gomb és gt;

& lt; gomb md-mini-fab (kattintás) = "tododialog (todo)" color = "primer"
        [Letiltva] = "todo.comPleted" & gt;
  & lt; md-icon & gt; mod_edit & lt; / md ikon & gt;
& lt; / gomb és gt; 

Egy kis CSS-vel ezek továbbra is rejtve maradnak, amíg felborítanak (vagy kattintanak). Láthatja a kódot a repo.

Előre menni

Mivel szögletes anyag 2 még mindig alfa, vannak olyan dolgok, amelyek hiányzik - különösen az aláírás MD gomb hullámtörő hatás. Bár az API előrehaladása lehet, nagyon működőképes. Azt is él az is, hogy egy egyszerű API, amely nem zavarja a fejlesztőket, és könnyen kihasználhatja a nagyszerű megjelenésű alkalmazások létrehozását.

Ezt a cikket eredetileg a nettó, a világ legjobban értékesítő magazinja a webes tervezők és a fejlesztők számára tett közzé. Iratkozzon fel itt .

Kapcsolódó cikkek:

• Újdonságok a szögben 4?
• Hogyan építsünk egy teljes oldalú weboldalt szögben
• Építsen egy adat irányítópultot a szögekkel