Работа с ChangeDetectorRef.detach()
Для чего используется метод
Если забыли, то вернитесь к посту от10.02.2025 .
👉 @sWebDev
Для чего используется метод
ChangeDetectorRef.detach()
?Если забыли, то вернитесь к посту от
👉 @sWebDev
👍3
Для чего используется метод ChangeDetectorRef.detach()?
Anonymous Quiz
9%
Удаляет компонент из DOM.
17%
Сбрасывает все изменения в компоненте.
18%
Запускает систему обнаружения изменений.
55%
Отключает компонент от системы обнаружения изменений.
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Часто отвлекаетесь на что-то в компе?
👍 - Постоянно.
❤️ - Нет, только если в перерывах.
🤔 - Скорее отвлекаюсь на код.
👉 @sWebDev | #юмор
👍 - Постоянно.
❤️ - Нет, только если в перерывах.
🤔 - Скорее отвлекаюсь на код.
👉 @sWebDev | #юмор
👍20❤4🤔1
Создание реактивных форм без FormBuilder
В Angular для работы с реактивными формами часто используют
При создании формы каждый элемент добавляется в
Пример:
👉 @sWebDev
В Angular для работы с реактивными формами часто используют
FormBuilder
, но создать форму можно и вручную с помощью new FormGroup()
и new FormControl()
. При создании формы каждый элемент добавляется в
FormGroup
через new FormControl()
, где первый аргумент — это начальное значение поля. Также можно динамически добавлять или удалять контролы с помощью методов addControl()
и removeControl()
.Пример:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
template: `
<form [formGroup]="loginForm">
<input formControlName="email" placeholder="Email">
<input formControlName="password" type="password" placeholder="Пароль">
</form>
`
})
export class LoginComponent {
loginForm = new FormGroup({
email: new FormControl(''),
password: new FormControl('')
});
}
👉 @sWebDev
👍4
Mustache.js
Mustache.js – это легковесный шаблонизатор для JavaScript, использующий синтаксис двойных фигурных скобок (
👉 @sWebDev
Mustache.js – это легковесный шаблонизатор для JavaScript, использующий синтаксис двойных фигурных скобок (
{{}}
). Он позволяет динамически генерировать HTML, заменяя плейсхолдеры в шаблоне переданными данными. Mustache.js не имеет логики (условий, циклов), что делает его простым и универсальным.👉 @sWebDev
👍3👎1🤔1
Микрофронтенды с Angular и Native Federation
Микрофронтенды позволяют разбить большое приложение на независимые модули, ускоряя разработку и упрощая поддержку. Статья объясняет, как внедрить этот подход в Angular с помощью Native Federation — встроенного механизма для динамической загрузки модулей. Разбираются преимущества, сложности и реальные сценарии использования, полезные для масштабных проектов.
👉 @sWebDev
Микрофронтенды позволяют разбить большое приложение на независимые модули, ускоряя разработку и упрощая поддержку. Статья объясняет, как внедрить этот подход в Angular с помощью Native Federation — встроенного механизма для динамической загрузки модулей. Разбираются преимущества, сложности и реальные сценарии использования, полезные для масштабных проектов.
👉 @sWebDev
👍3
Media is too big
VIEW IN TELEGRAM
Shader-Driven Parametric Glow Shape
Анимация параметрической светящейся формы с шейдерами на Three.js.
👉 @sWebDev
Анимация параметрической светящейся формы с шейдерами на Three.js.
👉 @sWebDev
👍3
Gremlins.js
Gremlins.js – это инструмент для тестирования интерфейсов, который эмулирует случайные действия пользователя, такие как клики, свайпы и ввод текста. Он помогает выявлять неожиданные баги и проблемы с производительностью веб-приложений, имитируя хаотичное поведение пользователей.
👉 @sWebDev
Gremlins.js – это инструмент для тестирования интерфейсов, который эмулирует случайные действия пользователя, такие как клики, свайпы и ввод текста. Он помогает выявлять неожиданные баги и проблемы с производительностью веб-приложений, имитируя хаотичное поведение пользователей.
👉 @sWebDev
👍3
Деплой Next.js приложения с Deno Deploy
Туториал о поднятии приложения Next.js с использованием Deno Deploy: преимущества и шаги для интеграции технологий.
👉 @sWebDev
Туториал о поднятии приложения Next.js с использованием Deno Deploy: преимущества и шаги для интеграции технологий.
👉 @sWebDev
🔥3
Разрешение циклических зависимостей между провайдерами
В Angular при наличии циклических зависимостей между провайдерами нельзя напрямую указывать сервис в качестве зависимости другого.
Для отложенного определения зависимостей используется
Метод
Пример:
👉 @sWebDev
В Angular при наличии циклических зависимостей между провайдерами нельзя напрямую указывать сервис в качестве зависимости другого.
Для отложенного определения зависимостей используется
forwardRef()
, который позволяет ссылаться на провайдер до его фактического объявления. Однако внутри DI-контейнера такой провайдер остается обернутым в forwardRef()
. Метод
resolveForwardRef()
используется для разворачивания ссылки, если она была передана через forwardRef()
. Это позволяет явно получить оригинальное значение до его использования. Пример:
@Injectable()
export class ServiceA {
constructor(@Inject(forwardRef(() => ServiceB)) private serviceB: ServiceB) {}
}
@Injectable()
export class ServiceB {
constructor(@Inject(forwardRef(() => ServiceA)) private serviceA: ServiceA) {}
}
// Использование resolveForwardRef
const resolvedRef = resolveForwardRef(forwardRef(() => ServiceA));
// resolvedRef теперь содержит прямую ссылку на ServiceA
👉 @sWebDev
👍4
Chroma.js
Небольшая JavaScript-библиотека без зависимостей (размером около 13,5 КБ), предназначенная для различных цветовых преобразований и создания цветовых шкал. Позволяет считывать цвета из различных форматов, анализировать и манипулировать ими, а также генерировать цветовые палитры для визуализации данных.
👉 @sWebDev
Небольшая JavaScript-библиотека без зависимостей (размером около 13,5 КБ), предназначенная для различных цветовых преобразований и создания цветовых шкал. Позволяет считывать цвета из различных форматов, анализировать и манипулировать ими, а также генерировать цветовые палитры для визуализации данных.
👉 @sWebDev
👍3
Почему я не буду использовать JSDOM
В статье автор анализирует историю и ограничения JSDOM — библиотеки, созданной в 2010 году для эмуляции браузерной среды в Node.js. Несмотря на её популярность в тестировании фронтенд-кода, JSDOM сталкивается с проблемами несовершенной эмуляции браузера в Node.js, что приводит к ошибкам при обработке событий. Автор предлагает отказаться от использования JSDOM в пользу современных инструментов, обеспечивающих более точное соответствие реальным условиям работы приложений.
👉 @sWebDev
В статье автор анализирует историю и ограничения JSDOM — библиотеки, созданной в 2010 году для эмуляции браузерной среды в Node.js. Несмотря на её популярность в тестировании фронтенд-кода, JSDOM сталкивается с проблемами несовершенной эмуляции браузера в Node.js, что приводит к ошибкам при обработке событий. Автор предлагает отказаться от использования JSDOM в пользу современных инструментов, обеспечивающих более точное соответствие реальным условиям работы приложений.
👉 @sWebDev
🔥3