Създайте приложение за материален дизайн с Angular 2

Екрани за лаптоп и телефон с ъглово лого

Angular Material е рамка на UI компонент, която прилага спецификацията на Google за дизайн на материали за Angular 2 - новата, по-бърза реализация на Angular, написана на TypeScript. Въпреки че все още е в алфа версия, Angular Material вече предлага набор от многократно и достъпни компоненти на потребителския интерфейс, базирани на Material Design.

Самият Angular 2 е проектиран за използване на всички платформи (уеб, мобилни и настолни) и има много нови технологии, свързани с него. На ниво JavaScript имаме допълнителен синтаксис на ECMAScript 2015 (ES6), поддръжка на въвеждане и интерфейс от TypeScript, заедно с декоратори от API за отразяване на метаданни. Той използва наблюдаеми от библиотеката Reactive Extensions за управление на последователности от събития по функционален начин за програмиране. Той използва зони за капсулиране и прихващане на асинхронна активност, за да осигури форма на локално съхранение, позволяващо на Angular да реагира автоматично на промени в данните в асинхронни събития, за да поддържа обвързване на данни. И накрая, зареждането на модула се извършва от SystemJS.

В този урок ще използваме Angular 2, за да създадем просто приложение със задължителни елементи с някои елементи на Материалния дизайн. Вземете изходните файлове тук .



Настройте се

Настройването на първоначалната среда може да бъде трудно. Има ъглови2-семена на разположение, както и ъглова2-стартер . Има обаче нещо още по-добро: с ъглова-кли можете да конфигурирате вашия проект Angular 2 с една команда.

Той не само ще се погрижи за настройката на всички технологии, които споменах в последния раздел (чрез Node и npm), но също така ще добави и скеле за тестване на единица Jasmine, тестване от край до край на Protractor плюс тестване на TSLint и анализ на статичен код на codelyzer на Angular 2 TypeScript. Въпреки че не е нужно да използвате всичко това, определено трябва. Толкова е лесен за използване, ще се чудите как сте се разбирали без него.

Angular CLI се предлага като npm пакет, така че ще трябва да инсталирате Node и npm глобално на вашата машина, като използвате npm install -g angular-cli . Сега създайте ново приложение Angular 2 с от нов материал2-do . Ще трябва да изчакате малко, защото след като генерира необходимите файлове, той инициализира Git репо и прави npm инсталиране за да изтеглите всички необходими модули в node_modules / . Погледнете package.json и се запознайте с модулите и скриптовете там.

Вече създадохте ново приложение Angular 2, което следва официалните най-добри практики.

Добавете материален дизайн

Приложението по подразбиране не знае нищо за Material Design (пропуск съм сигурен), така че трябва да го добавим сами.

Има списък на публикуваните пакети Angular 2 Material Design в @ 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 . Всеки шрифт ще работи, но ние използваме стандартните икони на Material Design:

Създайте MD диалогов прозорец

Вече можем да работим с Material Design в нашето приложение за задачи. Един от компонентите, които понастоящем липсват в Angular 2 Material Design, е подкана или диалогов прозорец, така че за първата ни задача ще направим такъв!

Нека създадем нов компонент, като използваме карта за материален дизайн, лента с инструменти, вход и няколко бутона. В src / app папка на вашето репо, въведете диалогов прозорец за генериране на компоненти . Това генерира ново DialogComponent в src / app / диалогов прозорец , и добавя барел към system-config.ts така SystemJS знае как да го зареди.

Ако погледнете генерираното dialog.component.ts файл, ще видите първия ред е: импортиране {Компонент, OnInit} от '@ ъглова / сърцевина'; . Съставна част е един от основните градивни елементи на Angular и OnInit е един от интерфейсите, които прилага. Въпреки това, за да имаме достъп до комуникация между вложени компоненти, както и компонентите на Material Design, споменати по-горе, трябва да импортираме Input, Изход и EventEmitter от @ ъглова / сърцевина; и MdCard , MdInput , MdToolbar и MdButton от съответните им модули в @ angular2- материал библиотека.

За да изобразим тези Материални компоненти, трябва да инжектираме директивите DialogComponent изисква. Ще добавим следните директиви към @ Компоненти метаданни:

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

След това декларираме редица @Вход променливи ( okText , cancelText и т.н.), които ни позволяват да дефинираме съдържанието на диалога. Ние също трябва да добавим един @ Изход излъчвател, който ни позволява да задействаме функция със стойност в родителския компонент, когато диалоговият прозорец е затворен.

