Заметки о программировании и не только

Еще в Angular 16 появился оператор takeUntilDestroy() для RxJS подписок. Он существенно облегчает процесс работы с Observable. При подписке на Observable разработчик должен иметь в виду необходимость отписок при уничтожении компонента, чтобы предотвратить утечки памяти. Существует несколько методов, и все они требуют написания лишнего кода. Например, у нас есть подписка на сервис: export class Component implements OnInit { data; ngOnInit(): void { this.service.getData().subscribe( response => this...

Как включить HTTPS? Angular CLI предоставляет нам три параметра, которые мы можем передать вместе с командой ng serve для включения и настройки SSL. // enable or disable SSL --ssl <boolean: defaults to false> // path to root certificate --ssl-cert <string: defaults to "ssl/server.crt"> // path to private key --ssl-key <string: defaults to "ssl/server.key"> Пример №1 ng serve —-ssl true Пример №2 ng serve \ --ssl true \ --ssl-cert "/home/john/ssl/example.crt" \ --ssl-key "/home/john/ssl/example...

Давайте рассмотрим все новые функции, введенные в последнем релизе Angular 17.2, а так же изучим альтернативы декораторам @ViewChild, @ViewChildren, @ContentChild и @ContentChildren, которые заменяют декораторы с теми же названиями. Разберем, почему эти декораторы делают существующие хуки жизненного цикла AfterContentInit и AfterViewInit необязательными, а также рассмотрим новый API model(), который позволит нам осуществлять двустороннюю привязку данных с использованием сигналов. @ViewChild с использованием Signal-based Queries Начнем с обсуждения новой альтернативы декоратору @ViewChild...

Работая с Angular можно заметить, что шаблоны являются важной частью приложения. Благодаря гибкости шаблона и поддерживаемым им декларативным API, мы можем создавать современные и динамичные веб-приложения. В Angular 17 было введено множество функций, и одной из важных является новый синтаксис шаблона, известный как синтаксис @-notation, что привело к введению нескольких новых API в шаблон. Эти API дополняют синтаксис HTML шаблона, выделяясь среди них блок с именем "Deferrable Views" доступный через блок @defer...

В обновлении сборщика приложений в версии 17.1.0 были введены новые параметры загрузчика, что делает обработку файлов более простой и удобной. Эти параметры позволяют указать, как обрабатывать различные типы файлов. Вот краткий обзор доступных загрузчиков: Настройка этих загрузчиков проста. Например, чтобы встроить содержимое SVG в приложение, нужно изменить angular.json: { "architect": { "build": { "options": { "loader": { ".svg": "text" } } } } } Эта настройка встраивает файлы SVG как строки, устраняя необходимость во внешних запросах файлов для ваших графических элементов: import foo from '...

Начиная с Angular 15 появилась новая возможность: хост-директивы. Давайте начнем с примера: @Component({ selector: '...', host: { ... '[class.my-disabled-class]': 'disabled', '[attr.disabled]': 'disabled || null', '[attr.aria-disabled]': 'disabled || null', ... }, template: `...` }) class MyComponent { @Input() public disabled = false; // many other stuffs } Как можно улучшить этот код? Первая мысль - создать директиву. @Directive({ selector: '[myDisabledState]', standalone: true, host: { '[attr.disabled]': 'disabled || null', '[attr.aria-disabled]': 'disabled || null', '[class...

Сигналы имеют важное значение в разработке на Angular, поскольку открывают новые возможности. Например, Signal input упрощает создание вычисляемых сигналов, обеспечивая более эффективные процессы разработки. . В течение этого поста проиллюстрируем эти концепции на практических примерах, используя выдуманный API. Обязательный Signal Input // pokemon.component.ts import { ChangeDetectionStrategy, Component, input } from '@angular/core'; @Component({ selector: 'app-pokemon', standalone: true, imports: [PokemonCardComponent], ], template: ` <p>Pokemon id: {{ id() }}</p> <hr /> `, changeDetection: ChangeDetectionStrategy...

Часто бывает, что во время разработки сервер настроен не до конца и возиться с сертификатом - это последнее чем хочется заняться. Как правило, ошибка выглядит примерно так: Your connection is not private Attackers might be trying to steal your information from osinpaul.ru (for example, passwords, messages, or credit cards). Learn moreNET::ERR_CERT_INVALIDdevelop.localdev normally uses encryption to protect your information. When Google Chrome tried to connect to osinpaul.ru this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be osinpaul...

Как разработчики Angular, мы сталкиваемся с множеством проблем в нашей повседневной разработке. Одной из них является необходимость взаимодействия с JavaScript DOM в приложении Angular, например, с глобальным объектом window. Cчитается хорошей практикой преобразовывать объекты, не связанные с Angular, такие как объект window, внедряемыми зависимостями, а не использовать их напрямую. Разберемся почему. Фреймворк Angular кроссплатформенный, что означает, что он может работать в различных окружениях, таких как мобильные устройства и серверы...

Сигналы - горячая тема для обсуждений среди community. Я попытался разобраться, как с ними стоит работать и вот что получилось. Получился некий свод правил, с которым можно согласиться или нет. Не используйте сеттеры для входных данных, чтобы превращать их в сигналы Когда в версии 16 впервые появились сигналы, поддержка многих функций была ограничена (поскольку сами сигналы были экспериментальными). Например, нельзя было использовать сигналы в качестве входных данных для компонентов. Поэтому сообщество придумало обходной путь: использование сеттеров для превращения входных данных в сигналы. Идея...

При разработке веб-приложения возникают ситуации, когда необходимо добавить на страницу пользовательский HTML-код. Например, при использовании редактора rich-text мы можем захотеть отобразить HTML, сохраненный в базе данных. Однако в фреймворке Angular применяются стандартные меры безопасности, которые могут затруднить эту задачу. Если попытаться использовать функцию innerHTML DOM для добавления HTML на страницу, вы увидите сам HTML-код, а не его отображение. В этом руководстве мы рассмотрим встроенные меры безопасности Angular, которые предотвращают прямую вставку кода, объясним, почему они важны,...

В постоянно развивающемся мире веб-разработки Angular CLI продолжает дарить разработчикам новые возможности и улучшения. Одно из таких дополнений — опция define, представленная в версии 17.2.0-rc.0 в файле конфигурации angular.json, предлагая мощный инструмент для замены глобальных идентификаторов во время сборки. Давайте посмотрим, как эта функциональность может улучшить ваши проекты на Angular. Введение опции define Опция define в Angular CLI позволяет разработчикам заменять глобальные идентификаторы в своем коде на альтернативные значения во время сборки. Эта функциональность аналогична DefinePlugin...