Как работать с компонентами и роутингом в Angular

В прошлый я показал, как можно начать работать с приложением Angular, если пропустил глянь. В целом я показал все что нужно знать для того, чтобы успешно запустить Angular приложение у себя на компьютере. И вот когда у нас с тобой есть уже установленное приложение, которое успешно запускается, можно перейти к следующим шагам.

На счет выбора редактора тут без разницы, лучший с которым удобно создавать большие проекты это webstorm (или PhpStorm), но я сейчас использую для примера Sublime Text 3, почитай про выбор текстовых редакторов.

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

Касательно роутинга, я покажу самый простой вариант подходящий для простых проектов. Но в свой курс я позже включу более сложный и более удобный вариант.

Создание компонента в Angular

Итак если ты еще не запустил свой первый и чистый проект, то сделай это сейчас. Переходим в папку нашего проекта и сделать это можно с командой cd вот пример:

И запускаем сам проект с помощью команды ng serve.

Вот как это выглядит. Дальше проект запущен и мы его можем увидеть по стандартному пути http://localhost:4200/. Дальше проект запущен, а мы видим стандартный экран, давайте его отчистим так как разработчики Angular постарались и без меня поставить множество подсказок о том, как начать проект.

anglar generate component

Кстати, это как раз то, что нам нужно, чтобы создать новый компонент, что мы сейчас и сделаем, для этого нужно закрыть запуск проекта, а чтобы это сделать нужно зажать в командной строке ctrl+c на что Angular задаст вопрос «Завершить выполнение пакетного файла [Y(да)/N(нет)]?», там нужно вписать „y” ну и все.

Дальше вводим следующую команду:

ng generate component xyz

Где:

  • ng – обращение к Angular
  • generate (или просто g) – команда о том, что мы хотим делать если быть точнее мы хотим генерировать что-то новое.
  • component (или просто c) – вот тут мы указываем, что мы хотим генерировать
  • xyz (может быть что-то другое) – это имя компонента который мы хотим сгенерировать

Из всего что я написал выше я создаю компонент и как я в скобочках писал мы можем сделать следующую запись:

ng g c header

Как вы поняли, я хочу добавить свою шапку в проекте, а в ней будет несколько ссылок.

Angular создать компонент header

Вот так это выглядело, мы создали компонент, который стандартно состоит из четырех файлов:

  • Html – файл который будет содержать весь html, который будет выводиться в нашем компоненте.
  • SCSS – файл стилей, который привязан лишь к данному компоненту. Он не есть глобальным потому, всегда стоит это учитывать (глобальный можно создать отдельно). Если не умеешь работать с scss, глянь это.
  • TS – typescript файл в котором у нас будет находиться вся логика нашего компонента. В нем мы будем хранить всякие функции и тому подобное.
  • spec.ts – файл тестов которые я никогда не использую, хорошо это или плохо, это я уже решу для себя, правда с точки зрения программирования правильнее их создавать, хотя все четко работает и без них.

Хочу так же обратить твое внимание на то, что мы имеем на картинке выше, а именно 4 файла с пометкой create, и один файл с пометкой update. Это значит, что, создав компонент мы получили 4 новых файла, а также обновили что-то в файле src/app/app.module.ts, давайте глянем, что именно изменилось:

Как подключить компонент Angular

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

Подключение компонента внутри других компонентов

Тема подключение компонента внутри других компонентов не так огромна, но все же там есть, о чем поговорить. Давайте подключим наш Header к основному приложению, которое создалось изначально. Для этого переходим к файлу app.component.html, открываем его и удаляем содержимое, которое считаем лишним.

Лично я удалю все содержимое кроме одного тега:

<router-outlet></router-outlet>

Получается вот такая картинка:

Настроить роутинг Angular

Что  такое router-outlet?

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

Пока мы его оставим у себя на странице и продолжим подключение header к нашему приложению Angular.

Чтобы видеть все наглядно, переходим в папку header и открываем файл header.component.ts и смотрим на строку с свойством selector.

Как задать селектор Angular

С помощью этого свойства точнее его значения мы будем подключать этот компонент в других компонентах, потому копируем его и вставляем в виде тега внутри app.component вот таким образом:

Вывод компонента ангулар

Если ты еще не успел глянуть на содержимое header.component.html, то можешь глянуть, а я тем временем запускаю приложение, если то содержимое отобразится успешно, значит у тебя все получилось правильно.

рабочий компонент ангулар

Запустив приложение видим такую картинку – если ты так же это видишь у себя, значит все сделано максимально правильно. Можем туда добавить какой-то свой html ну и чтобы закрепить все, добавляем и footer.

Так мы точно сделаем свою страничку на Angular.

Я решил сверстать простенький footer и header – для того чтобы продолжить урок и перейти к теме роутинга.

Можешь скачать его либо сделать свои – желательно конечно сделать свои так как опыт и практика помогут тебе развиваться дальше.

Шаблоны и стили компонента

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

Angular реально хорош тем, что отображает только те вещи которые нужны пользователю, а лишнее просто убирает, все-таки зачем отображать лишнее? Да и сразу просеивается количество полезных программ для верстки но все же некоторые из них будут очень нужны.

Если я создам 10 разных компонентов, но отображу на главной странице лишь 5 из них, то код и css тех неиспользованных файлов мы просто не найдем в коде, что на много облегчает сайт помимо того, как работает само SPA приложение.

html и css в angular

На картинке я выделил отдельно html и scss файлы, те два файла которые имеют название Index.html и style.scss это файлы из которых можно сказать берется начало. Если style.scss является глобальным файлом в котором можно хранить абсолютно все стили, то index.html тот файл с которого просто все начинается. В него же мы и подключаем app-root, думаю ты знаешь, как это глянуть, но я покажу, чтобы это было наглядно:

отображение app-root angular

Тут все очень просто.

Касательно стилей, там немного сложнее, но при этом тоже все достаточно просто. Я при верстке своей простенькой шапки и футера постарался зацепить некоторые моменты, которые полезно знать.

К примеру в style.scss я дал стили для тега body, чего я бы не смог сделать внутри app.component.scss и тем более если идти глубже.

body {
  background: #ddd;
}

Еще раз повторюсь, если ты еще не создал свою шапку и футер постарайся сделать это сам, но при этом обязательно поглядывай в мой код – так тебе будет намного проще.

Хочется подметить, что Angular вместе со своим Angular CLI компилирует весь scss сам, ведь как мы знаем в других случаях требуется делать это практически вручную.

Дальше, в app.component.scss я задал сетку grid для селекторов наших компонентов, так тоже можно делать. Хотя анализаторы ошибок в текстовых редакторах могут ругаться.

Задаем стили компонентам

Тут у меня Sublime text ругается мол нет таких тегов в html, но все работает на ура.

Ну а дальше если смотреть, то все работает так же, все стили к header пишем в header ну и так дальше. Кстати бывает иногда потребность внутри какого-то компонента вывести стиль на порядок выше. Это делает с помощью ::ng-deep, если хочешь можешь поискать в интернете что это такое и как оно работает, я об этом напишу немного позже.

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

  • Стили и шаблоны присваиваются внутри typescript компонента
  • Стили и шаблоны не должны быть обязательно вынесены в отдельный файл
  • Одному компоненту можно присвоить несколько scss файлов.
Вывод нескольких стилей в компоненте Angular

В целом все, дальше мы еще не раз будем возвращаться к этой теме.

Простой способ сделать роутер для переключения между страничками (Angular Route)

Дальше я хочу создать две дополнительные страницы, которые покажу как мы можем сделать простой роутинг на сайте. Тема достаточно огромная, но я покажу тот самый минимум который нужно знать.

Для начала создаем четыре компонента, те, которые будут основными компонентами и отображать определенную информацию. Почему четыре?

  • Страница контакты;
  • Страница о сайте;
  • 404 для вдруг если такой странички не существует;
  • Главная страница (там можно делать лендинг какой-то).

В общем странички созданы, внутри папки app, я создал папку components, дальше в командной строке я перешел в эту папку, и с помощью ng g c <name>, я создал нужные мне компоненты. Получилась вот такая картина:

В целом все пути прописаны, так как я пользовал автоматическое создание компонентов. Дальше мне потребуется файл app-routing.module.ts.

В нем внутри массива routes, нам нужно добавить пути и компоненты, которые будем отображать на сайте. Вот что у меня вышло:

Роутинг в Angular

Файлы я прикреплю немного ниже. Когда у нас все будет готово, давайте проверим как оно работает.

Лично у меня оно отлично заработало, вот собственно скриншот решил сделать серию чтобы можно было увидеть:

Routs и ссылки в Angular

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

<a href="/" >Main</a>

Но слово можем это только в том смысле что мы не получим ошибок. Но в плане работы с Angular это неправильно так как каждый раз при нажатии на ссылку сервер браузер будет делать запрос к серверу и выгружать ссылку целиком что в принципе очень и очень неправильно для реактивных приложений типа Angular и React!

В нашем приложении правильно делать такую ссылку:

<a routerLinkActive="active" routerLink="/" [routerLinkActiveOptions]="{exact: true}">Main</a>

Где:

  • routerLinkActive="active" — присваивает класс active всем активным ссылкам;
  • routerLink="/" – ссылка которую нужно указывать для перехода на нее (аналог href);
  • [routerLinkActiveOptions]="{exact: true}" – обозначаем что нам нужно выделять точную ссылку, если этот параметр не использовать, то выделится и ссылка на главную страницу как активная, если вложенность больше, то и все его категории тоже.

Таким образом имея все эти данные описанные в статье можно создать максимально простой сайт, который будет работать достаточно быстро и при этом качественно. Правда сразу оговорюсь это не тот уровень, к которому мы все стремимся, а значит в следующих уроках мы более детально разберемся как можно передавать данные с шаблона в компонент и обратно, а также что такое директивы, и как они работают.

Как я и обещал предлагаю ссылочку на все файлы с которыми мы работали в рамках этой статьи – обязательно пересмотрите их и если что-то не выходит или не получается, то предлагаю подглядывать целью понять, как это работает. Либо я с радостью буду отвечать на все вопросы, которые у тебя возникнут!

Если тебе понравилась эта статья, то буду очень рад твоему царскому репосту, либо комментарию благодарности. Кроме того, если все-таки было полезно, то просто сохрани эту статейку себе в закладки – не забудь, а то полезные ссылочки всегда теряются!

Кстати, ты можешь так же подписаться на рассылку по Angular (и только Angular).

Каждый раз когда я буду делать новый урок по Angular я буду присылать емейл извещение - спасить лишним не собираюсь!

Оставьте комментарий