![](https://webcf.waybackmachine.org/web/20211006102357im_/https://habrastorage.org/getpro/habr/upload_files/5ca/584/47a/5ca58447ad4d4ca8e8f3dae4412b46cb.png)
В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.
JavaScript-фреймворк
В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.
Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.
Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.
Вам когда-нибудь хотелось отобразить состояние загрузки, пока ngIf
ждет ответа от async
-пайпа? Или, может, вы мечтали передать в ngFor
шаблон для пустого массива? Возможно, вы бросили это, потому что вам не хотелось реализовывать базовую логику этих директив самому. На самом деле в этом нет нужды! Один и тот же селектор может подцепить несколько директив, что позволяет расширить функциональность встроенных директив дополнительной логикой.
Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.
Сегодня посмотрим на более хитрые трюки с такими директивами-контроллерами и попробуем сделать метаконтроллер, который, в свою очередь, состоит из других контроллеров. Все это будет происходить в рамках безграничных возможностей Dependency Injection в Angular.
В этой статье приведу заметки к релизу Angular 13. Рассмотрим предложения по шаблонам которую будут рассматривать в Angular Team в ближайшем митинге.
Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на Angular, ряд на React. Пользователи систем в зависимости от этапа бизнес-процесса и роли взаимодействует с определенным продуктом. Часто, в рамках бизнеса мы должны показывать одни и те же данные в разных продуктах. Эти данные отображаются в виде UI компонентов.
В этой статье мы узнаем как можно организовать библиотеки компонентов для решения задач бизнеса. Научимся переиспользовать и запускать React библиотеку внутри Angular. Таким способом мы сможем решать задачи бизнеса гибко и эффективно.
Первое, что нужно понять об операторах, - это почему они существуют. Они существуют, потому что observables как тип позволяют нам обрабатывать события (или значения во времени) как множества или набор вещей.
Говоря более просто, любое четко определенное множество будет иметь операции, которые могут быть выполнены с ним, которые могут преобразовать его в новое множество того же типа. Например, предположим, что у нас есть грузовик с яблоками. Мы могли бы превратить его в грузовик с нарезанными яблоками с помощью машины для нарезки яблок. Та же самая машина для нарезки яблок затем может быть использована на любом грузовике с яблоками, чтобы превратить их в грузовик, загруженный нарезанными яблоками. В этом случае машина для нарезки яблок будет считаться «оператором», который сопоставляет яблоки с ломтиками яблок. Точно так же мы могли бы иметь грузовик с сахаром, мукой, яйцами и т. д. И объединить их с грузовиком с ломтиками яблока, чтобы сделать грузовик с яблочными пирогами, используя какую-то машину для производства пирогов. Итак, в этом примере грузовик - это тип множества, машина для нарезки яблок или машина для изготовления пирогов будут «операторами», а сахар, яблоки, ломтики яблок, яйца и т. д. Будут просто значениями, переносимыми нашим типом множества.
В этой статье я опишу как написать тесты для компонентов Angular приложения, используя инструменты которые предлагает нам Angular из коробки.
Проекция контента — одна из базовых возможностей Angular, о которой слышали почти все. А с недавних пор по ней появилась и хорошая официальная документация. Тем не менее в реальных задачах разработчики часто обходят ng-content стороной, прибегая к более сложным и перегруженным решениям и усложняя дальнейшее использование и поддержку компонента.
В этой статье я хотел бы показать несколько типовых кейсов для ng-content при разработке многократно используемых компонентов. А еще — рассказать о преимуществах, которые они могут нам дать.
Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.
Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.
Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?
Доброго времени суток, уважаемые хабровчане.
Здесь я хочу представить вам цифровой сервис "Google Product Taxonomy Viewer".
Это позволяет пользователю просматривать данные таксономии продуктов Google. Пользователь может выбрать желаемую страну и язык. Также можно сортировать и искать данные по полям «имя» и «идентификатор».
Данные «Таксономии продуктов» представлены в компоненте «Древовидный список», что обеспечивает гибкий пользовательский интерфейс.
Чтобы использовать данный программный продукт, необходимо зарегистрироваться, а затем войти в веб-приложение.
Чтобы зарегистрироваться в сервисе, перейдите по ссылке.
Можно зарегистрироваться с помощью электронной почты пользователя, учетной записи пользователя в Google или учетной записи пользователя в Facebook.
После успешной аутентификации, чтобы увидеть веб-страницу «Google Product Taxonomy Viewer», необходимо перейти по ссылке.
Итак, как выглядит эта страница? Вы можете увидеть скриншот ниже на картинке.
Drag & drop - одна из функций, которая может быть очень полезна для пользователей нашего приложения. Кроме того, это отличный пример, показывающий, как RxJS можно использовать для простой реализации функционала перетаскивания. Давайте посмотрим, как мы можем это сделать.
Эта статья — перевод оригинальной статьи Ben Lesh “Learning Observable By Building Observable”.
Ben Lesh рассказывает как создать свой observable и сравнивает его работу с observable из RxJs.
Привет, Хабр! В Netcracker мы уже давно используем микрофронтендную архитектуру, и с 2017 года начали разрабатывать собственный платформенный инструмент построения микрофронтендов.
Недавно на митапе мы показывали, как делать сложные приложения, разрабатываемые разными командами в разных релизных циклах и даже технологиях. В режиме live coding соединили Angular, React и Vue в одном SPA. Было много вопросов про Webpack Module federation. Поскольку мы уже переходим на этот фреймворк, здесь мы поделимся наработками, как сделать Angular host application + React/Angular/Vue microfrontends с возможностью независимого версионирования зависимостей.
В этой статье мы рассмотрим как собирать и запускать Angular приложение в Docker контейнере.
Здравствуйте, меня зовут Дмитрий Карловский и я… люблю рвать шаблоны. А во фронтенде как раз крайне много заблуждений вокруг шаблонизации. Так что давайте порвём их на лоскуты снизу вверх и справа налево.
Далее мы разберём что такое шаблоны. Их ключевые достоинства и фатальные недостатки. Зачем они нужны и почему не нужны. Сформируем представление о правильном решении и проедемся катком по популярным. Так что полная гамма чувств нам обеспечена.
Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??
). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!
Каждое приложение использует компоненты с выпадающими блоками. Такие панели используются в выпадающем списке, Autocomplete, Tooltip и т.д. В Material CDK есть инструмент Overlay для создания такого функционала.
В этой статье мы рассмотрим какую проблему решает Overlay CDK, кто использует его и напишем свой компонент на базе этого инструмента.