Кутовий матеріал і кутовий 6 - конструкція матеріалу для кутових

Ця публікація була опублікована першою на CodingTheSmartWay.com.

Підписатися на YouTube | Демонстрація демонстрації | Код на GitHub

Angular Material - це сукупність компонентів Material Design для кутових. Використовуючи ці компоненти, ви можете легко застосувати Material Design. З випуском програми Angular 6 також стало легше використання кутового матеріалу. У цьому підручнику ми розглянемо останні зміни. Ви дізнаєтесь, як використовувати кутовий матеріал у своєму проекті Angular 6 найпростішим способом.

Веб-сайт Angular Material можна знайти на веб-сайті https://material.angular.io/.

Налаштування кутового проекту 6

Для отримання стартерів нам спочатку потрібно встановити проект Angular 6. Це робиться за допомогою Angular CLI (https://cli.angular.io/). Якщо ви ще не встановили Angular CLI у вашій системі, спочатку потрібно виконати кроки на веб-сайті проекту, щоб зробити інтерфейс командного рядка доступним у вашій системі.

Після успішного встановлення Angular CLI ви можете ініціювати новий проект, використовуючи команду ng наступним чином:

$ ng новий ngMat01

У цьому прикладі ngMat01 - назва нового проекту. Створюється нова папка проекту (з цим ім'ям), завантажується шаблон кутового проекту та встановлюються необхідні залежності.

Використовуючи додавання для додавання кутового матеріалу

З випуском Angular 6 з'явилася нова команда додавання, яка спрощує додавання нових можливостей до проекту. Ця команда використовуватиме менеджер пакунків для завантаження нових залежностей та виклику відповідних сценаріїв встановлення. Це гарантує, що проект оновлюється залежностями, зміною конфігурації та виконанням специфічного для пакета коду ініціалізації.

Далі ми будемо використовувати команду ng add, щоб додати Angular Material до раніше створеної програми Angular 6:

$ ng додати @ кутовий / матеріал

Виконуючи цю команду, ми встановлюємо кутовий матеріал та відповідні теми в проект. Крім того, нові стартерні компоненти реєструються в ng-генераторах.

Вивчення компонентів статевих елементів кутового матеріалу

Додавши нові компоненти для запуску кутового матеріалу для створення, це дуже легко почати роботу з кутовим матеріалом. Доступні наступні компоненти стартера:

  • @ angular / material: materialDashboard: Створіть компонент приладної панелі на основі картки
  • @ angular / material: materialTable: Створити компонент, який відображає дані за допомогою таблиці даних
  • @ angular / material: materialNav: Створіть компонент із чуйним сиденом для навігації

Щоб скористатися цими компонентами для початківців, вам потрібно використовувати команду ng generated наступними способами:

$ ng утворює @ angular / material: materialNav - ім'я myNav
$ ng згенерувати @ angular / material: materialDashboard - ім'я моєї панелі
$ ng generated @ angular / material: materialTable - ім'я myTable

Наприклад якщо ви використовуєте першу команду для створення нового компонента myNav, ви повинні мати змогу побачити наступний вихід у командному рядку:

СТВОРИТИ src / app / my-nav / my-nav.component.css (110 байт)
СТВОРИТИ src / app / my-nav / my-nav.component.html (945 байт)
СТВОРИТИ src / app / my-nav / my-nav.component.spec.ts (605 байт)
СТВОРИТИ src / app / my-nav / my-nav.component.ts (481 байт)
ОНОВЛЕННЯ src / app / app.module.ts (795 байт)

До проекту додано чотири нові файли. Ці файли містять реалізацію навігаційного компонента Angular Material. MyNavComponent додано до масиву оголошень декоратора @NgModule в AppModule, так що компонент може бути використаний у нашій програмі Angular.

Щоб зробити його видимим для користувача, видаліть вміст файлу app.component.html за замовчуванням та просто вставте наступний елемент:

Це елемент, який використовується для включення виходу MyNavComponent у висновок, який представлений у браузері.

Почавши розробку веб-сервера з

$ ng сервер - відкрити

Ви повинні мати можливість бачити наступний результат:

Додавання маршрутизатора

Тепер, коли доступний макет навігації, ми можемо легко додати функцію Angular Router. У app.module.ts додайте наступне твердження про імпорт RouterModule та Routes:

імпорт {RouterModule, Routes} з '@ angular / router';

Далі додайте масив конфігурації маршрутизатора в той самий файл:

const appRoutes: Маршрути = [
  {шлях: 'перша сторінка', компонент: FirstPageComponent},
  {шлях: 'друга сторінка', компонент: SecondPageComponent},
  {шлях: 'третя сторінка', компонент: ThirdPageComponent}
];

Звичайно, FirstPageComponent, SecondPageComponent і ThirdPageComponent ще не доступні. Ми додамо ці компоненти в наступні кроки.

Для активації конфігурації маршрутизатора для нашої програми Angular нам потрібно переконатися, що додати RouterModule до імпорту-масиву @NgModule наступним чином:

імпорт: [
    ...
    RouterModule.forRoot (appRoutes),
    ...
  ],

Далі нам потрібно додати розетку маршрутизатора (місце, де вставляється вміст компонента маршруту) всередині -Element у файлі my-nav.component.html:

 

Крім того, нам потрібно оновити посилання в меню бічної панелі та використовувати директиву routerLink, щоб вказати на відповідні маршрути:


       Перша сторінка 
       Друга сторінка 
       Третя сторінка 
    

Нарешті, щоб змусити налаштувати маршрутизатор, додайте три компоненти за допомогою наступних команд:

$ ng генерує компонент FirstPage
$ ng генерує компонент SecondPage
$ ng генерує компонент ThirdPage

Використання інших кутових компонентів матеріалу

Досі ми використовували компонент навігаційного пускача у нашому додатку. Ви також можете використовувати будь-який з інших компонентів кутового матеріалу. Щоб отримати огляд доступних компонентів, перегляньте https://material.angular.io/components/categories.

На наступному кроці ми будемо використовувати компонент MatCard з бібліотеки Angular Material в одному з компонентів нашої сторінки (наприклад, FirstPageComponent).

Спочатку додайте імпорт MatCardModule у файл app.module.ts:

імпортувати {MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule} з '@ angular / material';

Додайте також до імпорту-масиву:

імпорт: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule,
    RouterModule.forRoot (appRoutes),
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule
  ],

Тепер ми готові використовувати компоненти MatCardModule в коді шаблону (наприклад, first-page.component.html):


  
    
     Shiba Inu      Порода собак   
  Фотографія Шиба Іну   <математична карта>     

      Шиба іну - найменша з шести оригінальних і виразних порід шпиц із Японії.       Невеликий, спритний собака, який дуже добре справляється з гірською місцевістю, спочатку був Шиба Іну       розводиться для полювання.     

          <кнопка мат-кнопки> LIKE     <кнопка мат-кнопки> СПОДІЛЕННЯ   

Вставте також CSS-код у first-page.component.css:

. приклад-картка {
  максимальна ширина: 400px;
}
.example-header-image {
  background-image: url ('https://material.angular.io/assets/img/examples/shiba1.jpg');
  фоновий розмір: обкладинка;
}

Усі інші компоненти Material Design з бібліотеки Angular Material можна використовувати аналогічно.

Ця публікація була опублікована першою на CodingTheSmartWay.com.

№1 Кутовий 6 - Повне керівництво

Освоїти Angular (Angular 2+, включаючи кутовий 6) та створити дивовижні, реактивні веб-програми з наступником Angular.js
Перейти на курс ...

Відмова: Ця публікація містить партнерські посилання, а це означає, що якщо натиснути одне із посилань на продукт, я отримаю невелику комісію. Це допомагає підтримати цей блог!