Если вы разработчик Angular, скорее всего, вы слышали об Angular Material. Если нет, то все в порядке, я здесь, чтобы направлять вас.

Angular Material — это библиотека компонентов, соответствующая Google Material Design Spec. Кнопки, вкладки, поля формы и счетчики загрузки — это лишь некоторые из многих компонентов в этой библиотеке, и быстро разрабатывать приложения очень просто.

Моя цель в этой серии статей — пройтись по каждому отдельному компоненту и показать вам, как его использовать, воспользоваться преимуществами его API и настроить их для ваших собственных приложений. Нам нужно будет пройти через несколько основных концепций, прежде чем переходить к компонентам, но я постараюсь сделать это кратким и понятным. Давайте начнем!

Обратите внимание, что на момент написания я использовал Angular 9 с соответствующей версией Angular Material. Я постараюсь обновлять эти статьи по мере обновления Angular.

Подсказка: Весь код для этой статьи можно найти здесь.

Установка и настройка

Создайте новый проект, запустив ng new angular-material-tutorial и cd в корневой каталог проекта. Оказавшись внутри, нам нужно запустить ng add @angular/material.

Это установит необходимые модули npm и проведет нас через некоторые параметры конфигурации по умолчанию. Пройдемся по ним.

Темы

Первый вопрос, на который мы должны ответить, — какую тему мы хотели бы выбрать.

? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) ❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ] Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ] Purple/Green [ Preview: https://material.angular.io?theme=purple-green ] Custom

Выберите любой, который вам нравится, я выберу индиго/розовый по умолчанию. Мы рассмотрим пользовательские темы в следующей статье, обещаю! Но пока я прикреплю превью ниже.

Важно выбрать тему, которая соответствует интерфейсу вашего приложения или теме, которая соответствует бренду вашей компании. Но что еще более важно, мы должны помнить о доступности. Все темы Angular Material должны соответствовать Стандартам WCAG. Эти правила составлены таким образом, чтобы люди с ограниченными возможностями могли по-прежнему получать доступ к нашим приложениям.

Одним из примеров является поддержание приемлемого уровня контраста между фоном и передним планом для обеспечения видимости контента. Это также является частью соответствия WCAG и должно соблюдаться. Несоблюдение этих правил может фактически привести к судебному процессу в некоторых частях мира!

Типография углового материала

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] ? Set up global Angular Material typography styles? (y/N) y

Если у вас нет собственной системы типографики, вы должны выбрать да для этого параметра. Это дает нам доступ ко множеству классов, отвечающих за интервалы, тени, анимацию и т. д. По умолчанию Angular Material не применяет никаких глобальных CSS, но они будут применяться внутри компонентов и к дочерним элементам родителя, несущего класс .mat-typography. Узнать больше можно здесь.

Браузерные анимации

Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] ? Set up global Angular Material typography styles? Yes ? Set up browser animations for Angular Material? (Y/n) y

Вы можете выбрать да для этого, так как большинство взаимодействий Angular Material UX основаны на анимации. Он следует Руководству по дизайну материалов в движении.

Завершение установки

UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3972 bytes)
UPDATE src/index.html (526 bytes)
UPDATE src/styles.scss (181 bytes)

На этом установка завершена, и вышеуказанные файлы были изменены. Вот краткий обзор:

  • Иконки Material Design и шрифт Roboto (с плотностью шрифта 300, 400 и 500) были добавлены в ваш файл index.html. При необходимости вы можете добавить больше этих весов. Вес кратен 100 и находится в диапазоне 100-900. .mat-typography также был нанесен на ваше тело.
  • Стили по умолчанию добавлены в ваш файл styles.scss
  • Тема .css, которую мы выбрали ранее, была вставлена ​​в angular.json в разделе styles нашего приложения build и test configuration.
  • package.json и package-lock.json были обновлены установленными пакетами.

Теперь мы можем запустить ng serve и открыть наш браузер на localhost:4200, чтобы увидеть наше приложение Angular. Если вы дошли до этого места без ошибок, значит, вы успешно добавили Angular Material в свой проект 😄

Основы шаблонов

Angular дает нам доступ к свойствам элемента HTML, позволяя нам создать ссылку на шаблон. Теперь эта ссылка может быть доступна напрямую из нашего HTML, как переменная компонента, или внутри самого компонента с помощью декоратора @ViewChild.

Нам не нужно будет использовать @ViewChild без необходимости, но я хотел проиллюстрировать, как использовать ссылки на шаблоны в наших интересах. Это также чрезвычайно важное знание при работе с Angular Material.

Допустим, у нас есть компонент счетчика. Этот компонент начинается с 0 и показывает номер по умолчанию. У нас есть возможность показать, скрыть и увеличить число. Но мы хотим, чтобы родительские компоненты контролировали эти действия. Я использовал встроенные стили и шаблон, так как компонент был небольшим.

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
  <h2>My Counter - {{showNumber ? "shown" : "hidden"}}</h2>
  <p *ngIf = 'showNumber'>{{num}}</p>`,
  styles: [':host { text-align: center; }']
})
export class CounterComponent {

  num: number = 0;
  showNumber: boolean = true;

  constructor() { }

  increment() { this.num++; }
  show() { this.showNumber = true; }
  hide() { this.showNumber = false; } 
  private toggle() { this.showNumber = !this.showNumber; }

}

Теперь давайте посмотрим на наш app.component.ts. Я также использовал встроенные стили и шаблон здесь, так как кода не так много.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular-Material-Tutorial</h1>

    <app-counter #counter></app-counter>
    <button (click) = 'counter.increment()'>Add number</button>
    <button (click) = 'counter.show()'>Show Counter</button>
    <button (click) = 'counter.hide()'>Hide Counter</button>
  `,
  styles: [
    `h1 {
      text-align: center;
      padding: 20px;
    }`,
    `button {
      border: 0;
      outline: 0;
      padding: 10px;
      border-radius: 8px;
      display: block;
      margin: 10px auto;
  }`]
})
export class AppComponent {}

Обратите внимание, что наш компонент приложения не имеет абсолютно никакого кода внутри класса. Даже не конструктор! Тем не менее, если мы нажмем кнопку «Добавить число», это увеличит счетчик, и наши кнопки «Показать» и «Скрыть счетчик» также будут работать должным образом.

Нам удалось получить доступ к свойствам и методам CounterComponent через AppComponent из-за ссылки на шаблон.

Когда мы говорим <app-counter #counter></app-counter>, мы обращаемся к этому конкретному экземпляру класса CounterComponent. А поскольку свойства и методы сводятся к простым объектам JavaScript, мы можем получить к ним доступ, как и к обычным объектам (например, counter.increment()). К любому свойству или экземпляру, помеченному как частное, нельзя получить доступ через ссылки на шаблоны.

Эта простая, но мощная функция Angular позволяет нам выполнять полезные задачи без необходимости раздувать наш класс TypeScript. Кроме того, это та самая техника, которую мы будем использовать для доступа ко многим свойствам компонентов Angular Material, чтобы в полной мере использовать их преимущества.

Вывод

В этой статье мы получили представление о том, что такое Angular Material, добавили Angular Material в наш проект и узнали о ссылках на шаблоны и о том, как они связаны с Angular Material.

В следующей статье мы начнем с простых компонентов из раздела Кнопки и индикаторы. Большое спасибо за чтение! 😄

Первоначально опубликовано на https://dev.to 30 мая 2020 г.