Создание приложения дизайна материала с угловым 2

Угловой материал представляет собой структуру компонента UI, которая реализует спецификацию дизайна материала Google для угловых 2 - новую, более быструю реализацию угловых, написанных в Teadercript. Хотя все еще в альфа, угловой материал уже обеспечивает набор многократных и доступных компонентов пользовательского интерфейса на основе дизайна материала.

Angular 2 сам предназначен для использования на всех платформах (веб, мобильный и рабочий стол) и имеет много новых технологий, связанных с ним. На уровне JavaScript у нас есть дополнительный синтаксис ECMAScript 2015 (ES6), набрав и поддержка интерфейса из TypebrapSt, наряду с декораторами из API метаданных API. Он использует наблюдаемые от библиотеки реактивных расширений для управления последовательностями событий в способе функционального программирования. Он использует зоны для инкапсуляции и перехватывания асинхронной активности для обеспечения формы потокового локального хранилища, что позволяет угловать для автоматической реагирования на изменения данных в асинхронных событиях для поддержания привязки данных. Наконец, загрузка модуля обрабатывается SystemJS.

В этом руководстве мы собираемся использовать угловые 2, чтобы создать простое приложение для DO, с некоторыми элементами дизайна материала подписи. Получить исходные файлы здесь Отказ

Установить

Настройка начальной среды может быть сложной. Существует Angular2-Seed доступно, а также angular2-стартер Отказ Тем не менее, есть что-то еще лучше: с угловой Вы можете настроить свой угловой 2 проекта с помощью одной команды.

Он не только позаботится о настройке для всех технологий, которые я упомянул в последнем разделе (через узел и NPM), он также добавит в лесах для тестирования жасминовых блоков, протяженность концевого тестирования, плюс тестирование Цлинта, а также Кодезен Статический код Анализ угловой 2 Tymdercript. Хотя вам не нужно использовать все это, вы определенно должны. Это так просто использовать, вы зададите интересно, как вы когда-нибудь ладили без него.

Angular CLI доступен в качестве пакета NPM, поэтому вам нужно будет установить узел и NPM глобально на вашем компьютере, используя NPM install-g angular-cli Отказ Теперь создайте новое угловое 2 приложение с ng новый материал2-do Отказ Вам придется немного подождать, потому что после того, как он создает необходимые файлы, он инициализирует Git Reppo и делает Установка NPM Чтобы загрузить все необходимые модули в node_modules / Отказ Посмотреть на Package.json. И познакомиться с модулями и сценариями там.

Теперь вы создали новое приложение Angular 2, которое следует за официальной лучшими практиками.

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

Приложение по умолчанию ничего не знает о дизайне материала (надзор, я уверен), поэтому мы должны добавить его.

Существует список опубликованных угловых 2 пакетов дизайна материалов в @ angular2-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-material к тому карта объект:

 Const Map: Any = {
  '@ Angular2-material': «Поставщик / @ angular2-материал»
}; 

Пусть SystemJS знает, как обработать новые модули, указывая на основные файлы каждого из пакетов:

 Const Packages: Any = {};

// Поместите имена любого из ваших компонентов материала здесь
const matteriatpkgs: строка [] = [«CORE», кнопка ', «CARD», «Флажок»,
«Иконка», «вход», «список», «панель инструментов»];

MaterialPKGS.Foreach ((PKG) = & gt; {
  Пакеты [`@ angular2-material / $ {pkg}`] = {main: `$ {pkg} .js`};
}); 

Теперь пришло время загрузить шрифт значок дизайна материала в из SRC / index.html. Отказ Любой шрифт будет работать, но мы используем стандартные значки дизайна материала:

.
  

   Создайте диалоговое окно MD
  
  
