На протяжении многих лет бесконечные невероятные оболочки и дополнительные библиотеки для Angular, казалось, помогали вам быстрее создавать свои приложения и сайты, не изобретая велосипед каждый раз.
Это краткое изложение не является рейтингом или полной диаграммой ландшафта внешних пакетов для Angular. Есть еще много довольно незаметных маленьких пакетов, однако сегодня мы сосредоточимся на 15 заметных и продемонстрированных библиотеках, которые могут сэкономить ваше время разработки.
Давайте взглянем на 15 замечательных примеров, созданных потрясающим сообществом Angular по всему миру. Я использовал большинство из них сам, или планирую использовать их в ближайшем будущем.
1. Начальная загрузка
Если вы еще больше увлекаетесь Bootstrap или использовали его раньше, тогда лучшим решением для библиотеки пользовательского интерфейса является ng-bootstrap.
Этот пакет по сути представляет собой оболочку для Bootstrap, которая обычно использует jQuery для всех анимаций и компонентов. Я использовал это ранее и определенно рекомендую использовать оболочку Angular, если это возможно, если вам нужно иметь дизайн, подобный Bootstrap, в вашем приложении!.
2. Угловой материал
Если вам нужен дизайн материала для вашего приложения Angular, то Angular Material, без сомнения, лучший выбор. Он сопровождает огромное количество стилизованных сегментов и даже дополнительные функции, такие как перетаскивание, которые вы можете добавить в свое приложение.
Включение на самом деле слишком просто, так как этот пакет можно координировать с использованием схем Angular, которые, естественно, обновят все важные части вашей задачи.
Материал Angular является моим главным приоритетом при создании веб-приложений с помощью Angular.
3. Угловой огонь
Если вы случайно используете Firebase (а если нет, то почему??) в своем проекте, вам обязательно нужно проверить AngularFire — это первое, что я устанавливаю всякий раз, когда мой проект использует Firebase.
С AngularFire вы получаете доступ ко множеству полезных функций, упрощающих интеграцию Firebase в ваше приложение. Пакет охватывает все: от Firestore, аутентификации, хранения и даже облачных функций.
4. Графики
Есть много библиотек, доступных для представления удивительных диаграмм, и я использую в своем проекте ng2-charts, который снова является оболочкой Angular для хорошо известного пакета под названием Chart.js.
5. NgRx
Этот пакет ngrx всегда в моем списке, потому что я никогда не хотел в него вникать. Однако на случай, если я когда-нибудь планирую проект определенного размера, сильное состояние у руководства абсолютно необходимо, и NgRx — лучший выбор для этого.
Если вы ищете ответ на управление состоянием для своего приложения, первый запуск NgRx может занять некоторое время, но призом является структура проверки выстрела для обработки информации внутри вашего приложения.
6.Карты Google
В прошлом я использовал карты Google напрямую в своих приложениях Angular, и я не понимаю, почему я до сих пор не использовал пакет angular-google-maps?
Этот пакет представляет собой оболочку стандартного JS SDK для Карт Google и делает ваш код более читабельным и похожим на Angular.
Кроме того, вам не нужно работать с простым элементом холста, вместо этого у вас есть компонент Angular, с которым вы можете работать так, как вы уже привыкли.
7. Формы
В некоторых бизнес-приложениях есть множество форм для работы с любой информацией, и обычно эти формы характеризуются ответом API.
Если вы предпочитаете не кодировать свою собственную логику, чтобы обращаться к вашему определению API как к форме, вам следует взглянуть на ngx-formly.
Ваша форма в основном будет иметь только один компонент, который определяется конфигурацией. Возможно, вам придется изменить свою информацию, чтобы она согласовывалась с настройкой, ожидаемой формально, однако, как только вы добились этого прогресса, ваши представления будут значительно короче и чище.
8. Анимации
От стандартных анимаций CSS до анимаций Angular есть неисчислимые альтернативы, доступные для перемещения компонентов в вашем приложении.
Тем не менее, пакет ng-animate на самом деле похож на кроссовер с лучшим из двух миров: пакет является оберткой для довольно известного animate.css для Angular и позволяет нам использовать предопределенные анимации непосредственно в вашей настройке анимации Angular!
9. Таблицы данных
Нужно представить большой объем информации в упорядоченной форме, в виде таблицы, похожей на презентацию? Тогда ngx-datatable — лучший выбор.
Этот пакет упрощает отображение строк и столбцов. Доступно множество дополнительных функций, таких как сортировка, поиск или разбиение на страницы, которые вы можете легко включить для своей собственной таблицы данных, написав всего несколько строк кода.
10. Перетаскивание
Для некоторых приложений наличие классных функций перетаскивания является обязательным, а пакет Javascript для Angular — ng2-dragula.
Это еще раз оболочка вокруг уже существующего пакета под названием Dragula, и существует бесчисленное множество способов использования этой функциональности в различных сценариях, а также добавление ограничений на перетаскивание.
Альтернативой пакету является CDK of Angular material, который также предлагает перетаскивание, поэтому, если вы уже используете Angular Material, возможно, попробуйте его, не используя другой пакет для той же операции.
11. Календарь
Создание календаря — это то, чем вы на самом деле не хотите заниматься, если только у вас нет очень специфических требований, которые нельзя удовлетворить иначе.
Отличным универсальным календарем является angular-calendar, который поставляется с множеством опций и различных представлений прямо из коробки.
Хотя есть и другие варианты компонентов календаря, я считаю этот наиболее гибким для Angular.
12. Трубы
Ищете полезные трубы для всех разных случаев? Тогда к пакету ngx-pipes стоит привыкнуть!
Этот пакет содержит не только одну конкретную функциональность, но и каналы для обработки строк, массивов, логических значений или объектов, которые не включены в основные каналы Angular.
Вы действительно можете упростить себе жизнь с помощью этих трубок, если сумеете запомнить их в нужных местах или просто будете постоянно использовать в своих проектах!
13. Перевести
Создаете приложение для нескольких рынков или языков? Тогда вы точно хотите установить ngx-translate в свое приложение!
Этот пакет упрощает работу с разными языками. Этот процесс работает особенно хорошо, если вы планируете использовать его с самого начала, так как вам нужно будет только перевести файлы локализации позже, и все просто работает.
Пакет предлагает каналы и службы для использования ваших строк перевода в любом месте вашего кода.
14. Загрузка
Когда ваше приложение выполняет различные операции через HTTP-запросы, вы можете либо все время обрабатывать отображение индикаторов загрузки вручную, либо использовать простой пакет, такой как ngx-loading-bar.
С помощью этого пакета вы можете определить загрузку в одном месте и подключиться к любому исходящему запросу вашего приложения (или даже маршрутизатора!), чтобы отображать и скрывать панель загрузки ненавязчивым образом.
15. ЮВТ
Если вы используете серверную часть с аутентификацией JWT, вам необходимо обрабатывать свой токен на стороне клиента. И пакет, который я обычно устанавливаю, это @auth0/angular-jwt.
Эта библиотека помогает легко добавить ваш JWT во все заголовки запросов и даже отлично работает с поддержкой хранилища Ionic.
Кроме того, библиотека предлагает простой сервис для декодирования токена или получения даты истечения срока действия, что само по себе является полезными функциями для любого приложения, использующего JWT-аутентификацию.
Если вы ищете конкретный пакет или оболочку для библиотеки, которую собираетесь использовать, попробуйте Google, и, скорее всего, вы уже найдете то, что сможете использовать!
Очень редко вам действительно нужно начинать создавать пакет для одной из вышеупомянутых функций, так как все они допускают множество настроек для ваших собственных нужд.
Также есть официальный поиск компонентов прямо на странице Angular, если вы ищете что-то еще.
Не стесняйтесь задавать любые вопросы в разделе комментариев ниже.
Вы также можете следить за мной на Medium, Twitter, Github, Youtubeи LinkedIn, сразу после того, как вы нажмете хлопок ниже ;-)
