Készítsen Anyagtervező alkalmazást az Angular 2 alkalmazással

Laptop és telefon képernyők szögletes logóval

Az Angular Material egy felhasználói felület-összetevő keretrendszer, amely megvalósítja a Google Material Design specifikációját az Angular 2-hez - az Angular új, gyorsabb megvalósításához, TypeScript-be írva. Bár még mindig alfa, az Angular Material már az anyagtervezésen alapuló újrafelhasználható és hozzáférhető felhasználói felület-alkatrészeket kínál.

Maga az Angular 2 minden platformon (weben, mobilon és asztali számítógépen) használható, és számos új technológiával rendelkezik. JavaScript szinten az ECMAScript 2015 (ES6) további szintaxisa, a gépelés és az interfész támogatás a TypeScript-től, valamint a Metadata Reflection API dekorátorai. A Reactive Extensions könyvtár megfigyelhetőit használja az eseménysorok funkcionális programozási módon történő kezelésére. Zónákat használ az aszinkron tevékenységek beágyazására és elfogására, hogy egyfajta szál-lokális tárolást biztosítson, lehetővé téve az Angular számára, hogy az adatkapcsolatok fenntartása érdekében automatikusan válaszoljon az aszinkron események adatváltozásaira. Végül a modul betöltését a SystemJS kezeli.

Ebben az oktatóanyagban az Angular 2 segítségével létrehozunk egy egyszerű tennivaló alkalmazást néhány aláíró Anyagtervezési elemmel. Itt szerezheti be a forrásfájlokat .



Állítsa be

A kezdeti környezet beállítása nehéz lehet. Van egy szögletes2-mag elérhető, valamint egy szögletes2-indító . Van azonban még ennél is jobb: a szögletes-cli egyetlen paranccsal konfigurálhatja az Angular 2 projektet.

Nemcsak az utolsó szakaszban említett technológiák beállításáról gondoskodik (a Node-on és az npm-en keresztül), hanem a Jasmine egység teszteléséhez szükséges állványokat, a Protractor end-to-end tesztet, valamint a TSLint tesztelést is. az Angular 2 TypeScript statikus kódelemzése. Bár nem kell mindezeket használni, mindenképpen meg kell. Olyan egyszerű használni, kíváncsi leszel, hogy valaha is boldogultál nélküle.

Az Angular CLI npm csomagként érhető el, ezért a Node és az npm alkalmazást globálisan kell telepítenie a gépére a npm install -g angular-cli . Most hozzon létre egy új Angular 2 alkalmazást a új anyag2-do . Várni kell egy kicsit, mert miután előállította a szükséges fájlokat, inicializálja a Git repót és végrehajt egy npm telepítés az összes szükséges modul letöltéséhez csomópont_modulok / . Vessen egy pillantást a csomag.json és megismerkedjen az ott található modulokkal és szkriptekkel.

Most létrehozott egy új Angular 2 alkalmazást, amely követi a hivatalos bevált gyakorlatokat.

Anyagterv hozzáadása

Az alapértelmezett alkalmazás nem tud semmit az Anyagtervezésről (ebben biztos vagyok egy túlzásban), ezért magunknak kell hozzáadnunk.

A közzétett Angular 2 Material Design csomagok listája található a @ szögletes2-anyag könyvtár. Ebben a példában fogjuk használni mag (szükséges minden Angular Material 2 alkalmazáshoz), valamint gomb , kártya , jelölőnégyzetet , 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

Ahhoz, hogy az eladó csomag működjön, hozzá kell adnunk @ szögletes2-anyag / ** / * tömbjéhez vendorNpmFiles ban ben szögletes-cli-build.js . Ehhez hozzá kell adnunk az utat is @ szögletes2-anyag hoz térképeket tárgy:

const map: any = { '@angular2-material': 'vendor/@angular2-material' };

