От автора: статья из серии – создание простого веб-приложения на Angular 5. Цель – быстро создать работающее приложение, чтобы можно было углубиться в концепции ядра нового Angular. Прежде чем перейти к созданию нового компонента, необходимо узнать, как Angular компоненты выглядят в ядре, а также узнать синтаксис.
Первая часть — Angular 5 — первичная загрузка.
«По факту, вы должны уметь визуализировать любое Angular приложение в виде дерева компонентов, из которого состоит все приложение.» Наш лендинг отображает список покемонов вместе с верхним меню. Ниже представлен простой способ визуализации компонентов:
Логическая ментальная группировка компонентов из макета сверху –
Компонент родительского контейнера, самый внешний блок. Всегда есть компонент оболочки, который содержит в себе все остальные дочерние элементы дерева компонентов.
Компонент top-navigation-bar, с помощью которого можно проводить маршрутизацию в приложении.
Компонент pokemon-list – отображает список одинаковых данных
Компонент each-pokemon – элемент из списка выше
Все станет понятнее, когда мы перейдем к их разработке, но вы хотя бы получили представление. Сначала взглянем на минимальные требования к компоненту. По умолчанию у нас есть компонент контейнера или оболочки, сгенерированный в папку src/app. Все наши компоненты будут иметь эти три файла –
*.component.ts — файл класса компонента
*.component.html — файл шаблона компонента
*.component.(s)css — файл стилей компонента
Как наш app.component.ts выглядит сейчас –
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } |
Стоит заметить:
Чтобы создать компонент, необходимо импортировать символ Component из библиотеки ядра Angular.
Далее необходимо добавить аннотацию к классу компонента с помощью декоратора @Component, передав необходимый объект с метаданные для компонента.
Javascript все еще предлагает декораторы, но концептуально это всего лишь еще одна функцию, оборачивающая другую функцию для усиления. На данный момент в typescript эта функция реализована как экспериментальная, в будущем она может измениться.
Передаем объект метаданных ниже в декоратор Component:
|
1 2 3 4 5 |
{ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] } |
selector — имя селектора компонента. С его помощью будем размещать компонент в нужном нам месте в HTML. Если открыть index.html, то этот компонент можно найти только в body.
|
1 |
<app-root></app-root> |
templateUrl — ссылка на html файл представления компонента. Шаблон также можно объявить инлайн с помощью свойства template, но кому это понадобится?
styleUrls — массив имен файлов (s)css, на которые ссылается наш компонент. Это приватные стили компонент, не затрагивающие другие части приложения.
Наконец, объявляем класс компонента AppComponent. Также необходимо экспортировать класс компонента с помощью export, чтобы он был доступен там, где нам необходимо. Мы импортируем этот класс в app.module.
|
1 |
import { AppComponent } from './app.component'; |
Это лишь базовые части компонента Angular. Существует множество других важных функцию, которые мы рассмотрим во время разработки компонентов. Мы настроили площадка и узнали, как работает компонент Angular. Теперь давайте создадим наш первый компонент.
Автор: Manish
Источник: //medium.com/
Редакция: Команда webformyself.