Теперь мы можем работать с материальным дизайном в нашем приложении To-Do. Один из компонентов, которые в данный момент отсутствуют от угловой 2 дизайна материала, является подсказкой или диалогом, поэтому для нашей первой задачи мы сделаем один!
  
  

   Давайте создадим новый компонент, используя карту дизайна материала, панель инструментов, вход и пару кнопок. в
   
    SRC / приложение
   
   папка вашего репо, типа
   
    NG генерирует диалог компонента
   
   Отказ Это порождает новый
   
    DialogComponent.
   
   в
   
    SRC / App / диалог
   
   и добавляет бочку на
   
    Система конфигурации
   
   Поэтому SystemJS знает, как загрузить его.
  
  

   Если вы посмотрите на сгенерированный
   
    dialog.component.ts.
   
   Файл, вы увидите первую строку:
   
    Импорт {компонент, Oninit}
   
   из
   
    «@ угловой / ядра»;
   
   Отказ
   
    Компонент
   
   является одним из главных зданий угловых, а также
   
    ОНИНИИТ
   
   является одним из интерфейсов, которые он реализует. Однако для того, чтобы иметь доступ к связи между вложенными компонентами, а также компоненты дизайна материала, упомянутые выше, нам нужно импортировать вход,
   
    Выход
   
   и
   
    Eventemitter.
   
   из
   
    @ угловой / ядро;
   
   и
   
    MDCard
   
   ,
   
    Mdinput.
   
   ,
   
    MDTOOLBAR
   
   и
   
    MDButton
   
   из соответствующих модулей в
   
    @ angular2- материал
   
   библиотека.
  
  

   Чтобы сделать эти материальные компоненты, нам нужно ввести наши директивы
   
    DialogComponent.
   
   требует. Мы добавим следующие директивы к
   
    @Составные части
   
   Метаданные:
  
  
 templateurl: 'dialog.component.html',
Директивы: [MDCARD, MDTOOLBAR, MDINPUT, MDBUTTON],
СИЛЬЮРЛС: ['Dialog.component.css'] 
  

   Затем мы объявляем ряд
   
    @Вход
   
   Переменные (
   
    oktext.
   
   ,
   
    CanceText.
   
   И так далее) что позволяет нам определить содержимое диалога. Нам также нужно добавить один
   
    @Выход
   
   Эмиттер, который позволяет нам вызвать функцию со значением в родительском компоненте, когда диалоговое окно закрыто.
  
  

   Теперь мы можем заменить сгенерированный конструктор в
   
    dialog.component.ts.
   
   со следующим кодом:
  
  
 Конструктор () {
 this.okText = 'OK';
 this.canceltext = «Отмена»;
}

Эмитвалею (значение) {
 this.valuehed.emit (стоимость);
} 
  

   А также используя
   
    @Вход
   
   Переменные внутри нашего
   
    DialogComponent.
   
   внутри
   
    dialog.component.html.
   
   Шаблон, то
   
    MD-ввод
   
   Позволяет нам принимать вход от пользователя:
  
  
 & lt; Класс MD-ввода = «Полная ширина» [заполнитель] = «заполнитель»
        [(NGModel)] = «Значение» #DialogInput
        (keyup.enter) = "EmitValue (значение)"
        (keyup.escape) = "EmitValue (null)" & gt; / md-input & gt; 
  

   То
   
    MD-кнопки
   
   Разрешить пользователю нажать «ОК», «Отмена» или что вы решите маркировать эти кнопки:
  
  
 & lt; Кнопка MD-кнопка (нажмите) = "EmitValue (null)" Color = "Primary" & gt;
  {{OmtintText}}}
& lt; / button & gt;
& lt; Кнопка MD-поднятая кнопка (нажмите) = "EmitValue (значение)" Color = "Primary" & gt;
  {{oktext}}
