Что вам нужно знать об этой библиотеке пользовательского интерфейса Angular

Библиотеки пользовательского интерфейса в настоящее время необходимы для каждого веб-приложения. Во-первых, потому что он ускоряет разработку и сохраняет ограничения всех разработчиков на использование одного и того же компонента для одной и той же цели, таким образом, больше возможности повторного использования в приложении и меньше усилий по обслуживанию. Во-вторых, он заставляет новых разработчиков интерфейса удобная команда и начало сверхбыстрого производства, поскольку источник или руководство, которому следует следовать, один и уже определены: Prime NG.

В этой статье я отвечаю на вопросы об UI-библиотеке Angular Material, например, что это такое? Зачем это нужно? Как и когда его использовать?

В конце я выскажу несколько заключительных мыслей, основанных на моем опыте и моем мнении как фронтенд-разработчика.

Готовый? гоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Что такое угловой материал?

Angular Material - это библиотека компонентов пользовательского интерфейса для приложений Angular. Он предоставляет современные компоненты пользовательского интерфейса, которые работают как на настольных компьютерах, так и на мобильных устройствах. С помощью этих современных компонентов пользовательского интерфейса вы можете создавать привлекательные, согласованные и функциональные веб-приложения.

Почему угловой материал?

  • Angular Material находится под лицензией MIT, поэтому он бесплатен и может использоваться в коммерческих целях.
  • Обеспечьте современные принципы веб-дизайна, такие как портативность, независимость от устройств и привлекательное приложение.
  • Облегчает процесс разработки и, что наиболее важно, помогает быстро создавать приложения с предоставленными высококачественными и обслуживаемыми компонентами.
  • Единое веб-приложение для разных устройств и разных размеров экрана (адаптивные приложения)
  • Предоставьте разработчикам инструменты для создания собственных пользовательских компонентов с общими шаблонами взаимодействия.
  • Поскольку он создан командой Angular, его можно легко интегрировать в приложения Angular.

Шаги, которые необходимо выполнить, чтобы использовать угловой материал

  • Шаг № 1. Установите приложение Angular с помощью Angular CLI

Если вы впервые создаете приложение Angular, вот краткие и обобщенные шаги, которые необходимо выполнить для этого:



Два шага по созданию, запуску, тестированию и обнаружению приложения Angular
Быстрые и простые шаги по обнаружению приложения Angular medium.com



  • Шаг 2: установите Angular Material, Angular CDK и Angular Animations

Без Angular CLI (установить с помощью npm или yarn):

npm install @angular/material @angular/cdk @angular/animations --save

С помощью Angular CLI:

ng add @angular/material

Интерфейс командной строки предложит вам выбрать нужный материал для темы Angular.

  • Шаг № 3. Настройте анимацию

Если у вас есть Angular CLI, обычно этот шаг вам не нужен, потому что он уже настроил весь необходимый Angular материал.

В противном случае вам нужно будет самостоятельно настроить Angular-анимацию. Не беспокойтесь, это просто и быстро. Все, что вам нужно, это импортировать модуль анимации в модуль приложения Angular:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [BrowserAnimationsModule],
})

export class AppModule { }

Поздравляю ️🎉, ваше приложение готово к использованию компонентов пользовательского интерфейса Angular Material. А теперь давайте посмотрим, как это можно использовать.

Как использовать Angular Material в вашем приложении

  • Шаг № 1. Импортируйте модуль компонента, который вам нужен

Допустим, вы хотите создать форму, нам нужно импортировать:

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatButtonModule} from '@angular/material/button';
  • Шаг №2. Добавьте компоненты в свой HTML-шаблон
<div class="example-container">
  <mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput>
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>Select</mat-label>
    <mat-select>
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>Textarea</mat-label>
    <textarea matInput></textarea>
  </mat-form-field>
<button mat-raised-button (click)="onNoClick()">No, thanks</button><button mat-raised-button (click)="onYesClick()">Yes</button>
</div>

Есть гораздо больше компонентов, которые вы можете проверить в документации Angular Material: Angular Material Components

Когда выбрать Angular Material в качестве библиотеки пользовательского интерфейса для вашего приложения?

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

Для больших приложений, что-то вроде корпоративных приложений с множеством функций и особыми потребностями. Не думаю, что Angular Material будет действительно эффективным. Я бы предпочел что-то вроде Prime NG.

Еще одно решение - использовать только Bootstrap и CSS, установив с помощью npm или пряжи эти пакеты: ngx-bootstrap, ng-bootstrap… и т. Д. Это также удобное решение для корпоративных приложений, но вам нужен дизайнер UI / UX, который создаст настраиваемую тему начальной загрузки, которая соответствует графической диаграмме клиента. Поэтому разработчики будут следовать теме, чтобы иметь единый код и фронт. Единственное неудобство с этим решением - стоимость поддержки кода.

Если вы хотите использовать Prime NG, вот краткое руководство, в котором резюмируются шаги, которые вам нужно выполнить, чтобы использовать его в своем приложении:



Как использовать PrimeNG - Angular 9
Краткое руководство: шаги, которые необходимо выполнить для настройки PrimeNG в вашем веб-приложении medium.com



Последние мысли

  • Эта библиотека пользовательского интерфейса настолько мощна, что облегчает и значительно сокращает усилия и время разработчика для создания полностью согласованного, унифицированного и привлекательного приложения Angular.
  • При использовании библиотеки пользовательского интерфейса убедитесь, что вы используете только одну, а не несколько библиотек пользовательского интерфейса, например Prime NG, в одном приложении для поддерживаемого и унифицированного приложения.
  • Если вы ищете особый индивидуальный дизайн для своего приложения, рассмотрите возможность создания своей собственной темы с помощью Angular Material или использования другой библиотеки, которая предоставляет больше компонентов и классический дизайн, который вы можете легко настроить с помощью SCSS / CSS, например Prime NG.

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

Подпишитесь на меня в Medium, Linkedin и Twitter, чтобы увидеть больше статей.

До скорой встречи (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧

FAM