Сега можем да заменим генерирания конструктор в dialog.component.ts със следния код:

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

Както и използването на @Вход променливи вътре в нашата DialogComponent в рамките на dialog.component.html шаблон, md-вход позволява да приемем входа от потребителя:

The md-бутони позволете на потребителя да щракне върху „OK“, „Cancel“ или каквото и да решите да обозначите с тези бутони:

{{cancelText}} {{okText}}

Забележете клавиатура обработчици на събития, които се грижат за нещата при натискане на клавиша Enter или Escape. Тези манипулатори са идентични с щракнете обработчици на събития за cancelText и okText . Escape прави същото като отмената (emitValue (null)) и натискането на Enter ще има същия резултат като щракване върху OK (emitValue (стойност)) . Това ни позволява да подканим потребителя за стойност чрез md-вход и получават излъчена продукция.

Можем да видим примери за редица компоненти на Material Design: md-карта , бутон md , и така нататък. Също така трябва да добавим малко CSS в dialog.component.css за да постигнем оформлението, което желаем - можете да видите пълния код в придружаващото GitHub репо.

Сега нека добавим това DialogComponent да се material2-do.component.html за да видите как изглежда:

Забележете, че имаме буквални низове за всички @ Входове . Те изискват да използваме както единични, така и двойни кавички, в противен случай Angular би интерпретирал съдържанието като име на променлива в Съставна част обхват.

Имаме и излъчения @ Изход . Това прави диалога прост и изключително конфигурируем. Повечето от входовете биха имали по подразбиране празни низове, ако са пропуснати.

Нека модифицираме Material2DoComponent . Трябва да импортираме DialogComponent и да го декларираме като директива, в противен случай Material2DoComponent няма да може да го изобрази. Ще добавим и функцията log:

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

Нека да разгледаме нашата ръчна работа. Можете да обслужвате приложението (портът по подразбиране е 4200), като стартирате npm стартиране на скрипт за изпълнение , което от своя страна тече на сървъра . Ако отворите конзолата, можете да видите какво се регистрира: съдържанието на входа се излъчва, когато щракнете върху „Да“ и нула се излъчва, когато щракнете върху „Не“.

Вече сме готови да използваме това ново DialogComponent за да създадем нашето приложение за задачи.

Създайте основното приложение

Ще използваме следните компоненти на MD за основното приложение: лента с инструменти , списък , списък-елемент , квадратче за отметка , бутон , икона , икона-регистър , и зависим от него, HTTP_PROVIDER , от Angular HTTP библиотеката. Така че те трябва да бъдат добавени към раздела за импортиране на Material2DoComponent .

Още веднъж, за да можем да изобразим тези компоненти, трябва да ги включим в @ Компоненти метаданни директиви масив заедно с DialogComponent , които току-що добавихме:

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

За да получите достъп до MdIconRegistry , трябва да го инжектираме, заедно с HTTP_PROVIDERS , чрез @ Компоненти метаданни доставчици масив:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Сега използваме нашите DialogComponent , добавяйки достатъчно логика за просто приложение за изпълнение. The todoDialog се извиква, за да отвори нашия диалогов прозорец, или със задачата за редактиране ( всичко ) или нула ако създаваме нов.

Ние настройваме променливите по подразбиране за нова задача или ако редактираме задача, ние ги променяме съответно. След това показваме DialogComponent чрез задаване на 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; }

The 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-content да проведете md-списък и an * ngFor да прегледа и покаже нашия todoList масив като md-list-items :

md-квадратче за отметка ни позволява да маркираме елементи от нашия списък. И ние имаме две md-mini-fab бутони, които можем да използваме за изтриване и редактиране на нашата задача: md-икони delete_forever и mode_edit :

delete_forever mode_edit

С малко CSS те остават скрити, докато не превъртите (или щракнете). Можете да видите кода в репото.

Върви напред

Тъй като Angular Material 2 все още е в алфа, има някои неща, които липсват - по-специално ефектът на пулсирането на бутона MD. Въпреки че може да има пробивни промени в API напред, той работи много добре. Той също така отговаря на твърдението, че има ясен API, който не обърква разработчиците и е лесен за използване за създаването на страхотно изглеждащи приложения.

Тази статия първоначално е публикувана в брой 284 на net, най-продаваното списание за уеб дизайнери и разработчици в света. Абонирайте се тук .

Свързани статии: