Как стать автором
Обновить
13.41
Рейтинг

Angular *

JavaScript-фреймворк

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Концепция контроллеров компонента в Angular: часть вторая

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.

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

Давайте посмотрим
Всего голосов 19: ↑18 и ↓1 +17
Просмотры 1.6K
Комментарии 5

Что готовит нам Angular? Заметки из changelog, новый синтаксис шаблонов, Ivy

Angular *

В этой статье приведу заметки к релизу Angular 13. Рассмотрим предложения по шаблонам которую будут рассматривать в Angular Team в ближайшем митинге.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 2K
Комментарии 1

Построение библиотек компонентов и их организация. Или как извлечь максимальную пользу для бизнеса c React и Angular

Блог компании Европлан Разработка веб-сайтов *C# *Angular *ReactJS *

Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на Angular, ряд на React. Пользователи систем в зависимости от этапа бизнес-процесса и роли взаимодействует с определенным продуктом. Часто, в рамках бизнеса мы должны показывать одни и те же данные в разных продуктах. Эти данные отображаются в виде UI компонентов.

В этой статье мы узнаем как можно организовать библиотеки компонентов для решения задач бизнеса. Научимся переиспользовать и запускать React библиотеку внутри Angular. Таким способом мы сможем решать задачи бизнеса гибко и эффективно.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 2.3K
Комментарии 19

Подробное описание операторов RxJS — Часть 1

JavaScript *Angular *TypeScript *
Перевод

Первое, что нужно понять об операторах, - это почему они существуют. Они существуют, потому что observables как тип позволяют нам обрабатывать события (или значения во времени) как множества или набор вещей.

Говоря более просто, любое четко определенное множество будет иметь операции, которые могут быть выполнены с ним, которые могут преобразовать его в новое множество того же типа. Например, предположим, что у нас есть грузовик с яблоками. Мы могли бы превратить его в грузовик с нарезанными яблоками с помощью машины для нарезки яблок. Та же самая машина для нарезки яблок затем может быть использована на любом грузовике с яблоками, чтобы превратить их в грузовик, загруженный нарезанными яблоками. В этом случае машина для нарезки яблок будет считаться «оператором», который сопоставляет яблоки с ломтиками яблок. Точно так же мы могли бы иметь грузовик с сахаром, мукой, яйцами и т. д. И объединить их с грузовиком с ломтиками яблока, чтобы сделать грузовик с яблочными пирогами, используя какую-то машину для производства пирогов. Итак, в этом примере грузовик - это тип множества, машина для нарезки яблок или машина для изготовления пирогов будут «операторами», а сахар, яблоки, ломтики яблок, яйца и т. д. Будут просто значениями, переносимыми нашим типом множества.

Читать далее
Всего голосов 9: ↑6 и ↓3 +3
Просмотры 2.9K
Комментарии 0

Тестируем Angular приложение. Часть 1. Тестирование компонента (+ EventEmitter)

Angular *TypeScript *
Tutorial

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

Читать далее
Рейтинг 0
Просмотры 1.4K
Комментарии 5

Создаём одинаковое приложение 5 раз

Блог компании ITSOFT jQuery *Angular *ReactJS *VueJS *
Перевод

На написание этой статьи меня вдохновил YouTube-канал Fireship, записывающий отличные видео о веб-разработке, крайне рекомендую их посмотреть, если вам интересна эта тема.

Вот видео с канала, в котором в 10 фреймворках создают todo-приложение:


Я решил, что не хочу тратить на это кучу времени, и в основном использовал статью как оправдание для изучения нескольких новых фреймворков, поэтому пять раз собрал одно и то же приложение. Я планирую создать простое приложение для добавления заметок, в котором пользователи могут писать текст и сохранять его как отдельные заметки. Некоторые из этих фреймворков я уже использовал для создания подобных приложений, а в других не делал ничего похожего, или даже не использовал их вообще, поэтому это будет чуть сложнее.
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры 7.4K
Комментарии 25

Компоненты-конструкторы: мощь ng-content в Angular

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

Проекция контента — одна из базовых возможностей Angular, о которой слышали почти все. А с недавних пор по ней появилась и хорошая официальная документация. Тем не менее в реальных задачах разработчики часто обходят ng-content стороной, прибегая к более сложным и перегруженным решениям и усложняя дальнейшее использование и поддержку компонента.

В этой статье я хотел бы показать несколько типовых кейсов для ng-content при разработке многократно используемых компонентов. А еще — рассказать о преимуществах, которые они могут нам дать.

Давайте посмотрим
Всего голосов 30: ↑30 и ↓0 +30
Просмотры 4K
Комментарии 1

Пришло время избавиться от Angular и сэкономить миллиарды долларов

Блог компании RUVDS.com Разработка веб-сайтов *JavaScript *Angular *
Перевод
Я знаю, что эта статья вызовет поток гневных комментариев, но… так тому и быть. Кто-то должен наконец озвучить то, о чём уже некоторое время размышляют программисты, обладающие некоторым опытом.

Я занимаюсь программированием более 20 лет, работал в некоторых из самых приличных североамериканских компаний. Вот уже несколько лет я наблюдаю за тем, что происходит в сфере разработки интерфейсов. Ситуация здесь постоянно ухудшается. В частности, я говорю о «модных технологиях», о довольно крупных фрагментах JS- и CSS-кода, претендующих на остроумное исполнение, которые вроде как должны пользоваться неистовой популярностью у толп новичков. Теперь в эти толпы включают даже и опытных разработчиков, которым полагается что-то понимать в том, чем они пользуются.



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

Каждый день мне на почту приходят вакансии. Компании всех размеров и мастей рыщут в поисках ОПЫТНЫХ Angular 4, 5, 6, 7, 8, 10, 12-разработчиков, которые как минимум 5 лет занимались разработкой и поддержкой того дурдома, который все называют «современнейшими пользовательскими интерфейсами».

Это — не нечто «современнейшее». Это — дурдом.

Несколько лет назад я был на собеседовании в EA (Electronic Arts). Там мне сказали, что компания избавляется от всех своих UI-фреймворков и возвращается к написанию кода на чистом JavaScript (речь идёт о модулях, или о том, что тот, кто работает с jQuery, назвал бы JS-плагинами). Я был удивлён и заинтригован.

Теперь о причинах подобного хода знают не только в EA, но и во всех остальных компаниях.
Читать дальше →
Всего голосов 150: ↑115 и ↓35 +80
Просмотры 51K
Комментарии 196

Как называть функции во фронтенде

Разработка веб-сайтов *JavaScript *Программирование *HTML *Angular *

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Просмотры 3K
Комментарии 35

Google Product Taxonomy Viewer — Утилита для просмотра справочника категорий товаров Google

Java *Angular *Разработка под e-commerce *Интернет-маркетинг
Tutorial

Доброго времени суток, уважаемые хабровчане.

Здесь я хочу представить вам цифровой сервис "Google Product Taxonomy Viewer".

Это позволяет пользователю просматривать данные таксономии продуктов Google. Пользователь может выбрать желаемую страну и язык. Также можно сортировать и искать данные по полям «имя» и «идентификатор».

Данные «Таксономии продуктов» представлены в компоненте «Древовидный список», что обеспечивает гибкий пользовательский интерфейс.

Чтобы использовать данный программный продукт, необходимо зарегистрироваться, а затем войти в веб-приложение.

Чтобы зарегистрироваться в сервисе, перейдите по ссылке.

Можно зарегистрироваться с помощью электронной почты пользователя, учетной записи пользователя в Google или учетной записи пользователя в Facebook.

После успешной аутентификации, чтобы увидеть веб-страницу «Google Product Taxonomy Viewer», необходимо перейти по ссылке.

Итак, как выглядит эта страница? Вы можете увидеть скриншот ниже на картинке.

Читать далее
Всего голосов 5: ↑0 и ↓5 -5
Просмотры 895
Комментарии 0

Как реализовать drag & drop используя RxJS

JavaScript *Angular *
Перевод

Drag & drop - одна из функций, которая может быть очень полезна для пользователей нашего приложения. Кроме того, это отличный пример, показывающий, как RxJS можно использовать для простой реализации функционала перетаскивания. Давайте посмотрим, как мы можем это сделать.

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 3.1K
Комментарии 1

Изучай observable, создавая observable

JavaScript *Angular *TypeScript *
Из песочницы
Перевод

Эта статья — перевод оригинальной статьи Ben Lesh “Learning Observable By Building Observable”.

Ben Lesh рассказывает как создать свой observable и сравнивает его работу с observable из RxJs.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 4K
Комментарии 1

Webpack Module Federation — микрофронтенд на современных технологиях

Блог компании Netcracker JavaScript *Angular *ReactJS *Микросервисы *

Привет, Хабр! В Netcracker мы уже давно используем микрофронтендную архитектуру, и с 2017 года начали разрабатывать собственный платформенный инструмент построения микрофронтендов.

Недавно на митапе мы показывали, как делать сложные приложения, разрабатываемые разными командами в разных релизных циклах и даже технологиях. В режиме live coding соединили Angular, React и Vue в одном SPA. Было много вопросов про Webpack Module federation. Поскольку мы уже переходим на этот фреймворк, здесь мы поделимся наработками, как сделать Angular host application + React/Angular/Vue microfrontends с возможностью независимого версионирования зависимостей.

Давайте рассмотрим на рабочем прототипе!
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 7.2K
Комментарии 6

Карго-культ HTML в современном фронтенде

Разработка веб-сайтов *JavaScript *HTML *Angular *ReactJS *

Здравствуйте, меня зовут Дмитрий Карловский и я… люблю рвать шаблоны. А во фронтенде как раз крайне много заблуждений вокруг шаблонизации. Так что давайте порвём их на лоскуты снизу вверх и справа налево.


Разрыв шаблона


Далее мы разберём что такое шаблоны. Их ключевые достоинства и фатальные недостатки. Зачем они нужны и почему не нужны. Сформируем представление о правильном решении и проедемся катком по популярным. Так что полная гамма чувств нам обеспечена.

Прошу к столу..
Всего голосов 26: ↑17 и ↓9 +8
Просмотры 9.1K
Комментарии 52

Bindon: малоизвестные фишки шаблонов Angular

Блог компании TINKOFF Разработка веб-сайтов *HTML *Angular *TypeScript *

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

Давайте!
Всего голосов 21: ↑21 и ↓0 +21
Просмотры 5.1K
Комментарии 2

Построение компонентов с выпадающими блоками с помощью Angular и Material CDK

Блог компании Европлан Angular *

Каждое приложение использует компоненты с выпадающими блоками. Такие панели используются в выпадающем списке, Autocomplete, Tooltip и т.д. В Material CDK есть инструмент Overlay для создания такого функционала.

В этой статье мы рассмотрим какую проблему решает Overlay CDK, кто использует его и напишем свой компонент на базе этого инструмента.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 2.5K
Комментарии 2

От одного приложения — к сотне. Путь микрофронтенда в Тинькофф Бизнес

Блог компании TINKOFF Разработка веб-сайтов *Angular *Конференции Микросервисы *

Привет, меня зовут Ваня, недавно я выступил на CodeFest 11, где рассказал про путь Тинькофф Бизнеса на фронтенде от одного приложения к сотне. Но, так как в ИT очень быстро все меняется, а ждать запись еще долго, сейчас я тезисно расскажу о нашем шестилетнем путешествии в дивный мир микрофронтенда!

Пройти путь вместе
Всего голосов 35: ↑32 и ↓3 +29
Просмотры 5.9K
Комментарии 0

Почему мы должны выбросить React и взяться за Angular

Angular *ReactJS *TypeScript *
Из песочницы
Перевод

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

Читать далее
Всего голосов 25: ↑17 и ↓8 +9
Просмотры 18K
Комментарии 73

Коротко и ясно: размещаем фронт Angular 11, бэк Spring Boot Java 11 и mySQL DB на Google App Engine

Google App Engine *Angular *
Из песочницы

Однажды мне понадобилось разместить учебный проект на Google App Engine. Зачем? Почему именно там? Можно обсудить позже. Сейчас речь о другом.

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

Так появился этот гид (проверено, по состоянию на май 2021-го мин нет работает.

Читать далее
Рейтинг 0
Просмотры 2K
Комментарии 0

Вклад авторов