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

      Представляю вашему вниманию типичные варианты использования 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 vs. React vs. Vue: Сравнение 2017

      Выбор JavaScript-фреймворка для вашего веб-приложения может быть невыносим. В настоящее время очень популярны Angular и React, и есть также выскочка, получающий много внимания в последнее время: VueJS. Кроме них, лишь эти несколько новичков.


      Читать дальше →
    • Как я перестал любить Angular

      Вступление


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


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


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


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

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

      • Tutorial
      Всем привет!

      Современное 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

      Всем привет. Мой первый пост на хабре — не судите строго.

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

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

      • Перевод
      • Tutorial

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


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

      Читать дальше →
    • Реклама помогает поддерживать и развивать наши сервисы

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

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

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

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


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

      Предисловие


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

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


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



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


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

        Читать дальше →
      Самое читаемое