• Внедряем Angular компоненты в React, Vue и даже JQuery если хотите

    Если вы нашли крутой компонент в npm, но она с приставкой ng, ngx, angular и так далее, то не стоит расстраиваться по этому поводу. Есть много решений, чтобы этот компонент оказался у вас. В данной статье рассмотрим решение, которое официально поддерживается Angular Team, а именно  -  Angular Elements.

    Для практики выберем любой компонент из Awesome Angular.
    Читать дальше →
  • Оптимизация Angular-приложений

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



    В материале, перевод которого мы публикуем сегодня, будут раскрыты шесть направлений оптимизации Angular-приложений.
    Читать дальше →
    • +22
    • 4,7k
    • 4
  • Еще одна реализация Обработки Данных

      Представьте себе инструмент, с помощью которого вы можете трансформировать любые данные в… любые данные.

      Самый доступный пример — Изображения. Что если я хочу получить картинку определенного размера и поставить где-нибудь водяную марку (тоже определенного размера).

      И вот один из примеров как это может выглядеть:

      image

      P.S.: Это обзорная статья, если будет интересно, дальше опишу подходы детальнее.
      Читать дальше →
      • +14
      • 1,8k
      • 8
    • Angular 6+ полное руководство по внедрению зависимостей.  providedIn vs providers:[]

      • Перевод
      image

      В Angular 6 появился новый улучшенный синтаксис для внедрения зависимостей сервисов в приложение (provideIn). Несмотря на то, что уже вышел Angular 7, эта тема до сих пор остается актуальной. Существует много путаницы в комментариях GitHub, Slack и Stack Overflow, так что давайте подробно разберем эту тему.

      В данной статье мы рассмотрим:


      1. Внедрение зависимостей (dependency injection);
      2. Старый способ внедрения зависимостей в Angular (providers: []);
      3. Новый способ внедрения зависимостей в Angular (providedIn: 'root' | SomeModule);
      4. Сценарии использования provideIn;
      5. Рекомендации по использованию нового синтаксиса в приложениях;
      6. Подведем итоги.
      Читать дальше →
    • DEV Labs 2018. Онлайн-митап для web разработчиков. 1 декабря

      testПриглашаем на очередной открытый онлайн-митап серии Soft Labs, который в этот раз будет посвящён веб-разработке. Митап пройдёт в субботу 1 декабря с 15:00 до 19:30 по московскому времени.

      В рамках пятичасовой онлайн-сессии: посмотрим на то, какие проблемы может решать JHipster и кому он может быть полезен, сгенерируем и запустим с помощью него простой проект; научимся перехватывать события перелистывания страниц и сортировки с помощью MatTable; узнаем что такое JWT токены, и о том, как работает JWT авторизация.

      Подробнее о программе:
      Читать дальше →
    • Оптимизация обработки событий в Angular

        Введение


        Angular предоставляет удобный декларативный способ подписки на события в шаблоне, с помощью синтаксиса (eventName)="onEventName($event)". Вместе с политикой проверки изменений ChangeDetectionStrategy.OnPush подобный подход автоматически запускает цикл проверки изменений только по интересующему нас пользовательскому вводу. Иными словами, если мы слушаем (input) событие на <input> элементе, то проверка изменений не будет запускаться, если пользователь просто кликает по полю ввода. Это значительно улучшает
        производительность, по сравнению с политикой по умолчанию (ChangeDetectionStrategy.Default). В директивах мы также можем подписаться на события на хост-элементе через декоратор @HostListener('eventName').


        В моей практике нередко встречаются случаи, когда обработка конкретного события требуется только при выполнении какого-либо условия. т.е. обработчик выглядит примерно так:

        Читать дальше →
        • +35
        • 6,1k
        • 6
      • Контейнеризация Angular 6 SPA Template ASP .NET Core 2.1 приложения

          UPDATE от 01.11.2018 {
          Благодаря помощи в комментариях, ниже представлена более правильная с идеологической точки зрения версия docker файла.

          В стандартном шаблоне проекта Angular SPA Template содержится ошибка. Разработчики в версии net .core 2.1. удалили из образа microsoft/dotnet:2.1-sdk используемого для сборки nodejs, но в файле проекта остался код, его использующий. Подробнее здесь github.com/aspnet/Announcements/issues/298
          Необходимо отредактировать вручную файл проекта *.csproj, удалив следующий код
          Код для удаления из *.csproj
            <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
              <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
              <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
              <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
              <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
          
              <!-- Include the newly-built files in the publish output -->
              <ItemGroup>
                <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
                <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
                <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
                  <RelativePath>%(DistFiles.Identity)</RelativePath>
                  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
                </ResolvedFileToPublish>
              </ItemGroup>
            </Target>
          


          Правильный dockerfile
          ARG NODE_IMAGE=node:8.12
          
          FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
          WORKDIR /app
          EXPOSE 80
          
          FROM microsoft/dotnet:2.1-sdk AS build
          WORKDIR /src
          COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
          RUN dotnet restore "AngularWebApp/AngularWebApp.csproj"
          COPY . .
          WORKDIR "/src/AngularWebApp"
          
          FROM ${NODE_IMAGE} as node-build
          WORKDIR /src
          COPY AngularWebApp/ClientApp .
          RUN npm install
          RUN npm run build -- --prod
          
          FROM build AS publish
          RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app
          
          FROM base AS final
          WORKDIR /app
          COPY --from=publish /app .
          COPY --from=node-build /src/dist ./ClientApp/dist
          ENTRYPOINT ["dotnet", "AngularWebApp.dll"]


          }

          К сожалению готового решения нигде не нашел. Пришлось компилировать из нескольких источников информацию. Чтобы запустить в докере Angular 6/7 приложение в виде проекта на ASP .NET Core.

          Если мы включим стандартными средствами поддержку докер для проекта с Angular приложением, то докер файл создаст образ приложения на базе microsoft/dotnet:2.1-aspnetcore-runtime образа. В этот базовый образ не включен сервер node.js. И в результаты выполнения будет выходить ошибка ASP .NET Core
          Читать дальше →
        • История одной разработки

          Хотя прошлая моя публикация была замечена рядом людей, тем не менее она получила клеймо «Перевода». Что без сомнений делает все мои рекомендации, отмеченные там, плагиатом. Ведь не существует единого мнения по ведению кода.

          Поэтому, в этот раз, я решил рассказать вам свою историю о том, как я выполнял заказ по разработке странички для интернет магазина.
          Читать дальше →
        • +10 правил чистого кода от Angular разработчика

          Привет, Хабр!

          Сегодня хотел затронуть тему правильного кода в работе с Angular. Данные рекомендации сделают ваш код эффективнее в применении на практике, а так же позволят мне быть не таким требовательным к коду у junior'ов.
          Читать дальше →
          • –3
          • 2,8k
          • 2
        • Реактивное приложение без Redux/NgRx

          • Tutorial


          Сегодня мы детально разберем реактивное angular-приложение (репозиторий на github), написанное целиком по стратегии OnPush. Еще приложение использует reactive forms, что вполне типично для enterprise-приложения.

          Мы не будем использовать Flux, Redux, NgRx и вместо этого воспользуемся возможностями уже имеющимися в Typescript, Angular и RxJS. Дело в том, что данные инструменты не являются серебряной пулей и могут внести излишнюю сложность даже в простые приложения. Нас об этом честно предупреждают и один из авторов Flux, и автор Redux и автор NgRx.

          Но эти инструменты дают нашим приложениям очень приятные характеристики:

          • Predictable data flow;
          • Поддержка OnPush by design;
          • Неизменяемость данных, отсутствие накопленных side effect-ов и прочие приятные мелочи.

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

          Как вы сами убедитесь к концу статьи, это довольно простая задача — если убрать из статьи детали работы Angular и OnPush, то остается лишь несколько простых идей.
          Читать дальше →

        Самое читаемое