Главная » Статьи » Angular 5 — внутри компонентов

Angular 5 — внутри компонентов

Angular 5 CLI — первичная загрузка

От автора: статья из серии – создание простого веб-приложения на Angular 5. Цель – быстро создать работающее приложение, чтобы можно было углубиться в концепции ядра нового Angular. Прежде чем перейти к созданию нового компонента, необходимо узнать, как Angular компоненты выглядят в ядре, а также узнать синтаксис.

Первая часть — Angular 5 — первичная загрузка.

«По факту, вы должны уметь визуализировать любое Angular приложение в виде дерева компонентов, из которого состоит все приложение.» Наш лендинг отображает список покемонов вместе с верхним меню. Ниже представлен простой способ визуализации компонентов:

Angular 5 — внутри компонентов

Логическая ментальная группировка компонентов из макета сверху –

Компонент родительского контейнера, самый внешний блок. Всегда есть компонент оболочки, который содержит в себе все остальные дочерние элементы дерева компонентов.

Компонент top-navigation-bar, с помощью которого можно проводить маршрутизацию в приложении.

Компонент pokemon-list – отображает список одинаковых данных

Компонент each-pokemon – элемент из списка выше

Все станет понятнее, когда мы перейдем к их разработке, но вы хотя бы получили представление. Сначала взглянем на минимальные требования к компоненту. По умолчанию у нас есть компонент контейнера или оболочки, сгенерированный в папку src/app. Все наши компоненты будут иметь эти три файла –

*.component.ts — файл класса компонента

*.component.html — файл шаблона компонента

*.component.(s)css — файл стилей компонента

Как наш app.component.ts выглядит сейчас –

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:

{ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']
}

selector  — имя селектора компонента. С его помощью будем размещать компонент в нужном нам месте в HTML. Если открыть index.html, то этот компонент можно найти только в body.

<app-root></app-root>

templateUrl  — ссылка на html файл представления компонента. Шаблон также можно объявить инлайн с помощью свойства template, но кому это понадобится?

styleUrls  — массив имен файлов (s)css, на которые ссылается наш компонент. Это приватные стили компонент, не затрагивающие другие части приложения.

Наконец, объявляем класс компонента AppComponent. Также необходимо экспортировать класс компонента с помощью export, чтобы он был доступен там, где нам необходимо. Мы импортируем этот класс в app.module.

import { AppComponent } from './app.component';

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

Автор: Manish

Источник: https://medium.com/

Редакция: Команда webformyself.