& lt; / кнопка & gt; 
  

  
  

   Обратите внимание
   
    keyup.
   
   Обработчики событий, которые заботятся о вещах при нажатии клавиши Enter или Escape. Эти обработчики идентичны
   
    щелчок
   
   Обработчики событий для
   
    CanceText.
   
   и
   
    oktext.
   
   Отказ Побег делает то же самое, что и Отмена
   
    (Эмитвалею (NULL))
   
   и ударить ввод будет иметь тот же результат, что и нажав ОК
   
    (EmitValue (значение))
   
   Отказ Это позволяет нам подсказать пользователю
   
    ценить
   
   через ан
   
    MD-ввод
   
   и получите излучаемый выход.
  
  

   Мы можем видеть примеры ряда компонентов дизайна материала:
   
    MD-карта
   
   ,
   
    MD-кнопка
   
   , и так далее. Нам также нужно добавить некоторые CSS в
   
    dialog.component.css.
   
   Для достижения планировки мы желаем - вы можете просмотреть полный код в сопровождающемся GitHub Repo.
  
  

   Теперь добавим это
   
    DialogComponent.
   
   к
   
    Material2-do.component.html.
   
   чтобы увидеть, как выглядит:
  
  
.
  [Шаблон] = «Это наш новый компонент на основе материалов на основе материалов:»
  [Защитник] = «Введите текст здесь»
  [OKText] = «Да» »
  [Отменитьтекст] = «Нет»
  [Значение] = «Пусковой текст»
  (value Completed) = "log ($ Event)"
  [ShowPrompt] = «True» & GT;
& lt; / app-dialog & gt; 
  

   Обратите внимание, у нас есть буквальные строки для всех
   
    @Inputs.
   Отказ Они требуют, чтобы мы использовали как отдельные, так и двойные кавычки, в противном случае угловые интерпретации будут интерпретировать содержимое в качестве имена переменной в
   
    Компонент
   
   объем.
  
  

   У нас также есть один излученный
   
    @Выход
   
   Отказ Это делает диалог простым и чрезвычайно настраиваемым. Большинство из входов были бы по умолчанию для пустых строк, если их опустоты.
  
  

   Давайте изменим
   
    Материал2докомпонент
   
   Отказ Нам нужно импортировать диалог и объявить его директивой, в противном случае
   
    Материал2докомпонент
   
   не сможет сделать это. Мы также добавим функцию журнала:
  
  
 Журнал (текст) {
   console.log (текст);
 } 
  

   Давайте посмотрим на нашу ручную работу. Вы можете служить приложению (порт по умолчанию 4200), запустив
   
    NPM Run-Script Start
   
   , который в свою очередь работает
   
    ng server.
   
   Отказ Если вы открываете консоль, вы можете увидеть, что зарегистрировано: содержимое ввода испускается при нажатии «Да» и
   
    ноль
   
   испускается, когда вы нажимаете «Нет».
  
  

   Теперь мы готовы использовать этот новый
   
    DialogComponent.
   
   Чтобы создать наше приложение To-Do.
  
  

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

   Мы собираемся использовать следующие компоненты MD для основного приложения:
   
    панель инструментов
   
   ,
   
    список
   
   ,
   
    Элемент списка
   
   ,
   
    флажок
   
   ,
   
    кнопка
   
   ,
   
    значок
   
   ,
   
    Значок реестра
   
   и его зависимый,
   
    Http_provider.
   
   , из угловой библиотеки HTTP. Таким образом, эти должны быть добавлены в раздел импорта
   
    Материал2докомпонент
   
   Отказ
  
  

   Еще раз, чтобы иметь возможность рендерировать эти компоненты, нам нужно включить их в
   
    @Составные части
   
   метаданные
   
    директивы
   
   массив вместе с
   
    DialogComponent.
   
   , который мы только что добавили:
  
  
 Директивы: [MDCARD, MDTOOLBAR, MDLIST, MDLISTITEM, MDCHECKBOX, MDBUTTON, MDICON, DialogComponent], 
  

   Чтобы получить доступ к
   
    Мдиконрегигия
   
   нам нужно ввести его вместе с
   
    Http_providers.
   
   , через то
   
    @Составные части
   
   метаданные
   
    провайдеры
   
   множество:
  
  
 Поставщики: [MDIConregistry, http_providers], 
  

   Теперь мы используем наши
   
    DialogComponent.
   
   , добавляя в достаточную логику для простого доноса приложения. То
   
    tododialog.
   
   вызывается, чтобы открыть наш диалог, либо с заданием для редактирования (
   
    сделать
   
   ) или же
   
    ноль
   
   Если мы создаем новый.
  
  

   Мы устанавливаем переменные по умолчанию для новой задачи, или если мы редактируем задачу вместо этого, мы изменяем их соответственно. Затем мы покажем
   
    DialogComponent.
   
   Установка
   
    ShowDialog.
   
   переменная
   
    истинный
   
   :
  
  
 Тодиализатор (TODO = NULL) {
    this.okbuttontext = «создать задачу»;
    Это .FieldCalue = '';
    this.editingtodo = todo;
    Если (TODO) {
      this.fieldvalue = todo.title;
      this.okbuttontext = 'Редактирование задачи';
    }
    Это .showdialog = true;
  } 
  

   То
   
    UpdateToDo.
   
   Функция называется, когда мы хотим закрыть ее. Другие функции (
   
    edittodo.
   
   ,
   
    addtodo.
   
   ,
   
    химии
   
   ) являются методами помощника
   
    UpdateToDo.
   
   Отказ
  
  
 UpdateTODO (название) {
    Если (название) {
      title = title.tim ();
      Если (that.editingtodo) {
        Это. ЭДИТИТООД (название);
      } еще {
        this.adtodo (название);
      }
    }
    Это. HiDiDiadialog ();
  }

  

   В
   
    Material2-do.component.html.
   
   Мы дали наше приложение
   
    MD-панель инструментов
   
   где мы поставили название и
   
    MD-icon.
   
   называется
   
    Добавить
   
   (который выглядит как знак плюс) для нашей плавающей кнопки действия (FAB), которая позволяет нам создать новую задачу:
  
  
 & lt; Кнопка MD-Fab Class = "FAB-Add" (нажмите) = "tododialog ()" & gt;
      & lt; md-icon & gt; Добавить & lt; / md-icon & gt;
    & lt; / кнопка & gt; 
  

   Мы используем
   
    CD-Card-Content
   
   Удерживать
   
    MD-списка
   
   и ан
   
    * ngfor.
   
   перейти и показывать, наш
   
    список дел
   
   массив как
   
    md-list-товары
   
   :
  
  
 (101].
  

   
    MD-Checkbox.
   
   Позволяет нам отметить элементы в нашем списке. И у нас есть два
   
    md-mini-fab
   
   Кнопки мы можем использовать для удаления и редактирования нашей задачи:
   
    MD-icons delete_forever
   
   и
   
    mode_edit.
   
   :
  
  