Tájékoztassa a SystemJS-t az új modulok feldolgozásáról azáltal, hogy az egyes csomagok fő fájljaira mutat:

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`}; });

Itt az ideje betölteni a Material Design ikon betűtípust a nak,-nek src / index.html . Bármely betűtípus működni fog, de a szokásos Material Design ikonokat használjuk:

hogyan tisztítsuk meg az olajfestő keféket

Hozzon létre egy MD párbeszédpanelt

Most már dolgozhatunk az Anyagtervezéssel a teendők alkalmazásban. Az Angular 2 Material Design jelenleg hiányzó egyik összetevője egy gyors üzenet vagy párbeszédpanel, így első feladatunkhoz elkészítjük!

Hozzunk létre egy új komponenst egy Material Design kártya, egy eszköztár, egy bemenet és pár gomb segítségével. Ban,-ben src / kb írja be a repo mappáját komponens párbeszédpanel létrehozása . Ez egy újat generál DialogComponent ban ben src / app / dialog , és hozzáad egy hordót system-config.ts tehát a SystemJS tudja, hogyan kell betölteni.

Ha megnézed a generált párbeszédpanel.komponens.ts fájlt, látni fogja az első sort: importálás {Komponens, OnInit} tól től '@ szögletes / mag'; . Összetevő az Angular egyik fő építőeleme, és OnInit az általa megvalósított interfészek egyike. Ahhoz azonban, hogy hozzáférhessünk a beágyazott alkatrészek, valamint a fent említett Anyagtervező komponensek közötti kommunikációhoz, be kell importálnunk az Input fájlt, Kimenet és EventEmitter tól től @ szögletes / mag; és MdCard , MdInput , MdToolbar és MdButton megfelelő moduljaikból a @ szögletes2- anyag könyvtár.

Ezen anyagkomponensek rendereléséhez be kell adnunk az irányelveket DialogComponent igényel. A következő irányelveket egészítjük ki a @Alkatrészek metaadatok:

templateUrl: 'dialog.component.html', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']

Ezután számosat kijelentünk @Bemenet változók ( okText , cancelText és így tovább), amelyek lehetővé teszik a párbeszéd tartalmának meghatározását. Hozzá kell tennünk egyet @Kimenet emitter, amely lehetővé teszi számunkra, hogy a párbeszédablak bezárásakor kiváltsunk egy függvényt, amelynek értéke van a szülő összetevőben.

Most lecserélhetjük a létrehozott konstruktort párbeszédpanel.komponens.ts a következő kóddal:

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

Valamint a @Bemenet változók a bennünk DialogComponent belül dialog.component.html sablon, az md-input lehetővé teszi számunkra, hogy elfogadjuk a felhasználó bemenetét:

A md-gombok hagyja, hogy a felhasználó rákattintjon az „OK”, a „Mégse” gombra, vagy bármi másra, amire úgy dönt, hogy felcímkézi ezeket a gombokat:

{{cancelText}} {{okText}}

Figyelje meg a billentyűzet eseménykezelők, amelyek gondoskodnak a dolgokról az Enter vagy az Escape gomb megnyomásakor. Ezek a kezelők megegyeznek a kattintson eseménykezelők részére cancelText és okText . Az Escape ugyanazt csinálja, mint a Cancel (emitValue (null)) , és az Enter lenyomása ugyanazt eredményezi, mint az OK gombra kattintás (emitValue (érték)) . Ez lehetővé teszi számunkra, hogy a felhasználót a érték keresztül egy md-input , és fogadja a kibocsátott kimenetet.

Számos Material Design alkatrészre láthatunk példákat: md-kártya , md-gomb , stb. Hozzá kell adnunk néhány CSS-t is dialog.component.css a kívánt elrendezés elérése érdekében - a teljes kódot megtekintheti a mellékelt GitHub repóban.

Most tegyük hozzá ezt DialogComponent nak nek material2-do.component.html hogy nézzen ki, hogy néz ki:

Figyeljük meg, hogy szó szerinti húrok vannak az összes @Bemenet . Ezek megkövetelik, hogy egyszeres és kettős idézőjeleket is használjunk, különben az Angular a tartalmat változó névként értelmezi a Összetevő hatálya.

Nálunk is van egy kibocsátott @Kimenet . Ez a párbeszédpanelt egyszerűvé és rendkívül konfigurálhatóvá teszi. A legtöbb bemenet alapértelmezés szerint üres karaktersorozatot adott volna, ha kihagyta.

Módosítsuk Material2DoComponent . Importálnunk kell a DialogComponent szoftvert, és különben irányelvként kell deklarálnunk Material2DoComponent nem lesz képes visszaadni. Hozzáadjuk a naplófüggvényt is:

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

Vessünk egy pillantást a kézimunkánkra. Futtatásával kiszolgálhatja az alkalmazást (az alapértelmezett port 4200) npm run-script indítás , ami viszont fut szerver . Ha megnyitja a konzolt, láthatja, hogy mi van naplózva: a bemenet tartalma megjelenik, amikor az „Igen” gombra kattint, és nulla akkor jelenik meg, amikor a „Nem” gombra kattint.

Most készen állunk az új használatára DialogComponent a teendő alkalmazásunk létrehozásához.

Hozza létre a fő alkalmazást

A következő MD komponenseket fogjuk használni a fő alkalmazáshoz: eszköztár , lista , listaelem , jelölőnégyzetet , gomb , ikon , ikon-nyilvántartás , és annak függője, HTTP_PROVIDER , az Angular HTTP könyvtárból. Tehát ezeket hozzá kell adni a Material2DoComponent .

Ismételten meg kell adnunk ezeket az összetevőket, hogy felvegyük őket a @Alkatrészek metaadatok irányelvek tömb együtt DialogComponent , amelyet most adtunk hozzá:

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

Hozzáférés a MdIconRegistry , be kell adnunk, együtt HTTP_PROVIDERS , a @Alkatrészek metaadatok szolgáltatók sor:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Most kihasználjuk a mi DialogComponent , elegendő logikát adva egy egyszerű tennivaló alkalmazáshoz. A todoDialog meghívja a párbeszédpanel megnyitásához, vagy a szerkeszteni kívánt feladattal ( minden ) vagy nulla ha újat készítünk.

Beállítottuk az alapértelmezett változókat egy új feladathoz, vagy ha feladatot szerkesztünk, akkor ennek megfelelően módosítjuk őket. Ezután megmutatjuk a DialogComponent a showDialog változó igaz :

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; }

A updateTodo függvény akkor hívódik meg, amikor le akarjuk zárni. A többi funkció ( editTodo , addTodo , hideDialog ) segítő módszerek updateTodo .

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

Ban ben material2-do.component.html megadtuk az alkalmazásunknak md-eszközsor hová tettük a címet, és egy md-icon hívott hozzá (ami pluszjelnek tűnik) lebegő művelet gombunkhoz (FAB), amely lehetővé teszi számunkra, hogy új feladatot hozzunk létre:

add

Használjuk md-card-content tartani egy md-list és egy * ngFor iterálni és megjeleníteni a mi feladatlista tömb mint md-list-items :

md-jelölőnégyzet lehetővé teszi számunkra, hogy kipipáljuk a listán szereplő elemeket. És kettőnk van md-mini-fab gombok, amelyekkel törölhetjük és szerkeszthetjük a feladatunkat: md-icons delete_forever és mód_szerkesztés :

delete_forever mode_edit

Egy kis CSS használatával ezek rejtve maradnak, amíg nem helyezi át (vagy kattint). A kódot a repóban láthatja.

Előre menni

Mivel az Angular Material 2 még mindig alfában van, néhány dolog hiányzik - különösen az aláírás MD gombjának hullámzási hatása. Lehet, hogy az API-n áttörő változások vannak, de nagyon is működik. Azt a követelést is teljesíti, hogy egy egyszerű API-val rendelkezik, amely nem zavarja a fejlesztőket, és könnyen kihasználható a nagyszerű alkalmazások létrehozásához.

Ezt a cikket eredetileg a net 284. számában tették közzé, a világ legkeresettebb weblaptervezőknek és -fejlesztőknek szóló magazinjában. Iratkozzon fel ide .

Kapcsolódó cikkek: