Как стать автором
Поиск
Написать публикацию
Обновить
6.9

Angular *

JavaScript-фреймворк

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

Типичное использование Observable объектов в Angular 4

Время на прочтение5 мин
Количество просмотров79K

Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.



Подписка на параметр роутера и мапинг на другой Observable


Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.


Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.


// UserDetailsComponent

ngOnInit() {
  this.route.params
    .pluck('userId') // получаем userId из параметров
    .switchMap(userId => this.userService.getData(userId))
    .subscribe(user => this.user = user);
}

Читать дальше →

Как я перестал любить Angular

Время на прочтение21 мин
Количество просмотров115K

Вступление


Много лет я работал с AngularJS и по сей день использую его в продакшене. Несмотря на то, что идеальным, в силу своей исторически сложившейся архитектуры, его назвать нельзя — никто не станет спорить с тем, что он стал просто вехой в процессе эволюции не только JS фреймворков, но и веба в целом.


На дворе 2017ый год и для каждого нового продукта/проекта встает вопрос выбора фреймворка для разработки. Долгое время я был уверен, что новый Angular 2/4 (далее просто Angular) станет главным трендом enterprise разработки еще на несколько лет вперед и даже не сомневался что буду работать только с ним.


Сегодня я сам отказываюсь использовать его в своем следующем проекте.


Дисклеймер: данная статья строго субъективна, но таков мой личный взгляд на происходящее и касается разработки enterprise-level приложений.

Читать дальше →

Настройка среды разработки Webpack 3 + Angular 4: от сложного к простому

Время на прочтение13 мин
Количество просмотров24K
Всем привет!

Современное front-end-приложение на Angular должно включать в себя следующие характеристики:

  • Возможность использования типизированного JS — Typescript
  • Обеспечение удобства и производительности разработки с помощью HMR (hot module replacement);
  • Модульность приложений и возможность отложенной загрузки модулей (Lazy Loading);
  • AoT — режим (ahead-of-time), повышающий производительность приложения.

Существует много вариантов сборки, решающих эти задачи (angular cli, A2 seed и т. д.). Обычно они имеют сложную структуру, плохо настраиваются/расширяются и представляют собой монолит, который невозможно изменить.

В статье я расскажу, как совместить Angular 2+ с webpack и разобраться со всеми этапами сборки/разработки.

Вы удивитесь, как это просто.
Читать дальше →

AngularJS Drag and Drop модуль. Без jQueryUI

Время на прочтение2 мин
Количество просмотров6.9K
Всем привет. Мой первый пост на хабре — не судите строго.

Drag and drop в AngularJS никогда не поддерживался на нативном уровне, все что сейчас есть это обертки для jQueryUI.
HTML5 DragAndDrop не в счет — я говорю об интерфейсных решениях. Draggable, droppable, rotatable, resizable элементы — это его состовляющие.

В течение некоторого времени я обдумывал эту проблему и решил внести свой небольшой вклад в копилку супер героического AngularJS сообщества.
Без лишних слов и не долго обдумывая название, представляю свое детище: AngularDND.
Читать дальше →

Основы Angular: HttpClient

Время на прочтение6 мин
Количество просмотров77K

Самый распространенный способ получить данные из web служб — это через Http. И в этой статье мы посмотрим как это можно сделать Http-запрос в Angular 4.3 через новый HttpClient.


Начиная с версии Angular 4.3 появился новый HttpClient. В этой статье описывается только новый клиент.

Читать дальше →

Angular — Имплементация безопасных запросов к GraphQL API посредством JWT-токенов

Время на прочтение5 мин
Количество просмотров9.8K
Привет Хабр! При реализации Angular проекта, остро встал вопрос о безопасности graphql запросов в Angular 4. Выбор пал на JSON Web Tokens. Это открытый стандарт по RFC 7519.

Работает JWT по следующей схеме:
image
Читать дальше →

Edge ненавидит ваши атрибуты

Время на прочтение5 мин
Количество просмотров24K

Сказ о том, как мы бездумно использовали на проекте бойлерплейт с целым боекомплектом зависимостей, которыми никто не пользовался, как нам потом это акнулось, когда потребовалась поддержка Edge, и как мы героически починили то, что, по факту, сами и поломали.
Нет, это слишком длинно.
Сказ о том, что все браузеры — атрибутофобы, а некоторые особенно.


Читать дальше →

Angular 4 Material. Часть 1 — Создание и настройка проекта

Время на прочтение4 мин
Количество просмотров41K

Предисловие


Столкнулся с необходимостью использования Angular 4 Material. Качал с .io сайтов HelloWorld-овские проекты, следовал гайдам. Но уроков по Angular 4 Material мало и складывается ощущение, что они написаны для уже знающих людей. Поэтому, решил написать несколько статей, в которых расскажу, как сделать из обычного проекта Angular проект Angular Material, а также о неожиданных проблемах использования некоторых компонентов и о их решениях. Пару раз пришлось даже написать собственные компоненты на основе существующих, что тоже будет освещено. Но обо все по порядку.
Читать дальше →

Как «Актив» организовал «электронную переговорку»

Время на прочтение7 мин
Количество просмотров12K

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


Но это только половина проблемы. Как всем известно, ресурсами еще нужно уметь грамотно управлять, чтобы не случалось коллизий. Ситуации, когда во время встречи с партнерами, в переговорную врывается руководитель соседнего подразделения со словами “И эта занята!?”, недопустимы.



Второй момент – когда под рукой нет инструмента (к примеру, Outlook или его web-интерфейса), чтобы забронировать переговорную комнату, но очень нужно «успеть» захватить ценный ресурс. Для осуществления задуманного, необходимо идти на свое рабочее место и с него осуществлять бронирование. Теперь представим, что у вас нет на это времени, выходя из переговорной комнаты с очередной встречи.


Можно конечно придумать еще различные варианты «почему». Для нас уже этих двух моментов было достаточно, чтобы начать исследования в направлении поиска решения проблемы.

Читать дальше →

Выбранный UI-фреймворк – вред. Архитектурные требования – профит

Время на прочтение5 мин
Количество просмотров12K


Мы не замечаем, но услуги и продукты, которыми мы пользуемся, постоянно усложняются.

  • Войти в метро теперь – не просто кинуть пятачок, а приложить карту Тройка, записанную на телефон и учитывающую пересадку.
  • Позвонить по телефону и посмотреть телевизор – давно уже не провести два провода в квартиру и вносить фиксированную абонентскую плату, а triple play с кучей опций и возможностей.
  • Посмотреть дневник сына – на святое же покусились! – теперь можно с планшета, заодно ответив на комментарий классного руководителя о его неудовлетворительном поведении.

Ну и я уже молчу про всякие Tinkoff, Apple Pay, Google Now, умные дома и многое другое.

Как следствие, в любой компании растут IT-отделы. То, чем раньше занимались несколько десятков сотрудников, сейчас делают команды из тысяч и десятков тысяч человек (кстати, поделитесь в комментариях, как выросли ваши IT-отделы).

Такие большие команды вынуждены более ответственно подходить к выбору технологий, в том числе и UI-фреймворков. И вот вам вброс: неважно, какой UI-фреймворк выбран. И даже вредно ограничивать себя выбором одного фреймворка. Но абсолютно не вредно и даже необходимо следовать правилам использования этих фреймворков.
Читать дальше →

Создание Angular 2+ компонентов с возможностью переключения темы

Время на прочтение3 мин
Количество просмотров9.1K
Всем привет.

Итак, допустим мы пишем сайт, на котором нужно реализовать возможность динамического переключения настроек внешнего вида, или, проще говоря, темы. Темой (theme) будем называть набор свойств, определяющих внешний вид компонентов (да и вообще всего сайта).
Допустим, у нас есть одностраничное приложение на Angular, и пусть в нем будет ооочень много компонентов, и один из них — ButtonComponent (к компоненту подключим стили из button.component.css), на примере которого и рассмотрим весь механизм. И нужно реализовать возможность переключения между двумя темами: «dark» и «light», которые у нас будут отличаться только цветами (а в общем случае можно выносить в тему что угодно, размеры там, шрифты, картинки бэкграунда и т.п. — все, чем можно управлять из css).
Читать дальше →

WebStorm 2017.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

Время на прочтение4 мин
Количество просмотров16K
На этой неделе вышло большое обновление WebStorm. В этом посте мы расскажем подробнее о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.2 и других IDE JetBrains версии 2017.2.

Вы можете прочитать подробнее о WebStorm 2017.2 и скачать его на нашем сайте.

Улучшения в поддержке JavaScript и TypeScript


Move symbol


Новый рефакторинг Move symbol переносит классы, глобальные функции и переменные из одного JavaScript или TypeScript файла в другой. IDE автоматически добавит экспорт и обновит ES6-импорты в файлах, где используется этот символ.

Чтобы вызвать этот рефакторинг, поставьте курсор на символ в ES6-модуле и нажмите F6.


Читать дальше →

Как сделать сложное простым. История создания «Проекта1917»

Время на прочтение10 мин
Количество просмотров8.5K
В конце июня 2016 года ребята из «Проекта 1917», посвященного столетию октябрьской революции в России, попросили помочь им реализовать вебчасть их проекта. Предполагалось, что это будет социальная сеть, где Николай II постит свои фотографии, Ленин ставит ему лайки, Троцкий комментирует. Мы были не первые, к кому они обратились: кто-то говорил, что в очень короткие сроки это сделать невозможно, либо стоить это будет очень дорого.
Читать дальше →

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

Бешеные псы: Angular 2 vs React: доклад Евгения Гусева и Ильи Таратухина

Время на прочтение1 мин
Количество просмотров17K
Angular2 отрелижен, React и подавно. Копья поломаны, мечи перекованы на орала, страсти уже поутихли и, вроде как, статус кво восстановлен. Кто-то использует один инструмент, кто-то другой, разве что, иногда раздаются возгласы: «А у них...!»



Однако не всё так просто. В конце концов, мы не только пишем код, но и решаем однотипные проблемы:

  • Как сделать наше приложение быстрым?
  • Как писать понятнее и проще?
  • Как писать быстрее?

Кто-то может сказать: «Эту тему уже миллион раз обсасывали, зачем опять?». Но, все же, если вы запускаете новый проект или решили переписать старый, перед вами всё равно встанет проблема выбора. И даже если вы считаете, что всё очевидно — это далеко не так.
Читать дальше →

Динамический рендеринг компонентов в Angular 2

Время на прочтение4 мин
Количество просмотров19K

Вступительное слово


В процессе работы над проектом на Angular 2 с использованием карт возникла следующая задача: требуется срендерить свой ангуляровский компонент в стандартный popup leaflet’а. В данной статье динамический рендеринг компонентов будет рассмотрен в разрезе именно этой задачи, однако аналогичным образом можно использовать эту информацию в собственных кейсах.
Читать дальше →

Переход с ASP.NET на Angular2 с особенностями (личный опыт)

Время на прочтение7 мин
Количество просмотров12K
Развернутая тема: разделение ASP.NET на Front-End (Angular) и Back-End (WebApi)

Особенности: корпоративная разработка (следовательно основной браузер — IE, веб сервер — IIS, среда — Windows); это частичный рефакторинг, а скорее редизайн веб части (имеется legacy код, ориентация на имеющийся UX);

Причины и цели: Цель — редизайн архитектуры веб составляющей (в текущей версии ASP.NET Forms + WCF), по причине невозможности/сложности решения возникших проблем и новых требований (полное обновление страниц после постбэка, повторная отправка формы, сложная навигация и связанные с этим проблемы с данными в формах).
image

Все описанное базируется на личном опыте (или, соответственно, его отсутствии — еще месяц назад о Node.js и Angular я не знал ничего кроме названия). Если краткое описание статьи заинтересовало — начнем.
Читать дальше →

DevConf::Frontend — 17 июня в Москве: Angular 4, React Native, выбор JS-фреймоврка для крупного проекта + Lua Meetup

Время на прочтение1 мин
Количество просмотров6.7K

17 июня в Москве, Измайлово пройдет конференция Devconf::FrontEnd

Откроет ее Виталий Грин, лидер Frontend разработки Альфа Лаборатории, Ex-Яндекс.Карты,
который расскажет как сделать общую библиотеку компонентов с одной стороны стабильной для десятков команд, а с другой стороны гибкой и расширяемой

Сергей Аверин, tech-менеджер из компании Acronis поведает о том, как важен правильный выбор JS-фреймоврка для крупного проекта в условиях, когда любое более-менее важное технологическое решение сразу затрагивает с десяток команд, несколько сотен человек и права «случайно все сломать» нет.
Читать дальше →

Как я участвовал в хакатоне Angular Attack, и что из этого вышло

Время на прочтение9 мин
Количество просмотров7.1K
Привет, друзья. Меня зовут Алексей, я работаю фронтенд-разработчиком в Санкт-Петербургском офисе компании Wrike, и сегодня я хочу рассказать про то, как я поучаствовал в хакатоне AngularAttack, где моя работа Sherlock в итоговом протоколе заняла первое место.

Читать дальше →

Универсальная функция создания объектов на примере реализации $injector.instantiate в angularjs

Время на прочтение4 мин
Количество просмотров5.6K
Задумывались ли вы когда-нибудь, как создаются экземпляры используемых вами типов angularJS? Контроллеры, фабрики, сервисы, декораторы, значения- буквально каждый из них в конце концов передаётся на исполнение в функцию instantiate объекта $injector, где их поджидает довольно занимательная конструкция, о которой сегодня и хотелось бы поговорить.

Читать дальше →

Динамический Angular или манипулируй правильно

Время на прочтение16 мин
Количество просмотров105K
image

Любой создаваемый проект не обходится без динамического создания элементов. Рано или поздно вам понадобится либо создать tooltip для элемента, показать модальное окно, или вовсе сформировать некоторые блоки динамически подгружая их с сервера. При решении таких задач я зачастую определяю зрелость фреймворка, который использую: насколько просто я могу в нем создавать динамический контент, и какие возможности он мне для этого предлагает. В этой статье мы поговорим о динамическом создании контента в новом Angular и рассмотрим различные подходы, которые он нам предоставляет.

Читать дальше →