Обновить
21.45

Angular *

JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Тварь ли я дрожащая или право имею? Берем чужие сайты под свой контроль. Часть 2 — Пользовательские скрипты в Chrome

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели7.4K

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

Читать далее

Интеграция внешнего сервера авторизации https://authorizer.dev в фулстек приложение на NestJS и Angular

Время на прочтение33 мин
Охват и читатели839

В этой статье я подключу в проект внешний сервер авторизации https://authorizer.dev и напишу дополнительные бэкенд и фронтенд модули для интеграции с ним.

Код будет собран для запуска через Docker Compose и Kubernetes.

Читать далее

Зачем нам Node.js или Angular на бэкенде

Время на прочтение6 мин
Охват и читатели5.5K

Всем привет! Меня зовут Александр, я разрабатываю low-code платформу Eftech.Factory в компании Effective Technologies. В этой статье я хочу поделиться тем, как и почему в стеке нашего продукта появился Node.js. Рассмотрим одно из основных преимуществ Node.js (внезапно это JavaScript) и то, как он помогает нам сэкономить время в два раза на разработку и сопровождение.

Из-за названия статьи может возникнуть путаница: чаще всего, когда речь идет об Angular на бэкенде, подразумевается Server Side Rendering (SSR). Однако в данной статье мы не будем обсуждать SSR, а сосредоточимся на переиспользовании кода и использовании Angular на бэкенде. Давайте начнем! 

Читать далее

Знакомьтесь: input, output и model. Новые функции в Angular

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели5.8K

Привет всем! Меня зовут Егор Молчанов, я разработчик в компании Домклик.

Хочу рассказать вам о новых функциях Angular: input(), output() и model(). Они появивились сравнительно недавно и обещают в скором времени заменить привычные нам декораторы @Input и @Output. Разберëм, что они собой представляют, как использовать на практике, и как связаны с концепцией сигналов. Поехали!

Читать далее

linkedSignal: управлять связанным состоянием теперь ещё проще

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели2.1K

Бу! Испугался? Не бойся. Angular 19 уже не за горами и представляет новый мощный примитив, называемый linkedSignal, который поможет вам управлять сложным состоянием в ваших приложениях. Это альтернатива использованию effect для простого обновления сигнала на основе изменения другого сигнала. В прошлом мы видели, как сообщество обсуждало, чтобы избегать использования effect и вместо этого использовать computed для сброса сигналов на основе изменения другого сигнала.

Читать далее

Front-end глазами back-end разработчика

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели2.4K

Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.

В итоге практика написания скриптов на VBScriptSCADA Cimplicity был на тот момент только этот язык для написания сценариев, как и во многих других пакетах), с использованием Win32API, проект на Delphi с использованием Mutex и Semaphore, первый проект и вроде даже не один на Visual C++ MFC, поддержка и отладка проектов на Borland C++ и С++ Builder, с нуля созданный портал на PHP (спасибо коллеге Антону - это была его идея, чтобы не дописывать проект на умирающем уже на тот момент Delphi, хотя он вроде функционирует до сих пор), ну и самое главное, что появился опыт работы с MS SQL (почему-то нам его даже в университете не преподавали).

На следующем месте работы было более глубокое погружение в MS SQL, так как вся бизнес-логика была реализована на нём, и знакомство с Visual C# и .NET Framework, так как на нем был клиент написан на WinForms. Так же не первый опыт работы с OPC.

Но проект заканчивался, а новых пока там не планировалось, поэтому в следующей организации было знакомство с ASP.NET WebForms и, помимо MS SQL, уже и с Oracle DB. Всё было на примитивном уровне, опять сбор данных, хранение, отображение. Там было реализовано своеобразное хранение и отображение данных по сменам рабочих с помощью рекурсий на T-SQL.

Читать далее

Создание пользовательского интерфейса для модуля Webhook с помощью Angular

Время на прочтение26 мин
Охват и читатели739

Cоздание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https://ng.ant.design, формы создаются и управляются с помощью https://formly.dev, для стилей используется https://tailwindcss.com, стейт машины нет.

Читать далее

Мощь CSS-масок

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели8.5K

Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!

В статье я кратко напомню основные теоретические идеи свойства и подробно расскажу о реальных примерах использования на основании опыта разработки Taiga UI.

Читать далее

RxJS Interop в Angular 18: основные изменения и преимущества

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели2.7K

✏️ 🔥 Я написал новую статью об одной из интересных функций в Angular 18: RxJS Interop. В статье рассматривается, как RxJS Interop эволюционировал с Angular 16 до 18, какие новые возможности он приносит и как его можно использовать в вашем коде.