& lt; кнопка md-mini-fab (Щелкните) = "Удалить (индекс)" color = "первичный" и GT;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / button & gt;

& lt; Кнопка md-mini-fab (нажмите) = "tododialog (todo)" color = "Primary"
        [Отключено] = "todo.completed" & gt;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / кнопка & gt; 
  

   С небольшим количеством CSS они остаются скрыты, пока не выложите (или нажимаете). Вы можете увидеть код в репо.
  
  

   Идти вперед
  
  

   В качестве углового материала 2 все еще в альфа, есть некоторые вещи, которые отсутствуют - в частности, подпись Md кнопка пульсации эффекта. Хотя могут нарушать изменения в API впереди API, он очень функционирует. Он также несется к претензиям на простые API, которые не путают разработчиков, и легко использовать для создания великолепных приложений.
  
  

   
    Эта статья была первоначально опубликована в выпуске 284 чистых, самых продаваемых в мире журнала для веб-дизайнеров и разработчиков.
   
   
    
     Подписаться здесь
    
   
   
    Отказ
   
  
  

   
    Статьи по Теме:
   
  
  

   

    
     Что нового в угловых 4?
    
   
   

    
     Как построить полнотечный веб-сайт в угловом
    
   
   

    
     Создайте приборную панель данных с Angularjs