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

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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

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

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

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

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

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

Стоит заметить:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Чтобы создать компонент, необходимо импортировать символ Component из библиотеки ядра Angular.

Далее необходимо добавить аннотацию к классу компонента с помощью декоратора @Component, передав необходимый объект с метаданные для компонента.

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

Передаем объект метаданных ниже в декоратор Component:

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

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

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

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

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

Автор: Manish

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree