Angular *

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

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

Как вы уже наверно знаете, Angular уже есть во многих платформах:

• Ionic (https://ionicframework.com/)
• NativeScript (https://www.nativescript.org/)
• NestJs (https://nestjs.com/)
• Universal (https://github.com/angular/universal)
• Platform-terminal, консольное приложение (https://github.com/Tibing/platform-terminal)

Ну и, конечно, здесь не хватало десктопа (не будем пока про Electron).

На сегодняшний день написано очень много статей о том, что от подписок Observable RxJS надо отписываться, иначе произойдет утечка памяти. У большинства читателей таких статей в голове отложилось твёрдое правило "подписался? — отпишись!". Но, к сожалению, зачастую в подобных статьях информация искажается или что-то недоговаривается, а ещё хуже когда подменяются понятия. Об этом и поговорим.

Как управлять файлами конфигурации среды и целями

Когда вы создали angular приложение с помощью Angular CLI или Nrwl Nx tools у вас всегда есть папка с фалами конфигурации окружения:

<APP_FOLDER>/src/environments/
                       └──environment.ts
                       └──environment.prod.ts

Практическая пошаговая инструкция как прикрутить динамическую локализацию (возможность выбора языков) в веб приложении на Angular 4+ используя @ngx-translate/core.

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

Введение

Когда работаешь над библиотекой переиспользуемых компонентов, вопрос API встает особенно остро. С одной стороны, нужно сделать надежное, аккуратное решение, с другой — удовлетворить массу частных случаев. Это относится и к работе с данными, и к внешним особенностям различных кейсов использования. Кроме того, все должно легко обновляться и раскатываться по проектам.

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

Здравствуйте, меня зовут Максим. Уже несколько лет я занимаюсь front-end разработкой. Мне часто приходится иметь дело с версткой различных html шаблонов. В своей повседневной работе я обычно пользуюсь сборщиком webpack c настроенным шаблонизатором pug, а также использую методологию BEM. Для того чтобы облегчить себе жизнь использую замечательный пакет.

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

Кому интересно как я все это провернул добро пожаловать под кат.

Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.

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

У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.