🚀 Если вы разработчик Angular и хотите улучшить свои реактивные паттерны, эта статья для вас!

✨ Основные моменты:

- 🔄 Бесшовная конвертация между Signals и Observables.

- 📉 Оптимизированная производительность для управления реактивным состоянием.

- 💡 Использование операторов RxJS напрямую с Signals для упрощения и улучшения читаемости кода.

- 🔥 Упрощение интеграции с Firestore с помощью Signals для синхронной реактивности и более простого управления состоянием.

Читать далее

Как использовать менеджер состояний NgRx для Angular-проектов

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели2.7K

Всем привет! Меня зовут Ильмир, я frontend-разработчик SimbirSoft. Это моя первая статья, в которой я хотел бы разобрать тему менеджера состояний в Angular.

Читать далее

Тварь ли я дрожащая или право имею? Берем чужие сайты под свой контроль. Часть 1 — Chrome расширение на Angular 18

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели13K

Как многие сказки начинаются с уже привычных фраз «жили‑были...» или «в некотором царстве, в некотором государстве...», так многие пет‑проекты или просто творческие эксперименты, опыты программиста начинаются с фразы «дело было вечером, делать было нечего...». Точно так же и в моем случае — появилось свободное время, так почему бы не потратить его с пользой?

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

Цель минимум — повторить базовый функционал уже существующих решений, цель максимум — добавить новый функционал и внести те изменения, которых мне не хватает. Весь процесс буду выкладывать на GitHub, проект полностью открытый и свободный.

Читать далее

Angular Roadmap

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели1.8K

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

Читать далее

Angular Signals Implementation

Уровень сложностиСложный
Время на прочтение12 мин
Охват и читатели1.9K

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

Читать далее

Ближайшие события

Как улучшить производительность в Angular с помощью Memoize Pipe

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели870

Angular — это мощный инструмент для создания сложных веб-приложений. Но, как и в любом другом фреймворке, возникают свои сложности. Одна из таких проблем — это частые перезапуски тяжелых функций в шаблонах, что сильно бьет по производительности. Если приложение начинает тормозить, значит пора задуматься об оптимизации. И здесь на помощь приходит Memoize Pipe, способный спасти ваш интерфейс от лишних вычислений.

Читать далее

Добавляем lint-staged в NestJS и Angular приложения, включаем семантическое версионирование фронтенда

Время на прочтение14 мин
Охват и читатели835

Так как версионирование через плагин nx-semantic-release происходит путем анализа изменений по связанным Typescript-импортам, то нам нужно минимизировать эти изменения, для этого в проект подключаем lint-staged и добавляем строгости в Typescript-код.

Читать далее

Семантическое версионирование NestJS и Angular приложений в NX-монорепозитории

Время на прочтение4 мин
Охват и читатели520

Подключение и настройка nx-semantic-release плагина для NX-монорепозитория для автоматического создания релиза с последующим деплоем приложений.

Читать далее

Доступ к сайту на NestJS и Angular по доменному имени c SSL — сертификатом в Kubernetes через Ingress

Время на прочтение9 мин
Охват и читатели659

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

Читать далее

Установка Kubernetes через MicroK8s и настройка деплоя NestJS и Angular приложений

Время на прочтение15 мин
Охват и читатели1.7K

Когда в команде нет DevOps - инженеров, но очень хочется задеплоить приложение в Kubernetes, можно легко это сделать с помощью https://microk8s.io, в данном посте я опишу как это сделать и открыть доступ к приложению на определенном порте.

Читать далее

Ускорение деплоя NestJS и Angular с помощью общественных Github-раннеров и создания промежуточных Docker-образов

Время на прочтение42 мин
Охват и читатели668

В этом посте я настрою сборку Docker-образов: Билдер NestJS и Angular приложений; Мигратор баз данных с помощью Flyway; Тест-раннер для запуска фронтенд и бэкенд E2E-тестов; Nginx c встроенной статикой Angular приложения; NestJS приложение.

Читать далее

Как я сделал платформу коротких видео в Telegram Mini Apps

Уровень сложностиПростой
Время на прочтение17 мин
Охват и читатели7.6K

Недавно я поехал на море с другом. Во время пути мы узнали, что YouTube собираются блокировать (или замедлять). Тут в моей голове родилась идея: почему бы не сделать видеохостинг в Telegram? Я поспорил с другом, что сделаю его по дороге, но ноутбук сел. Поэтому мы договорились, что я сделаю это за день (спойлер: получилось, но кривовато).

Читать далее