{"id":3075,"url":"https://github.com/Angular-RU/angular-awesome-list","name":"angular-awesome-list","description":"Список ресурсов по Angular на русском","projects_count":596,"last_synced_at":"2026-04-12T21:00:21.882Z","repository":{"id":38361631,"uuid":"117074854","full_name":"Angular-RU/angular-awesome-list","owner":"Angular-RU","description":"Список ресурсов по Angular на русском","archived":false,"fork":false,"pushed_at":"2021-07-12T06:55:49.000Z","size":1271,"stargazers_count":306,"open_issues_count":0,"forks_count":59,"subscribers_count":46,"default_branch":"master","last_synced_at":"2026-03-15T06:27:00.762Z","etag":null,"topics":["angular","angular-ui","aot","awesome","cheatsheet","cheatsheet-angulardart","dependency-injection","egghead","hirez","lite","material","ng-seed","ngx","slack","twitter","typescript","udemy","ui-primeng","universal","webpack"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Angular-RU.png","metadata":{},"created_at":"2018-01-11T08:55:13.000Z","updated_at":"2026-03-01T07:40:33.000Z","dependencies_parsed_at":"2022-08-25T04:50:32.963Z","dependency_job_id":null,"html_url":"https://github.com/Angular-RU/angular-awesome-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Angular-RU/angular-awesome-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-awesome-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-awesome-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-awesome-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-awesome-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Angular-RU","download_url":"https://codeload.github.com/Angular-RU/angular-awesome-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-RU%2Fangular-awesome-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31131580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-29T03:52:23.544Z","status":"ssl_error","status_checked_at":"2026-03-29T03:51:44.524Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"readme":"![](assets/preview.png)\n\n# Добро пожаловать на Angular-RU\n\nМы любим Angular в России, и именно поэтому в нашем блоге мы будем рассказывать о своём опыте использования Angular, \nактуальных проблемах и путей их решения, также разбираемся, какие тренды ожидают нас в ближайшем будущем и многое другое.\n\n**Current Angular version:**\n\n[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/~angular)\n\n[Читайте наш блог (angular-ru.gitbook.io/blog)](https://angular-ru.gitbook.io/blog/)\n\n## Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)\n\nЗдесь вы найдете список полезных репозиториев, стартеры, примеры, учебные пособия, компоненты, модули, видеоролики и все остальное причастное к экосистеме Angular. \n\n**Содержание**:\n\n* [Полезные книги](#awesome-books)\n  * [Чистый код](#awesome-clean-code-books)\n  * [Паттерны проектирования](#awesome-oop-books)\n  * [Чистая архитектура](#awesome-clean-architecture-books)\n* [Angular](#angular)\n  * [Карта развития](https://github.com/sulco/angular-developer-roadmap)\n  * [Список ресурсов для развития](https://github.com/avatsaev/angular-learning-resources)\n  * [Официальные ресурсы](#angular-official)\n  * [Новости в twitter](#twitter)\n  * [Сообщества](#community)\n  * [Серверный рендеринг](#server-side-rendering)\n  * [Cheatsheet \\(чит-лист\\)](#cheatsheet)\n  * [UI библиотеки](#angular-ui)\n    * [Material Design](#material)\n  * [Важные особенности](#features)\n    * [Компоненты](#components)\n    * [Шаблоны](#templates)\n    * [Обнаружение изменений](#change-detection)\n    * [Внедрение зависимостей](#dependency-injection)\n    * [Директивы](#directives)\n    * [Пайпы](#pipes)\n    * [Web Workers](#web-workers)\n    * [HTTP](#http)\n    * [Роутинг](#router)\n    * [Тестирование](#test)\n    * [Ahead-of-Time компиляция](#aot)\n  * [Angular CLI](#angular-cli)\n  * [Dev Tools](#dev-tools)\n  * [Starter Kit](#starter-kit)\n  * [Webpack стартеры](#webpack)\n  * [Angular Universal](#universal-angular)\n    * [Universal \\(основные ресурсы\\)](#universal-general-resources)\n    * [Основные источники](#universal-seed-projects)\n  * [Публикации](#series)\n  * [Видеоуроки](#video-tutorials)\n  * [Стайл-гайды](#style-guides)\n  * [Angular Connect конференция](#angular-connect)\n  * [Книги](#books)\n  * [Курсы и тренинги](#on-site-training)\n  * [Подборка статей](#approach-and-explanation)\n  * [Интеграция](#integrations)\n  * [Подборка компонентов](#components-list)\n  * [Пайпы](#pipes-seed)\n  * [Структуры данных и манипуляции состоянием](#persistence)\n  * [Роутинг](#routing)\n  * [Валидация](#validation)\n  * [Логгирование](#logging)\n  * [i18n](#i18n)\n  * [Производительность](#perfomance)\n  * [Ленивая загрузка](#lazy-load)\n  * [Лоадеры](#loaders)\n  * [Примеры приложений](#site-templates)\n  * [Генераторы](#generators)\n  * [Инструменты документации](#documentation-tools)\n  * [TodoMVC](#todomvc)\n  * [Расширения для IDE's](#idea)\n  * [TypeScript](#angular-in-typescript)\n    * [TypeScript \\(основные ресурсы\\)](#typescript-general-resources)\n    * [Основные источники](#typescript-seed-projects)\n  * [Dart](#angular-in-dart)\n    * [Основные источники](#dart-seed-projects)\n  * [Babel](#angular-in-babel)\n    * [Babel \\(основные ресурсы\\)](#babel-general-resources)\n    * [Online Playground](#babel-angular-online-playground)\n    * [Основные источники](#babel-seed-projects)\n    * [Babel плагины](#babel-plugins)\n  * [ES5](#angular-in-es5)\n    * [Основные источники](#es5-seed-projects)\n  * [Ionic](#ionic-in-angular)\n    * [Ionic 2 \\(основные ресурсы\\)](#ionic-general-resources)\n  * [Meteor](#meteor-in-angular)\n    * [Meteor \\(основные ресурсы\\)](#meteor-general-resources)\n    * [Основные источники](#meteor-seed-projects)\n  * [NativeScript](#angular-in-nativescript)\n    * [NativeScript \\(основные ресурсы\\)](#nativescript-general-resources)\n    * [Основные источники](#nativescript-seed-projects)\n  * [React Native](#angular-in-react-native)\n    * [React Native \\(основные ресурсы\\)](#react-native-general-resources)\n  * [Haxe](#angular-in-haxe)\n    * [Основные источники](#haxe-seed-projects)\n  * [C\\#](#angular-in-csh)\n  * [Java](#angular-in-java)\n    * [Основные источники](#java-seed-projects)\n  * [Kotlin](#angular-in-kotlin)\n  * [Scala](#angular-in-scala)\n    * [Основные источники](#scala-seed-projects)\n  * [Bit](#angular-components-with-bit)\n  * [Security](#security)\n  * [NgRx](#ngrx)\n\n### Полезные книги \u003ca id=\"awesome-books\"\u003e\u003c/a\u003e\n\n\u003e Книги о программировании для разного уровня специалистов. Все перечисленные ниже книги являются переводом с английского, поэтому по возможности рекомендуем читать их в оригинале.\n\n#### Чистый код \u003ca id=\"awesome-clean-code-books\"\u003e\u003c/a\u003e\n\n\u003e О том, как правильно писать чистый и понятный код, какие приемы рефакторинга существуют.\n\n* [Чистый код, Роберт Мартин](https://www.ozon.ru/context/detail/id/28336354/)\n* [Рефакторинг, Мартин Фаулер](https://www.ozon.ru/context/detail/id/1308678/)\n* [Погружение в рефакторинг - бесплатная онлайн версия, Александр Швец](https://refactoring.guru/ru/refactoring)\n* [Совершенный код, Стив Макконнелл](https://www.ozon.ru/context/detail/id/142768363/)\n* [Идеальный программист, Роберт Мартин](https://www.ozon.ru/context/detail/id/135465064/)\n* [97 этюдов для программистов, Роберт Мартин](https://www.ozon.ru/context/detail/id/8684879/)\n* [Программист-фанатик, Чед Фаулер](https://www.ozon.ru/context/detail/id/31901152/)\n\n#### Паттерны проектирования \u003ca id=\"awesome-oop-books\"\u003e\u003c/a\u003e\n\n\u003e Подробное описание популярных паттернов проектирования и примеры их использования.\n\n* [Приемы объектно-ориентированного программирования, Банда четырех](https://www.ozon.ru/context/detail/id/2457392/)\n* [Предметно-ориентированные языки программирования, Мартин Фаулер](https://www.ozon.ru/context/detail/id/6967089/)\n* [Погружение в паттерны проектирования - бесплатная онлайн версия, Александр Швец](https://refactoring.guru/ru/design-patterns)\n* [Реактивные шаблоны проектирования, Роланд Кун](https://www.ozon.ru/context/detail/id/143822725/)\n\n#### Чистая архитектура \u003ca id=\"awesome-clean-architecture-books\"\u003e\u003c/a\u003e\n\n\u003e Введение в чистую архитектуру, полезна для больших проектов.\n\n* [Чистая архитектура, Роберт Мартин](https://www.ozon.ru/context/detail/id/144499396/)\n* [VIPER - адаптация чистой архитектуры, Rambler\u0026CO](https://github.com/strongself/The-Book-of-VIPER)\n* [Архитектура корпоративных программных приложений, Мартин Фаулер](https://www.ozon.ru/context/detail/id/1616782/)\n\n### Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e\n\n\u003e Angular - это платформа для разработки мобильных и десктопных веб-приложений.\n\n#### Карта развития\n\n![img](https://raw.githubusercontent.com/sulco/angular-developer-roadmap/master/angular-dev-roadmap.png)\n\n#### Список ресурсов для развития\n\n* [angular-learning-resources](https://github.com/avatsaev/angular-learning-resources)\n\n#### Официальные ресурсы \u003ca id=\"angular\"\u003e\u003c/a\u003e\n\n* [Сайт](https://angular.io/)\n* [Блог](http://angularjs.blogspot.com/)\n* [Доска задач команды Angular \\(отсортированные по приоритету\\)](https://hq.angular.io/)\n* [Документация по фреймворку](https://angular.io/docs/js/latest/)\n* [Чит-лист часто встречающихся вещей в Angular](https://angular.io/guide/cheatsheet)\n* [Быстрый старт](https://angular.io/guide/quickstart)\n* [GitHub репозиторий](https://github.com/angular/angular)\n* [Карта развития](https://github.com/sulco/angular-developer-roadmap)\n\n#### Новости в twitter \u003ca id=\"twitter\"\u003e\u003c/a\u003e\n\n\u003e Данный список хорош тем, что благодаря нему, вы будете в курсе основных событий.\n\n**Angular Team \\(эксперты из команды Angular\\)**\n\n* [Мишко Хевери \\(@mhevery\\)](https://twitter.com/mhevery)\n* [Игор Минар \\(@igorminar\\)](https://twitter.com/igorminar)\n* [Брэд Грин \\(bradlygreen\\)](https://twitter.com/bradlygreen)\n* [Наоми Блэк \\(@naomitraveller\\)](https://twitter.com/naomitraveller)\n* [Тобиас Бош \\(@tbosch1009\\)](https://twitter.com/tbosch1009)\n* [Кара Эриксон \\(@karaforthewin\\)](https://twitter.com/karaforthewin)\n* [Роб Уормальд \\(@robwormald\\)](https://twitter.com/robwormald)\n\n**Google Developer Experts**\n\n* [Джек Франклин](https://twitter.com/jack_franklin)\n* [Тьерри Шатель](https://twitter.com/ThierryChatel)\n* [Ури Шейк](https://twitter.com/urishaked)\n* [Гонсало Руис из Виллы Суарес](https://twitter.com/gruizdevilla)\n* [Шэрон Дио](https://twitter.com/sharondio)\n* [Джон Папа](https://twitter.com/John_Papa)\n* [Дэн Вахлин](https://twitter.com/danwahlin)\n* [Кристиан Вейер](https://twitter.com/christianweyer)\n* [Тоддский девиз](https://twitter.com/toddmotto)\n* [Тим Раффлес](https://twitter.com/timruffles)\n* [Вассим Чхаг](https://twitter.com/manekinekko)\n* [Aaron Frost](https://twitter.com/js_dev)\n* [Аарон Фрост](https://twitter.com/willmendesneto)\n* [Джаред Уильямс](https://twitter.com/jaredwilli)\n* [Жерар Санс](https://twitter.com/gerardsans)\n* [Паскаль Прехт](https://twitter.com/PascalPrecht)\n* [Джефф Whelpley](https://twitter.com/jeffwhelpley/)\n* [Рауль Хименес](https://twitter.com/elecash/)\n* [Киро Нанес](https://twitter.com/cironunesdev/)\n* [Максим Сальников](https://twitter.com/webmaxru)\n* [Дебора Курата](https://twitter.com/deborahkurata)\n* [Минько Гечев](https://twitter.com/mgechev)\n* [Шай Резник](https://twitter.com/shai_reznik)\n* [Манфред Штайер](https://twitter.com/manfredsteyer)\n* [Юрий Струмфлойнер](https://twitter.com/juristr)\n* [Уильям Грасель](https://twitter.com/willgmbr)\n* [Алиса Найкол](https://twitter.com/AlyssaNicoll)\n* [Нир Кауфман](https://twitter.com/nirkaufman)\n\n**Остальные известные эксперты:**\n\n* [Патрик Стэплтон \\(@gdi2290\\)](https://twitter.com/gdi2290)\n* [Скотт Мосс \\(@scotups\\)](https://twitter.com/scotups)\n* [Брэд Грин \\(@bradlygreen\\)](https://twitter.com/bradlygreen)\n* [Джефф Кросс \\(@jeffbcross\\)](https://twitter.com/jeffbcross)\n* [Виктор Савкин \\(@victorsavkin\\)](https://twitter.com/victorsavkin)\n* [Павел Козловский \\(@pkozlowski\\_os\\)](https://twitter.com/pkozlowski_os)\n* [Алексей Охрименко \\(@obenjiro\\)](https://twitter.com/obenjiro)\n\n**Сообщества:**\n\n* [egghead.io \\(@eggheadio\\)](https://twitter.com/eggheadio)\n* [hirez.io \\(@hirez\\_io\\)](https://twitter.com/hirez_io)\n* [hypedrivendev.io \\(@cedric\\_exbrayat\\)](https://twitter.com/cedric_exbrayat)\n* [amcdnl.com \\(@amcdnl\\)](https://twitter.com/amcdnl)\n* [ultimateangular.com \\(@ultimateangular\\)](https://twitter.com/ultimateangular)\n\n**Митапы:**\n\n* [Angular Moscow \\(@AngularMoscow\\)](https://twitter.com/AngularMoscow)\n* [Angular NYC \\(@ngNewYork\\)](https://twitter.com/ngNewYork)\n\nЭтот список далеко не полный...\n\n#### Сообщества \u003ca id=\"community\"\u003e\u003c/a\u003e\n\n* [`Angular сообщества в twitter`](https://twitter.com/search?f=users\u0026vertical=default\u0026q=%23angular\u0026src=tyah)\n\n![](https://habrastorage.org/webt/uo/hi/ce/uohices8pudw2cib-lji_yp4wte.png)\n\n* [Канал в Gitter](https://gitter.im/angular/angular)\n* [Вопросы по Angular на StackOverflow](https://stackoverflow.com/questions/tagged/angular)\n* [Angular на Reddit](https://www.reddit.com/r/Angular2/)\n* [Подкасты от AngularAir](http://angularair.com/)\n* [Подкасты от Devchat по Angular](https://devchat.tv/adv-in-angular)\n* [Журнал ng-newsletter](http://www.ng-newsletter.com)\n* [Витрина приложений от Angular Expo](http://angularexpo.com/)\n* [Чат от AngularBuddies в Slack](https://angularbuddies.slack.com/messages/ng-2/)\n* [Чат от dartlang.slack.com в Slack](https://dartlang.slack.com/messages/angular2) \n* [Подборка популярных Twitter's аккаунтов](http://theherdlocker.com/tweet/popularity/angular2)\n\n#### Серверный рендеринг \u003ca id=\"server-side-rendering\"\u003e\u003c/a\u003e\n\n* [Официальный репозиторий Angular Universal \\(GitHub\\)](https://github.com/angular/universal)\n* [Русскоязычный репозиторий Angular Universal \\(GitHub\\)](https://github.com/Angular-RU/angular-universal-starter)\n* [@ng-seed/universal](https://github.com/ng-seed/universal) - Angular Universal стартер\n\n#### Cheatsheet \\(чит-лист\\) \u003ca id=\"cheatsheet\"\u003e\u003c/a\u003e\n\n* [Официальный cheatsheet от Angular](https://angular.io/guide/cheatsheet)\n* [Официальный cheatsheet по AngularDart](https://docs.google.com/document/d/1FYyA-b9rc2UtlYyQXjW7lx4Y08MSpuWcbbuqVCxHga0/edit#heading=h.34sus6g4zss3)\n* [Еще один cheatsheet для AngularDart](https://github.com/andresaraujo/angular2_cheatsheet_dart)\n* [Чек-лист Angular Performance](https://github.com/mgechev/angular-performance-checklist)\n\n#### UI библиотеки \u003ca id=\"angular-ui\"\u003e\u003c/a\u003e\n\n**Material Design**\n\n* [Официальный репозиторий Angular Material Design \\(GitHub\\)](https://github.com/angular/material2)\n* [Коллекция Material Design компонентов \\(md2\\)](https://github.com/Promact/md2) \n* [Коллекция компонентов на основе материала Material Design Lite \\(angular2-mdl\\)](https://www.npmjs.com/package/angular2-mdl) \n* [Компоненты, созданные с помощью Google Material Design Lite framework \\(mdl-ext\\)](https://www.npmjs.com/package/mdl-ext)\n* [Компоненты Materialize library \\(ng2-materialize\\)](https://github.com/sherweb/ng2-materialize)\n* [Material Light](https://github.com/YagoLopez/material-light) \n* [Легковесная библиотека на основе Material Design](https://github.com/src-zone/material)\n\n**Other Design**\n\n* [NG Bootstrap](https://github.com/valor-software/ngx-bootstrap)\n* [PrimeNG](https://www.primefaces.org/primeng/#/)\n* [Onsen UI](https://onsen.io/angular2/)\n* [NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd)\n* [NG Lightning](https://github.com/ng-lightning/ng-lightning)\n* [NG Semantic-UI](https://github.com/vladotesanovic/ngSemantic)\n* [ng2-charts](https://valor-software.com/ng2-charts/)\n* [Clarity](https://github.com/vmware/clarity)\n* [Nebular](https://github.com/akveo/nebular)\n\n#### Важные особенности \u003ca id=\"features\"\u003e\u003c/a\u003e\n\n**Компоненты**\n\nКомпонент управляет отображением представления на экране, в ее основе используется Shadow DOM по умолчанию \\(для создания инкапсулированного визуального поведения\\). Как правило, компоненты используются для создания простого виджета в пользовательском интерфейсе, в то же время они могут представлять из себя набор еще более простых компонентов внутри себя \\(для увеличения абстракции и создания простых функциональных виджетов внутри приложения\\).\n\n```javascript\n@Component({\n  selector: 'html-name-element'\n})\nexport class MyComponent {\n  // ...\n}\n```\n\n**Шаблоны**\n\nШаблон - это ваша html-разметка, в которой вы можете описывать ваши взаимодействия с DOM на основе модели данных и событий вашего класса компонента \\(в примере, контроллер MyComponent\\).\n\n```javascript\n@Component({\n templateUrl: 'my.component.html'\n})\nexport class MyComponent {\n\n  public title: string = \"Hello world\";\n\n  // ..\n\n}\n```\n\n```markup\n\u003c!-- my.component.html --\u003e\n\u003cp\u003e\n  Интерполяция: {{ title }},  \n  или так:      {{ this.title }}\n\u003c/p\u003e\n```\n\n**Обнаружение изменений**\n\nКаждый компонент имеет свой собственный детектор изменений, который гарантирует проверку привязок данных, определенных шаблоне.\n\n**Внедрение зависимостей**\n\nВнедрение зависимостей \\(англ. Dependency Injection\\) — это композиция структурных шаблонов проектирования, при которой за каждую функцию приложения отвечает один, условно независимый объект \\(сервис\\), который может иметь необходимость использовать другие объекты \\(зависимости\\), известные ему интерфейсами. Зависимости передаются \\(внедряются\\) сервису в момент его создания.\n\n```javascript\n// logger.service.ts\n@Injectable()\nexport class LoggerService {\n  // ..\n\n  public get trace() {\n    return console.debug.bind(console);\n  }\n\n}\n```\n\n```javascript\n// my-component.component.ts\n@Component({ /* .. */ })\nexport class MyComponent {\n\n  constructor(private logger: LoggerService) {\n    logger.trace('Init MyComponent');\n  }\n\n}\n```\n\n**Директивы**\n\nДирективы позволяют получать прямой доступ к DOM ваших элементов. Они бывают двух видов: структурные и атрибутные.\n\nАтрибутная директива:\n\n```javascript\n@Directive({\n  selector: '[bold]'\n})\nexport class BoldDirective {\n\n    constructor(private elementRef: ElementRef){\n        this.elementRef.nativeElement.style.fontWeight = \"bold\";\n    }\n}\n```\n\nЗдесь внедряется сервис \"ElementRef\". Он представляет ссылку на элемент, к которому будет применяться директива:\n\n```markup\n\u003c!-- my-component.component.html --\u003e\n\u003cp bold\u003eHello world\u003c/p\u003e\n```\n\nСтруктурные директивы:\n\nСтруктурные директивы изменяют структуру DOM с помощью добавления или удаления html-элементов. Существует минимум три встроенных структурных директивы: ngIf, ngSwitch и ngFor.\n\n```javascript\n@Component({ /* ... */ })\nexport class AppComponent {\n    // ..\n\n    public items = [\"Apple iPhone\", \"Huawei Mate\", \"Samsung Galaxy\", \"Motorola Moto Z\"];\n}\n```\n\n```markup\n\u003c!-- my-component.component.html --\u003e\n\u003cul\u003e\n  \u003cli *ngFor=\"let item of items\"\u003e{{item}}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**Пайпы**\n\nПайп \\(pipe\\) представляет собой особый обработчик, который позволяет форматировать отображаемые значения\n\n```javascript\n// my-component.component.ts\n@Component({ /* .. */ })\nexport class MyComponent {\n  public fields = [ { id: 1 }, { id: 2 } ];\n}\n```\n\n```markup\n\u003c!-- my-component.component.html --\u003e\nЧитаемый вывод объекта: \n\u003cpre\u003e {{ fields | json }} \u003c/pre\u003e\n```\n\nПомимо стандартных, вы можете писать собственные\n\n```javascript\n@Pipe({ name: 'factorial' })\nexport class FactorialPipe implements PipeTransform {\n  transform(value: number, args?: any): number {\n    if (value \u003c= 0) return 0;\n\n    let result = 1;\n    for (let i = 1; i \u003c= value; i++) {\n        result = result * i;\n    }\n\n    return result;\n  }\n}\n```\n\n```javascript\n// my-component.component.ts\n@Component({ /* .. */ })\nexport class MyComponent {\n  public x = 5;\n}\n```\n\n```markup\n\u003c!-- my-component.component.html --\u003e\nФакториал числа {{ x }} равен {{ x | factorial }}\n\u003c!-- Факториал числа 5 равен 120 --\u003e\n```\n\n**Web Workers**\n\nПоддержка Web Worker в Angular предназначена для упрощенного распараллеливания в вашем приложении. Когда ваше приложение запускается, Angular проводит всю основную работу по обработке вашей логики в отдельных потоках, ядро выполняет вычисление в своем рабочем потоке, в то время как другие функции могут и вовсе выполняться не в потоках.\n\n**HTTP**\n\nСамый распространенный способ получить данные от web-служб — это через HttpClient сервис, доступный для внедрения зависимостей в ваших компонентах. Angular HttpClient довольно прост. Все, что нам нужно сделать, это вызвать метода get и передать ему url. Данный метод get возвращает объект Observable. Этот класс является частью библиотеки rxjs, которая используется во многих местах Angular'а.\n\n```javascript\n// rest.service.ts\n@Injectable()\nexport class RestService {\n\n  constructor(private httpClient: HttpClient) {}\n\n  public getByObservable(url: string): Observable\u003cany\u003e {\n      return this.httpClient.get(url);\n  }\n\n  public getByPromise(url: string): Promise\u003cany\u003e {\n      return this.httpClient.get(url).toPromise();\n  }\n\n}\n```\n\nПодобно обещанию \\(Promise\\), наблюдатель \\(Observable\\) не содержит в себе сразу значения. Вместо этого у него есть метод подписки\\(subscribe\\), где мы можем зарегистрировать обратный вызов\\(callback\\). Этот callback вызывается, как только результат будет доступен. Помимо обещания, Observable может вернуть более одного значения. Вы можете вернуть себе поток результатов. Но это не имеет значения в данном случае. В нашем случае Observable возвращает только одно значение.\n\n```javascript\n// my-component.component.ts\n@Component({ /* .. */ })\nexport class MyComponent {\n\n  constructor(private rest: RestService) {}\n\n  // Observable classic examples\n  public getFields() {\n    this.rest.getByObservable('http://anyurl.com').subscibe(value =\u003e{\n      // value - результат\n    },\n    error =\u003e {\n      // error - объект ошибки\n    });\n  }\n\n  // Promise classic examples\n  public async getAsyncField() {\n    try {\n      // value - результат\n      const value = await this.rest.getByPromise('http://anyurl.com');\n    } catch (error) {\n      // error - объект ошибки\n    }\n  }\n\n}\n```\n\n**Роутинг**\n\n* [Официальная документация Router](https://angular.io/guide/router.html#sts=Router%20imports)\n* [ui-router](https://github.com/angular-ui/ui-router)\n\n**Тестирование**\n\n* [Тестирование Http сервиса с Jasmine](http://chariotsolutions.com/blog/post/testing-http-services-angular-2-jasmine/)\n* [UI-тестирование компонентов с TestComponentBuilder](http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/)\n\n**Ahead-of-Time компиляция**\n\n* [Официальная документация](https://angular.io/guide/aot-compiler)\n* [AOT в Angular](http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/)\n* [Сборка Angular приложения для продакшена](http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/)\n* [Прояснения в Ahead-Of-Time компиляции в Angular](http://slides.com/wassimchegham/demystifying-ahead-of-time-compilation-in-angular-2-aot-jit)\n* [Несколько решений по работе с Ahead of Time \\(AOT\\)](https://blog.craftlab.hu/multiple-solutions-for-angular-ahead-of-time-aot-compilation-c474d9a0d508)\n* [Пример кода с Webpack и AOT](https://github.com/blacksonic/angular2-aot-webpack)\n* [Пример кода с Rollup и AOT](https://github.com/mgechev/angular2-ngc-rollup-build)\n\n#### Angular CLI\n\n\u003e Angular CLI - инструмент для быстрой разработки приложений на Angular\n\n* [Официальный сайт](https://cli.angular.io/) \n* [Официальный репозиторий](https://github.com/angular/angular-cli)\n\n#### Dev Tools\n\n* [@compodoc/ngd-cli](https://github.com/compodoc/ngd) - Просмотр зависимостей в Angular\n* [angular-playground](http://www.angularplayground.it/) - Scenario Driven Development\n* [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) - Инструменты разработчика для @ngrx/store.\n* [angular-prettyjson](https://github.com/matiboy/angular2-prettyjson) - Улучшенный вывод объектов в шаблоне для отладки \\(директива json\\)\n* [Augury](https://github.com/rangle/augury) - Chrome расширение разработчика для отладки \n* [angular-webpack-config](https://github.com/ng-seed/angular-webpack-config) - Заготовленная Webpack конфигурация для быстрого старта\n\n#### Starter Kit\n\n* [test-angular-seed-project](https://github.com/angular/angular2-seed) - Простой стартер Angular\n* [generator-ng-fullstack](https://github.com/ericmdantas/generator-ng-fullstack) - ng-fullstack yeoman генератор\n* [asaf-test](https://github.com/preboot/angular-library-seed) - Angular стартер от preboot\n* [angular-seed](https://github.com/mgechev/angular-seed) - Angular стартер от Minko Gechev - [clarity-seed](https://github.com/vmware/clarity-seed) - Clarity Design System's стартер\n* [Colmena CMS](https://github.com/colmena/colmena-cms) - Colmena CMS \\(LoopBack + Angular\\)\n\n#### Webpack стартеры \u003ca id=\"webpack\"\u003e\u003c/a\u003e\n\n* [Официальный сайт Webpack](https://webpack.js.org)\n* [Angular Webpack стартер от AngularClass \\(@PatrickJS\\)](https://github.com/gdi2290/angular-starter)\n* [Angular Webpack стартер от Preboot](https://github.com/preboot/angular-webpack)\n* [Angular Nightly Webpack стартер](https://github.com/qdouble/angular-webpack2-starter)\n* [Angular Webpack стартер с ASP.NET Core от Damien Bowden](https://github.com/damienbod/AngularWebpackVisualStudio)\n* [Webpack конфигурация для Angular разработки от ng-seed](https://github.com/ng-seed/angular-webpack-config)\n\n#### Angular Universal \u003ca id=\"universal-angular\"\u003e\u003c/a\u003e\n\n\u003e Universal \\(изоморфный\\) - рендеринг приложений Angular на серверной стороне\n\n**Universal \\(основные ресурсы\\)**\n\n* [Официальный репозиторий \\(GitHub\\)](https://github.com/angular/universal)\n\n**Основные источники**\n\n* [universal-starter](https://github.com/angular/universal-starter) - Angular Universal стартер от @Angular-Class\n* [ng-seed/universal](https://github.com/ng-seed/universal) - Angular Universal стартер с Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, TSLint/codelyzer\n\n#### Публикации \u003ca id=\"series\"\u003e\u003c/a\u003e\n\n* Ionic\n  * Angular\n    * [Введение](http://blog.ionic.io/angular-2-series-introduction/)\n    * [Компоненты](http://blog.ionic.io/angular-2-series-components/)\n* Auth0\n  * Angular\n    * [Работаем c пайпами \\(pipes\\)](https://auth0.com/blog/angular2-series-working-with-pipes/)\n    * [Паттерн проектирования Domain Model and Dependency Injection](https://auth0.com/blog/angular-2-series-part-2-domain-models-and-dependency-injection/)\n    * [Создание Desktop приложения на Angular 2 и Electron](https://auth0.com/blog/create-a-desktop-app-with-angular-2-and-electron/)\n* thoughtram\n  * Angular Template Syntax\n    * [Введение](https://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)\n* [letsboot.com](https://medium.com/letsboot)\n  * Test Driven Development\n    * [Angular TDD, Karma, Jasmine, PhantomJS, Gitlab-CI](https://medium.com/letsboot/angular-4-and-testing-angular-cli-gitlab-ci-ng-test-phantomjs-tdd-afc20f50b928)\n  * Angular and Firebase\n    * [Учимся настраивать и работать AngularFire](https://medium.com/letsboot/lets-learn-how-to-install-and-setup-angularfire2-4-0-135d72bb0a41)\n\n#### Видеоуроки \u003ca id=\"video-tutorials\"\u003e\u003c/a\u003e\n\n* [Egghead.io - Angular](https://egghead.io/technologies/angular2)\n* [Egghead.io - Разработка приложения на Angular + Redux](https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs)\n* [HiRez.io - Angular: основы](https://www.hirez.io/c/angular-basics-1/e/episode-1-course-overview)\n* [HiRez.io - Angular: введение в компоненты](https://www.hirez.io/c/components-1/e/episode-1-course-overview)\n* [Udemy - Введение в Angular](https://www.udemy.com/introduction-to-angular2/)\n* [Udemy - Angular и TypeScript для начинающих](https://www.udemy.com/angular-2-tutorial-for-beginners/)\n* [Udemy - Курс по Angular](https://www.udemy.com/the-complete-guide-to-angular-2/)\n* [Pluralsight - Angular: обзор](https://www.pluralsight.com/courses/angular-2-first-look)\n* [Pluralsight - Angular 2: Getting Started](https://www.pluralsight.com/courses/angular-2-getting-started-update)\n* [Channel9 - Будущее TypeScript](https://channel9.msdn.com/Events/Build/2015/3-644)\n* [Channel9 - Создание кроссплатформенных приложений с Angular](https://channel9.msdn.com/Events/Build/2016/T627)\n* [Code School - Разгоняем Angular](https://www.codeschool.com/courses/accelerating-through-angular)\n* [Angular Pro Скринкаст](https://www.youtube.com/playlist?list=PLLf-VBOaoVk3RI62s7nK5RD_yMKGCxAdL)\n* [Angular - типизированное хранилище](https://www.youtube.com/watch?v=bEkPEnudm7s\u0026feature=youtu.be)\n* [Angular - расширенные советы и рекомендации](https://www.youtube.com/watch?v=vyiyJCLlGwo\u0026feature=youtu.be)\n* [Angular Fullstack](https://www.youtube.com/channel/UCRefxaAA-7PfezH3CY87fzw)\n* [Angular Master Class](https://www.udemy.com/angular-crash-course-for-beginners)\n* [Learn JavascriptRu: Angular Screencast](https://learn.javascript.ru/screencast/angular)\n\n#### Стайл-гайды \u003ca id=\"style-guides\"\u003e\u003c/a\u003e\n\n* [Официальный Angular Style guide](https://angular.io/guide/styleguide)\n* [Описание того, как нужно составлять правила для TSLint](https://github.com/ng-seed/angular-tslint-rules)\n* [codelyzer](https://github.com/mgechev/codelyzer) - Линтер для Angular проектов\n* [angular-tslint-rules](https://github.com/ng-seed/angular-tslint-rules) - Сборник лучших правил TSLint \u0026 codelyzer\n\n#### Angular Connect конференция \u003ca id=\"angular-connect\"\u003e\u003c/a\u003e\n\n* [Основной доклад – Brad Green, Igor Minar and Jules Kremer](https://www.youtube.com/watch?v=UxjgUjVpe24)\n* [Стратегии тестирования Angular – Julie Ralph](https://www.youtube.com/watch?v=C0F2E-PRm44)\n* [Создание нативных мобильных приложений с Angular and NativeScript​ - Sebastian Witalec](https://www.youtube.com/watch?v=4SbiiyRSIwo)\n* [Angular Data Flow – Jeff Cross, Rob Wormald and Alex Rickabaugh](https://www.youtube.com/watch?v=bVI5gGTEQ_U)\n* [Стратегии итеративных обновлений больших Angular-приложений – Jen Bourey](https://www.youtube.com/watch?v=8tGcdaItj0I)\n* [Отладка Angular приложений с использованием Batarangle – Yuri Takhteyev and Igor Krivanov](https://www.youtube.com/watch?v=cAC4d3KIQcM)\n* [Разработка приложений с Firebase and Angular - Sara Robinson](https://www.youtube.com/watch?v=RD0xYicNcaY)\n* [Концепции Angular - Victor Savkin and Tobias Bosch](https://www.youtube.com/watch?v=4YmnbGoh49U)\n* [Модульность Angular приложений – Pawel Kozlowski](https://www.youtube.com/watch?v=9odY9Rh5kTQ)\n* [Создание приложений реального времени на Angular и Meteor - Uri Goldshtein](https://www.youtube.com/watch?v=3FT0BqYASCo)\n\n#### Книги \u003ca id=\"books\"\u003e\u003c/a\u003e\n\n* [ng-book 2](https://www.ng-book.com/2/) `fullstack.io`\n* [Как стать ниндзя в Angular](https://books.ninja-squad.com/angular) `Ninja Squad`\n* [Angular разработка с TypeScript](https://www.manning.com/books/angular-2-development-with-typescript) `Manning Publications`\n* [Angular в бою](https://www.manning.com/books/angular-in-action) `Manning Publications`\n* [Практики Angular](https://leanpub.com/practical-angular-2) `Leanpub`\n* [Переходим на Angular](https://www.packtpub.com/web-development/switching-angular-2) `Packt Publishing`\n* [Angular тренинги](https://www.gitbook.com/book/rangle-io/ngcourse2/details) `Rangle.io`\n* [Изучаем Angular](http://learnangular2.com/) `Ionic Team`\n* [Тестирование Angular приложений](https://www.manning.com/books/testing-angular-applications) `Manning Publications`\n\n#### Онлайн тренинги \u003ca id=\"on-site-training\"\u003e\u003c/a\u003e\n\n* [AngularClass](https://angularclass.com)\n* [Angular Boot Camp](https://angularbootcamp.com)\n* [thoughtram](http://thoughtram.io/training.html)\n* [Egghead.io](https://egghead.io/angularjs-enterprise-training-workshop)\n* [ng-book](https://www.ng-book.com/2/)\n* [Angular Workshop](http://chariotsolutions.com/course/angular-workshop-fundamentals-architecture/)\n* [Web Age Solutions](http://www.webagesolutions.com/courses/WA2533-introduction-to-angular-2-programming)\n* [Letsboot.com](https://www.letsboot.com/angular-2-in-house-training-support)\n* [Free on-site 2-days training delivered by SFEIR \\(in France\\)](https://school.sfeir.com/project/sa200/)\n\n#### Подборка статей \u003ca id=\"approach-and-explanation\"\u003e\u003c/a\u003e\n\n* Victor Savkin\n  * [Внедрение зависимостей \\(DI\\) в AngularJS и Angular](https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18)\n  * [Пишем на Angular с Typescript](https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8)\n  * [Angular - синтаксис шаблонов](https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a)\n  * [Концепция The Core Concepts of Angular 2](https://vsavkin.com/the-core-concepts-of-angular-2-c3d6cbe04d04)\n  * [Основные файзы при разработке на Angular](https://vsavkin.com/two-phases-of-angular-2-applications-fda2517604be)\n  * [Стратегии обнаружения в Angular](https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c)\n  * [Поддержка функционального программирования](https://vsavkin.tumblr.com/post/108837493941/better-support-for-functional-programming-in)\n  * [Angular: унифицированный Dependency Injection](https://vsavkin.tumblr.com/post/102965317996/angular-2-bits-unified-dependency-injection)\n  * [Angular Router](https://vsavkin.com/angular-2-router-d9e30599f9ea)\n* AngularClass\n  * [Автоматизированное развертывание приложений на Angular и Webpack](https://angularclass.com/blog/automated-angular-2-conventions-with-webpack/)\n  * [Angular для AngularJS разработчиков](https://angularclass.com/blog/angular-2-for-angularjs-developers/)\n  * [Angular 2 для ReactJS разработчиков](https://angularclass.com/blog/angular-2-for-react-developers/)\n* thoughtram\n  * [Разработка компонента tabs \\(вкладки\\) в Angular](https://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html)\n  * [Разработка zippy-компонента в Angular](https://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html)\n  * [Введение в сервисы в Angular](https://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html)\n  * [Forward references в Angular](https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html)\n  * [Видимость в DI в Angular 2](https://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html)\n  * [Dependency Injection in Angular 2](https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html)\n  * [Роутинг в Angular](https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html)\n  * [Angular - синтаксис шаблонов](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)\n  * [View Encapsulation в Angular](https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)\n  * [Стилизация Angular компонентов](https://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html)\n  * [ES5 для Angular](https://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html)\n  * [Пишем на JS в Angular](https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html)\n  * [Разница между аннотациями и декораторами](https://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html)\n* Hristo Georgiev\n  * [Отладка Angular приложений](https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications)\n* Helgevold Consulting\n  * [Web Workers в Angular](http://www.syntaxsuccess.com/viewarticle/web-workers-in-angular-2.0)\n  * [Создание сетки для Angular](http://www.syntaxsuccess.com/viewarticle/virtualized-spreadsheet-component-in-angular-2.0)\n  * [Socket.io с Observables](http://www.syntaxsuccess.com/viewarticle/socket.io-with-rxjs-in-angular-2.0)\n  * [Change Detection в Angular](http://www.syntaxsuccess.com/viewarticle/change-detection-in-angular-2.0)\n* Burak Tasci \\(fulls1z3\\)\n  * [Angular - server side rendering \\(Angular Universal\\)](https://medium.com/burak-tasci/angular-4-with-server-side-rendering-aka-angular-universal-f6c228ded8b0)\n\n#### Интеграции \u003ca id=\"integrations\"\u003e\u003c/a\u003e\n\n* [FalcorJS + Angular \\(видео\\)](https://www.youtube.com/watch?v=z8UgDZ4rXBU\u0026feature=youtu.be)\n* [Angular + Meteor](http://angular-meteor.com/angular2)\n* [NativeScript + Angular](https://github.com/NativeScript/nativescript-angular)\n* [ReactNative + Angular](https://github.com/angular/react-native-renderer)\n* [GraphQL + Angular](https://github.com/apollographql/apollo-angular)\n* [angularfire2](https://github.com/angular/angularfire2) - Официальная библиотека Angular для Firebase\n* [angular-jwt](https://github.com/auth0/angular2-jwt) Библиотека для отправки аутентифицированных HTTP-запросов и декодирования JWT\n* [angular-meteor](https://github.com/Urigo/angular-meteor) - Angular + Meteor\n* [angulartics2](https://github.com/angulartics/angulartics2) - GoogleAnalytics + Angular\n* [perfectedtech-loopback-sdk-builder](https://github.com/mean-expert-official/loopback-sdk-builder) - SDKs LoopBack\n* [karma-typescript](https://github.com/monounity/karma-typescript) - Простой стартер для написания юнит тестов с Karma\n* [meteor-rxjs](https://github.com/Urigo/mongo-rxjs-observable) - Имплементация Mongo + RxJS Observable\n* [wp-api-angular](https://github.com/shprink/wp-api-angular) - Angular сервисы для WordPress WP-API\\(v2\\) or WP \u0026gt;= 4.7\n* [selfbits-angular-sdk](https://github.com/selfbits/selfbits-angular2-sdk) - Angular SDK  Backend-as-a-Service.\n* [ng-wp-api](https://github.com/MurhafSousli/ng2-wp-api) - Angular WordPress модуль\n* [angular-disqus](https://github.com/Useful-Software-Solutions-Ltd/angular2-disqus) - DISQUS + Angular\n* [@cloudinary/angular](https://github.com/cloudinary/cloudinary_angular) - пользовательская библиотека Cloudinary\n* [ng-recaptcha](https://github.com/dethariel/ng2-recaptcha) - Angular + Google reCAPTCHA.\n* [angular-recaptcha](https://github.com/xmaestro/angular2-recaptcha) - Angular + Google reCaptcha \\(еще один компонент\\)\n* [pubnub-angular2](https://github.com/pubnub/pubnub-angular2) - Официальный PubNub для Angular\n* [ng-awesome-disqus](https://github.com/MurhafSousli/ng2-disqus) - Модуль для работы с Disqus\n* [angular-esri-loader](https://github.com/tomwayson/angular2-esri-loader) - ArcGIS API\n* [@ngx-universal/state-transfer](https://github.com/fulls1z3/ngx-universal) - Передача состояния в изоморфных приложениях\n\n#### Подборка компонентов \u003ca id=\"components-list\"\u003e\u003c/a\u003e\n\n* [Material 2](https://github.com/angular/material2) - Компоненты от Material Design\n* [NG ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) - Enterprise компоненты, основанные на Ant Design\n* [Element Angular](https://github.com/eleme/element-angular) - Element Design компоненты\n* [ng-bootstrap](https://github.com/valor-software/ngx-bootstrap) Нативный Bootstrap для Angular\n* [ng-charts](https://github.com/valor-software/ng2-charts) Компоненты диаграмм основанные на Chart.js\n* [ng-dragula](https://github.com/valor-software/ng2-dragula) Drag and Drop\n* [ng-file-upload](https://github.com/valor-software/ng2-file-upload) Простая директива для загрузки файлов\n* [ng-handsontable](https://github.com/valor-software/ng2-handsontable) Excel-подобная таблица \\(data grid / spreadsheet\\)\n* [ng-markdown](https://github.com/evanplaice/ng2-markdown) Angular Markdown компонент\n* [ng-select](https://github.com/valor-software/ng2-select) Angular компонент для select\n* [ng-safe-img](https://github.com/hyzhak/ng2-safe-img) Простая директива для обработки событий ошибки загрузки картинок \\(img\\)\n* [ng-table](https://github.com/valor-software/ng2-table) Простой компонент таблицы с сортировкой и фильтрацией\n* [ng-smart-table](https://github.com/akveo/ng2-smart-table) Smart-компонент таблицы\n* [ng-bs](https://github.com/pkozlowski-opensource/ng2-bs) Директивы для Bootstrap\n* [ng-lightning](https://github.com/ng-lightning/ng-lightning) Компоненты основанные на Lightning Design System\n* [ag-grid](https://www.ag-grid.com/) Улучшенный Datagrid\n* [angular-query-builder](https://github.com/zebzhao/Angular-QueryBuilder) Усовершенствованные запросы на основе jquery QueryBuilder\n* [angular-grid](https://github.com/BTMorton/angular2-grid) drag/drop/resize сетка\n* [angular-fontawesome](https://github.com/travelist/angular2-fontawesome) Angular компоненты и директивы для Fontawesome\n* [angular-google-maps](https://github.com/SebastianM/angular-google-maps) Angular директивы для Google Maps\n* [angular-cesium](https://github.com/TGFTech/angular-cesium) Создание map web apps с использованием Cesium\n* [ng-radio-group](https://github.com/pleerock/ngx-select-controls) Angular директивы для radio/checkbox\n* [ng-dropdown](https://github.com/pleerock/ngx-dropdown) Выпадающее меню на основе bootstrap 3\n* [angular-multiselect-dropdown](https://github.com/CuppaLabs/angular2-multiselect-dropdown) Выпадающее меню \\(multiselect\\)\n* [ng-progress-bar](https://github.com/pleerock/ngx-progress-bar) Простой progress bar\n* [ng-tabs](https://github.com/pleerock/ngx-tabs) Tabs control для angular\n* [ng-modal](https://github.com/pleerock/ngx-modal) Модальные окна\n* [ng-sheet](https://github.com/lexikteam/ng2-sheet) Динамические компоненты меню\n* [ng-paginator](https://github.com/pleerock/ngx-paginator) Контроллы пагинации для angular\n* [fuel-ui](https://github.com/FuelInteractive/fuel-ui) Bootstrap 4 компоненты и директивы\n* [prime-ng](https://www.primefaces.org/primeng/)  Коллекция Primeng-компонентов\n* [ng-ace](https://github.com/seiyria/ng2-ace) Ace editor на Angular\n* [ng-fontawesome](https://github.com/seiyria/ng2-fontawesome) Простая директива для fontawesome\n* [ng-sweetalert2](https://github.com/seiyria/ng2-sweetalert2) Обертка над sweetalert2 \n* [angular-text-mask](https://github.com/text-mask/text-mask) Angular input маска \\(директива\\)\n* [angular-imask](https://github.com/uNmAnNeR/imaskjs/tree/gh-pages/plugins/angular) Еще одна input маска \\(директива\\)\n* [ng-fullpage](https://github.com/meiblorn/ngx-fullpage) Fullpage скролл на основе fullPage.js\n* [file-droppa](https://github.com/ptkach/fileDroppa) Простой загрузчик файлов на основе drag and drop\n* [ngx-img-fallback](https://github.com/VadimDez/ngx-img-fallback) Placeholder загрузки для image и image error\n* [angular-busy](https://github.com/devyumao/angular2-busy) Индикатор загрузки для Promise, Observable's\n* [ng-pdf-viewer](https://github.com/VadimDez/ng2-pdf-viewer) PDF viewer на Angular\n* [Covalent](https://teradata.github.io/covalent/) - UI набор компонентов на основе Material Design\n* [ng2-alfresco-core](https://github.com/Alfresco/alfresco-ng2-components) - Alfresco набор компонентов\n* [angular-infinite-scroll](https://www.npmjs.com/package/angular2-infinite-scroll) - Бесконечный скролл на Angular\n* [ng-card](https://github.com/c-bata/ng2-card) - Card-компоненты\n* [Wijmo 5](http://wijmo.com/products/wijmo-5/) - Набор компонентов пользовательского интерфейса для Angular\n* [ng-swipeable-card](https://github.com/JayKan/ng2-swipeable-card) - Перетаскиваемые card-компонентыы\n* [ngSemantic](https://github.com/vladotesanovic/ngSemantic) - Компоненты пользовательского интерфейса на основе  Semantic UI\n* [vmware clarity](https://github.com/vmware/clarity) - Clarity набор компонентов от VMware\n* [Teradata covalent](https://github.com/Teradata/covalent/) - Набор компонентов пользовательского интерфейса на основе materialize\n* [ng-quill-editor](https://github.com/surmon-china/ngx-quill-editor) - Quill editor компонент\n* [ngx-charts](https://github.com/swimlane/ngx-charts) - Настраиваемый Charting-фреймворк на Angular\n* [ngx-datatable](https://github.com/swimlane/ngx-datatable)  Функциональный и легкий компонент таблиц данных\n* [ngx-ui](https://github.com/swimlane/ngx-ui) - Библиотека стилей и компонентов ngx-ui\n* [Cloudinary](https://github.com/cloudinary/cloudinary_angular/tree/angular_next) - Angular SDK для управления изображениями и видео в облаке\n* [angular-simple-countdown](https://github.com/previousdeveloper/angular2-simple-countdown) - Простой countdown\n* [ng-animate](https://github.com/jiayihu/ng-animate) - Коллекция крутых анимаций\n* [lottie-angular](https://github.com/chenqingspring/ng-lottie) - After Effects анимации для Angular\n* [ngx-restangular](https://github.com/2muchcoffeecom/ngx-restangular) - Restangular сервис\n* [ngfb-sortable-table](https://github.com/NodeArt/Angular-Firebase-Sortable-Table) - Angular Firebase Table компоненты\n* [angular-split](https://github.com/bertrandg/angular-split) Angular split компонент\n* [od-virtualscroll](https://github.com/dinony/od-virtualscroll) Бесконечный скролл на Observable\n* [angular-froala-wysiwyg](https://github.com/froala/angular-froala-wysiwyg) WYSIWYG HTML Editor на Angular\n* [ngx-meta](https://github.com/fulls1z3/ngx-meta) - Утилита Dynamic page для Angular Universal\n* [ng-meta](https://github.com/vinaygopinath/ng2-meta) - Динамические meta для SEO\n* [ngx-config](https://github.com/fulls1z3/ngx-config) - Настройки для Angular \\(Angular Universal loader\\)\n* [ngx-i18n-router](https://github.com/fulls1z3/ngx-i18n-router) - Роутинг с учетом локализации\n* [ngx-auth](https://github.com/fulls1z3/ngx-auth)  Сервис аутентификации\n* [angular-promise-buttons](https://github.com/johannesjo/angular2-promise-buttons) - Кнопка загрузки\n* [ng-archwizard](https://github.com/madoar/ng2-archwizard) - Wizard компонент\n* [ngx-popper](https://github.com/MrFrankel/ngx-popper) - Tooltip менеджер на основе popper.js\\([https://popper.js.org/](https://popper.js.org/)\\)\n* [ngx-avatar](https://github.com/HaithemMosbahi/ngx-avatar) - Компонент аватарок\n* [ngx-qrcode2](https://github.com/techiediaries/ngx-qrcode) - Компонент для генерации QR \\(Quick Response \\) кода \n* [ng2-permission](https://github.com/JavadRasouli/ng2-permission) - Полнофункциональный контроль доступа на основе ролей и прав в вашем приложении [`angular-permission`](https://github.com/Narzerus/angular-permission).\n* [ng-s-resource](https://github.com/hiyali/ng-s-resource) - Простой RESTful http генератор ресурсов\n* [ng-data-picker](https://github.com/hiyali/ng-data-picker) - Data picker\n* [ngx-siema](https://github.com/lexzhukov/ngx-siema) - Простая карусель\n* [ng-bootstrap](https://ng-bootstrap.github.io) - Angular директивы для Bootstrap 4\n* [ng-snotify](https://github.com/artemsky/ng-snotify/) - Angular Notification Center\n* [ngx-permissions](https://github.com/AlexKhymenko/ngx-permissions) - Управление доступом и ролями\n* [nebular](https://github.com/akveo/nebular) - Фреймворк Nebular основанный на Angular\n* [ng-select](https://github.com/ng-select/ng-select) ng-select \\(Select, Multiselect, Autocomplete\\)\n* [ng-katex](https://github.com/garciparedes/ng-katex) Модуль для математических выражений с синтаксисом TeX\n* [ng-fullcalendar](https://github.com/Jamaks/ng-fullcalendar) календарь для Angular\n* [angular-modal](https://github.com/shlomiassaf/angular2-modal) - Angular + нативный Dialog компонент\n* [ng-bs3-modal](https://github.com/dougludlow/ng2-bs3-modal) - Angular + Bootstrap3 Компонент модального окна\n* [angular-toaster](https://github.com/stabzs/Angular2-Toaster) - Angular компонент асинхронных неблокирующих уведомлений \\(toaster\\)\n* [ng-toasty](https://github.com/akserg/ng2-toasty) - Angular Toasty компонент\n* [ng-notifications](https://github.com/alexcastillo/ng2-notifications) - Angular компонент с поддержкой Push Notifications\n* [ngx-toastr](https://github.com/scttcper/ngx-toastr) - Angular toastr\n* [@ngrx/notify](https://github.com/ngrx/notify) - Web уведомления на RxJS\n* [angular-notifications](https://github.com/flauc/angular2-notifications) - Простой и легкий в использовании компонент нотификаций и уведомлений\n* [angular-notifier](https://github.com/dominique-mueller/angular-notifier) - Отличная библиотека нотификаций с крутыми и настраиваемыми анимациями\n* [ng-toastr](https://github.com/PointInside/ng2-toastr) - Bootstrap toast\n* [angular-confirmation-popover](https://github.com/mattlewis92/angular-confirmation-popover) - Отображает всплывающее подтверждение загрузки \\(без jQuery или bootstrap\\)\n* [angular-datatable](https://github.com/mariuszfoltak/angular2-datatable) - DataTable компонент для Angular с сортировкой и пагинацией\n* [ng-easy-table](https://github.com/ssuperczynski/ng2-easy-table) - Простая таблица для Angular\n* [ag-grid-angular](https://github.com/ceolter/ag-grid-angular) - Ag-Grid компонент\n* [angular-tree-component](https://github.com/500tech/angular2-tree-component) - Простой компонент отображающий список в виде дерева\n* [ng-tree](https://github.com/valor-software/ng2-tree) - Компонент  для визуализации данных, которые могут быть представлены естественным образом в виде дерева\n* [ng-slim-loading-bar](https://github.com/akserg/ng2-slim-loading-bar) - компонент элемента загрузки на странице\n* [angular-ladda](https://github.com/moff/angular2-ladda) - Angular Ladda модуль\n* [ng-spin-kit](https://github.com/WoltersKluwerPL/ng-spin-kit) - SpinKit \\(спиннер\\)\n* [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) - мощный progress bar\n* [ng-sidebar](https://github.com/arkon/ng-sidebar) - Angular sidebar компонент\n* [angular-highcharts](https://github.com/gevgeny/angular2-highcharts) - Highcharts компонент\n* [ng-nvd3](https://github.com/krispo/ng2-nvd3) - Angular компонент для nvd3\n* [angular-google-maps](https://github.com/SebastianM/angular2-google-maps) - Angular + Google Maps\n* [ng-map](https://github.com/ng2-ui/ng2-map) - Angular + Google Maps \\(директива\\)\n* [angular-esri4-components](https://github.com/kgs916/angular2-esri4-components) - Angula + ArcGIS API\n* [ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll) - Бесконечный скролл \\(директива\\)\n* [ng-parallax-scroll](https://github.com/ng2-ui/ng2-parallax-scroll) - Angular parallax\n* [angular-perfect-scrollbar](https://github.com/zefoy/ngx-perfect-scrollbar) - Angular scrollbar\n* [angular-swiper-wrapper](https://github.com/zefoy/ngx-swiper-wrapper) - Angular swiper\n* [@ngui/sticky](https://github.com/ng2-ui/sticky) - Angular \"position: sticky\" директива\n* [angular-contextmenu](https://github.com/isaacplmann/angular2-contextmenu) - Компонент контекстного меню\n* [angular-moment](https://github.com/urish/angular2-moment) - Moment.js пайпы \\(pipes\\)\n* [videogular](https://github.com/videogular/videogular2) - HTML5 video player + Angular\n* [ng-inline-svg](https://github.com/arkon/ng-inline-svg) - Angular директива для добавления SVG файлов в виде инлайн-элемента\n* [ng-sharebuttons](https://github.com/MurhafSousli/ng2-sharebuttons) - Кнопка \"поделиться\"\n* [ng-inline-editor](https://github.com/caballerog/ng2-inline-editor) - Нативный UI редактор\n* [ng-markdown-to-html](https://github.com/jfcere/ng2-markdown-to-html) - Markdown компонент\n* [ngx-no-animation-for-dinosaur](https://github.com/maxisam/ngx-no-animation-for-dinosaur) - Простое решение для отключения анимации для определенного браузера\n* [ng-datepicker](https://github.com/jkuri/ng2-datepicker) - Angular Datepicker\n* [mydatepicker](https://github.com/kekeh/mydatepicker) - Angular date picker\n* [ng-datetime](https://github.com/nkalinov/ng2-datetime) - Datetime picker\n* [ng-date-picker](https://github.com/vlio20/ng2-date-picker) - Крутой и настраиваемый date picker компонент\n* [angular-material-datepicker](https://github.com/koleary94/Angular-2-Datepicker) - Angular Datepicker + material design\n* [ngx-color-picker](https://github.com/zefoy/ngx-color-picker) - Color picker\n* [angular-color-picker](https://github.com/Alberplz/angular2-color-picker) - Angular Color Picker \\(директива\\)\n* [ng-color-picker](https://github.com/AndyMeps/ng2-color-picker) - Простой color picker\n* [ng-slider-component](https://github.com/Bogdan1975/ng2-slider-component) - Angular slider \n* [angular-select](https://github.com/basvandenberg/angular2-select) - Нативный select \n* [ng-completer](https://github.com/oferh/ng2-completer) - Angular autocomplete \n* [ng-auto-complete](https://github.com/ng2-ui/ng2-auto-complete) - AutoComplete.\n* [ng-tag-input](https://github.com/Gbuomprisco/ng2-tag-input) - Tag Input \n* [ng-dnd](https://github.com/akserg/ng2-dnd) - Angular 2 Drag-and-Drop without dependencies.\n* [ng-drag-drop](https://github.com/ObaidUrRehman/ng-drag-drop) - Drag \u0026 Drop\n* [angular-sortablejs](https://github.com/SortableJS/angular-sortablejs) - Angular + SortableJS\n* [soft-angular-mask](https://github.com/renatosistemasvc/soft-angular-mask) - Директива маски для ввода денежной валюты\n* [ng-ckeditor-codemirror](https://github.com/chymz/ng2-ckeditor) - Angular CKEditor \n* [angular-voog-wysihtml](https://github.com/zefoy/ngx-voog-wysihtml) - Voog wysihtml\n* [angular-froala-wysiwyg](https://github.com/froala/angular2-froala-wysiwyg) - Froala WYSIWYG\n* [ngx-uploader](https://github.com/jkuri/ngx-uploader) - Angular файловый загрузчик\n* [angular-dropzone-wrapper](https://github.com/zefoy/ngx-dropzone-wrapper) - Angular  dropzone\n* [angular-autosize](https://github.com/stevepapa/angular2-autosize) - Angular-autosize директива для textarea\n* [angular-calendar](https://github.com/mattlewis92/angular2-calendar) - flexible календарь\n* [angular-fullcalendar](https://github.com/nekken/ng2-fullcalendar) - Angular fullcalendar\n* [ng2-img-cropper](https://github.com/cstefanache/angular2-img-cropper) - Angular Image Cropper\n* [angular-mdl](https://github.com/mseemann/angular2-mdl) - Angular material design lite\n* [igniteui-angular2](https://github.com/IgniteUI/igniteui-angular2) - Ignite UI\n* [igniteui-js-blocks](https://github.com/IgniteUI/igniteui-js-blocks) - Mobile-first нативный компонент\n* [devextreme-angular](https://github.com/DevExpress/devextreme-angular) - DevExtreme виджеты\n* [ng-fullpage](https://github.com/meiblorn/ng2-fullpage) - Angular fullpage скроллинг\n* [ngresizable](https://github.com/mgechev/ngresizable) - Растягиваемые компоненты\n* [@angular/flex-layout](https://github.com/angular/flex-layout)\n* [ng-bootstrap](https://github.com/valor-software/ng2-bootstrap) - Нативные директивы для Bootstrap\n* [@ng-bootstrap/ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap) - Angular + Bootstrap\n* [angular-materialize](https://github.com/InfomediaLtd/angular2-materialize) - Angular + Materialize\n* [ng-semantic-ui](https://github.com/edcarroll/ng2-semantic-ui) - Semantic UI\n* [clarity-angular](https://github.com/vmware/clarity) - Clarity Design System\n* [ng-pagination](https://github.com/michaelbromley/ng2-pagination) - Пагинатор\n* [ngx-clipboard](https://github.com/maxisam/ngx-clipboard) - Директива clipboard.js.\n* [ng-tour](https://github.com/isaacplmann/ng2-tour) - Построение информационных переходов по приложению\n* [sula](https://sula.ngx-kit.com) - UI-kit созданный на основе [ngx-kit](https://github.com/Angular-RU/angular-ngx-kit)\n* [ckeditor4-angular](https://github.com/ckeditor/ckeditor4-angular) - An official CKEditor 4 rich text editor component for Angular 2+\n* [ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular) - An official CKEditor 5 rich text editor component for Angular 2+\n* [bmb-ripple](https://github.com/bmarvinb/bmb-ripple) - Директива которая добавляет эффект ряби на DOM-элемент, очень легковесная и с гибкой настройкой.\n\n#### Пайпы \\(pipes\\) \u003ca id=\"pipes-seed\"\u003e\u003c/a\u003e\n\n* [fuel-ui](https://github.com/FuelInteractive/fuel-ui) - OrderBy и Range, портированные из AngularJS 1.x в Angular\n* [ngx-filter-pipe](https://github.com/VadimDez/ngx-filter-pipe) Пайп \\(pipe\\) для фильтрации массивов\n* [ngx-pipes](https://github.com/danrevah/ngx-pipes) набор полезных пайпов для Angular\n* [ngx-order-pipe](https://github.com/VadimDez/ngx-order-pipe) OrderBy - сортировка коллекций\n* [angular2-camelcase](https://github.com/previousdeveloper/angular2-camelcase) Пайп для преобразования строк в camelCase\n* [angular-pipes](https://github.com/fknop/angular-pipes) - Используем крутые пайпы\n* [ngx-pipes](https://github.com/danrevah/ngx-pipes) - Пайпы без единой зависимости\n* [ng-pipes](https://github.com/a8m/ng-pipes) -  Набор полезных пайпов\n* [angular-linky](https://github.com/dzonatan/angular2-linky) - Linky пайп\n\n#### Структуры данных и манипуляции состоянием \u003ca id=\"persistence\"\u003e\u003c/a\u003e\n\n* [angular-localstorage](https://github.com/marcj/angular2-localstorage) - Декоратор для автоматического сохранения и восстановления полей классов из LocalStorage\n* [ng-webstorage](https://github.com/PillowPillow/ng2-webstorage) - LocalStorage и SessionStorage менеджер\n* [ng-storage](https://github.com/seiyria/ng2-storage) localStorage и sessionStorage обертки\n* [angular-safeguard](https://github.com/MikaAK/angular-safeguard) - Обертка над cookies/sessionStorage/localStorage\n* [@ngx-cache/core](https://github.com/fulls1z3/ngx-cache) - Умное кеширование в Angular\n* [angular-cookie](https://github.com/salemdar/angular2-cookie) Библиотека имплементирующая из AngularJS 1.x $cookies-сервис в Angular\n* [ng-http-cache](https://github.com/davguij/angular-http-cache) - Кеширование http-запросов\n\n#### Роутинг \u003ca id=\"routing\"\u003e\u003c/a\u003e\n\n* [ng-breadcrumb](https://github.com/gmostert/ng2-breadcrumb) - генератор иерархии маршрутизации на основе вложенного роутинга\n* [ng-page-transition](https://github.com/bergben/ng2-page-transition) - Простой компонент с анимированными переходами при имезении маршрутизации\n* [@ngx-i18n-router/core](https://github.com/fulls1z3/ngx-i18n-router) - Инструмент интернационализации роутинга\n\n#### Валидация \u003ca id=\"validation\"\u003e\u003c/a\u003e\n\n* [ng-validators](https://github.com/gangachris/ng-validators) - Простой валидатор реактивных форм, основанный на [validator.js](https://github.com/chriso/validator.js)\n* [ng-validation](https://github.com/yuyang041060120/angular2-validate) -Простая валидации на Angular\n* [ngx-dynamic-form-builder](https://github.com/EndyKaufman/ngx-dynamic-form-builder) - Крутой валидатор реактивных форм на основе [class-validator](https://github.com/typestack/class-validator) и [class-transformer](https://github.com/typestack/class-transformer)\n\n#### Логгирование \u003ca id=\"logging\"\u003e\u003c/a\u003e\n\n* [angular-logger](https://github.com/code-chunks/angular2-logger) - Реализация log4j для angular\n* [@nsalaun/ng-logger](https://github.com/noemi-salaun/ng2-logger) - Простой сервис логгирования\n\n#### i18n \u003ca id=\"i18n\"\u003e\u003c/a\u003e\n\n* [@ngx-translate/core](https://github.com/ngx-translate/core) - Удобная библиотека для работы с файлами локализаций \\(i18n\\)\n* [@angular-ru/ngx-i18n-combine](https://github.com/Angular-RU/ngx-i18n-combine) - Объединение файлов i18n из компонентов и общих файлы для ваших локализаций \\(json, ts, js, jsx, tsx\\)\n* [angular-l10n](https://github.com/robisim74/angular-l10n) - Библиотека для перевода сообщений, дат и цифр\n* [@ngx-universal/translate-loader](https://github.com/fulls1z3/ngx-translate) - Лоадер, который обеспечивает переводы на стороне браузер или сервера\n\n#### Производительность \u003ca id=\"perfomance\"\u003e\u003c/a\u003e\n\n* [angular-performance-checklist](https://github.com/mgechev/angular-performance-checklist) - чеклист советов по улучшению производительности приложений на Angular \n* [@angularclass/idle-preload](https://github.com/AngularClass/angular2-idle-preload) - Idle Preload для предварительной загрузки асинхронных маршрутов\n\n#### Ленивая загрузка \u003ca id=\"lazy-load\"\u003e\u003c/a\u003e\n\n* [ng-lazyload-image](https://github.com/tjoskar/ng2-lazyload-image) - Ленивая подргузка изображений на Agular\n* [ng-image-lazy-load](https://github.com/NathanWalker/ng2-image-lazy-load) - Лоадер для ленивой загрузки изображений\n\n#### Лоадеры \u003ca id=\"loaders\"\u003e\u003c/a\u003e\n\n* [gulp-inline-ng-template](https://github.com/ludohenin/gulp-inline-ng2-template) - Gulp-плагин  для встраивания HTML и CSS в @Component-декоратор.\n* [angular-template-loader](https://github.com/TheLarkInn/angular2-template-loader) - Объединяет все html и css в единое целое при компиляции компонентов\n* [angular-router-loader](https://github.com/brandonroberts/angular-router-loader) - Webpack лоадер, который позволяет загружать модули на основе строки с помощью маршрутизатора\n  * [angular-hot-loader](https://github.com/mgechev/angular2-hot-loader) - Angular hot лоадер\n\n#### Примеры приложений \u003ca id=\"site-templates\"\u003e\u003c/a\u003e\n\n* [NG-Dashboard](https://github.com/YagoLopez/ng-dashboard) - Dashboard для Angular 4+. Компоненты пользовательского интерфейса на основе [Material Light](https://github.com/YagoLopez/material-light?ref=awesome-angular). Компоненты диаграмм на основе [MetricsGraficsJS](https://www.metricsgraphicsjs.org). Map директива на основе [LeafletJS](http://leafletjs.com). [DEMO ONLINE](http://yagolopez.js.org/ng-dashboard/dist/)\n* [angular-iot](https://github.com/urish/angular2-iot) - Internet of Things директивы\n* [@manekinekko/angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) - Bluetooth модуль для Angular\n\n#### Генераторы \u003ca id=\"generators\"\u003e\u003c/a\u003e\n\n* Node.js\n  * Slush\n    * [TheVelourFog/slush-angular2](https://github.com/RyanMetin/slush-angular2)\n  * Yeoman\n    * [swirlycheetah/generator-angular2](https://github.com/chrisdwheatley/generator-angular2)\n  * Faristo\n    * [majodi/generator-angular2](https://github.com/majodi/Faristo)\n  * ngX-Rocket:\n    * [ngx-rocket/generator-ngx-rocket](https://github.com/ngx-rocket/generator-ngx-rocket)\n    * [ngx-rocket/cli](https://github.com/ngx-rocket/cli)\n    * [ngx-rocket/core](https://github.com/ngx-rocket/core)\n* Dart\n  * Stagehand\n    * [google/stagehand](https://github.com/google/stagehand)\n\n#### Инструменты документации \u003ca id=\"documentation-tools\"\u003e\u003c/a\u003e\n\n* [Storybook](https://github.com/storybooks/storybook): \"Cреда разработки, которую вы полюбите\"\n* [Compodoc](https://github.com/compodoc/compodoc): Отличный инструмент для создания документации вашего приложения\n* [AngularDoc](http://angulardoc.io/): Веб-сайт, отображающий \"Архитектуру и визуализацию Angular-приложения\"\n* [NgModule-Viz](https://github.com/politie/ngmodule-viz): Визуализация связей между NgModules и зависимостями в Angular\n\n#### TodoMVC \u003ca id=\"todomvc\"\u003e\u003c/a\u003e\n\n* [Официальный TodoMVC для Angular](http://todomvc.com/examples/angular2/)\n\n#### Расширения для IDE's \u003ca id=\"idea\"\u003e\u003c/a\u003e\n\n* [10 интересных расширений для VSCode](http://devboosts.com/2017/02/08/top-10-vs-code-extensions)\n* [7 обязательных расширений для VSCode](https://medium.com/frontend-coach/7-must-have-visual-studio-code-extensions-for-angular-af9c476147fd)\n* [Quora: какая IDE лучше для Angular?](https://www.quora.com/What-is-best-IDE-for-Angular-2)\n* [IntelliJ vs. NetBeans vs. Eclipse](https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html) - какая IDE лучше для старта?\n* [Angular IDE = Angular + TypeScript + Eclipse](https://www.genuitec.com/products/angular-ide/)\n\n#### TypeScript \u003ca id=\"angular-in-typescript\"\u003e\u003c/a\u003e\n\n\u003e TypeScript позволяет вам писать код на JavaScript так, как вы этого хотите.\n\nTypeScript является типизированным надмножеством JavaScript, который компилируется в JavaScript.\n\n**TypeScript \\(основные ресурсы\\)**\n\n* [TypeScript](http://www.typescriptlang.org/) Официальный сайт TypeScript\n* [REPL](http://www.typescriptlang.org/play/) Официальная онлайн-среда для компиляции TypeScript в браузере\n* [Официальный репозиторий \\(GitHub\\)](https://github.com/Microsoft/TypeScript)\n* [DefinitelyTyped официальный репозиторий \\(GitHub\\)](https://github.com/DefinitelyTyped/DefinitelyTyped) Высококачественные определения типов \n\n**Основные источники**\n\n* [Angular стартер от @mgechev](https://mgechev.github.io/angular-seed/) Angular стартер \\(Angular 5+, TypeScript, Gulp, ..\\)\n* [TypeScript](http://www.typescriptlang.org), [Angular Flex Layout](https://github.com/angular/flex-layout), [Material 2](https://material.angular.io), [AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), unit/e2e тесты [Travis CI](https://travis-ci.org) и [Saucelabs](https://saucelabs.com).\n* [Angular подборка примеров](https://github.com/thelgevold/angular-2-samples)\n* [Angular, Angular CLI, AngularFire2, OAuth, Immutable - пример](https://github.com/r-park/todo-angular-firebase)\n* [Spring Boot и Angular](https://github.com/springboot-angular2-tutorial/angular2-app) Практические примеры от [Rails](https://www.railstutorial.org/).\n* [Angular стартер с Gulp и Travis CI](https://github.com/antonybudianto/angular-starter)\n* [Angular Leaflet Starter](https://github.com/haoliangyu/ngx-leaflet-starter) - приложение с картами\n* [Angular MapboxGL Starter](https://github.com/haoliangyu/ngx-mapboxgl-starter) - Другой стартер с картами, основанный на Angular и MapboxGL JS\n* [Angular + websockets](https://github.com/mkusz/ng2_websockets_quickstart) - Простой счетчик с 2-way и 1-way взаимодействием по websockets\n* [ng-start](https://github.com/cebor/ng2-start) - Минимально настроенное angular приложение\n* [ng-kitchen-sink](https://github.com/born2net/Angular-kitchen-sink) - Пример SPA на Angular\n* [ng-skeleton](https://github.com/born2net/ng-skeleton) - Пример SPA на Angular c ngrx, bootstrap и двухфакторной авторизацией\n* [angular-demo](https://github.com/amcdnl/angular2-demo) Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks\n* [Angular Dashboard Starter](https://github.com/hasanhameed07/angular2-dashboard-starter) - Простая панель управления на Angular 2 и AdminLTE\n* [ngx-admin](https://github.com/akveo/ngx-admin) - Панель управления на Nebular\n* [Angular стартер от @valor-software](https://github.com/valor-software/angular2-quickstart)\n* [Angular webpack стартер от @michaelbazos](https://github.com/michaelbazos/angular2-starter)\n* [ng-boiler](https://github.com/amcdnl/ng2-boiler) - Angular, TypeScript, Webpack\n* [Angular Webpack Starter](https://github.com/antonybudianto/angular-webpack-starter)\n* [Reaper](https://github.com/Xamber/Reaper) - Angular Webpack Starter Boilerplate\n* [famn](https://github.com/implustech/famn) - Angular + FeathersJS\n* [Angular NPM Module Seed](https://github.com/davguij/angular-npm-module-seed) \n* [Angular2 D3v4 Seed](https://github.com/gp187/angular2-d3v4-graph) - Angular + реализация графиков\n* [ng-seed/spa](https://github.com/ng-seed/spa) - Angular, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer\n* [Reboard](https://github.com/ksiabani/reboard) - Angular, Material 2, ngx-charts от generator-ngx-rocket \\(Typescript, SASS, Webpack, Jasmine+Karma, Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular Flex-Layout\\)\n* [Angular + Redux + Graphql + MySQL quickstart](https://github.com/rafaesc/fullstack-graphql-angular) - Простое приложение совместно с GraphQL, Angular CLI + Redux + Express + GraphQL + Sequelize \\(MySQL, Postgres, Sqlite, MSSQL\\).\n* [Angular5 + Firebase + Structure](https://github.com/naologic/angular5-starter) - Angular + Firebase \n* [plugin-typescript](https://github.com/frankwallis/plugin-typescript) - TypeScript лоадер для SystemJS\n\n#### Dart \u003ca id=\"angular-in-dart\"\u003e\u003c/a\u003e\n\n\u003e Dart — язык программирования, созданный Google. Dart позиционируется в качестве замены/альтернативы JavaScript. Dart - это масштабируемый язык программирования с открытым исходным кодом, с качественными библиотеками и рантаймом, для создания веб-приложений, серверов и мобильных приложений.\n\n**Основные источники**\n\n* [Dart](https://www.dartlang.org/) Официальный сайт \n* [Dartpad](https://dartpad.dartlang.org/) Dartpad позволяет вам писать на языке Dart прямо в браузере \\(аналог Typescript playground\\)\n* [Официальный репозиторий \\(GitHub\\)](https://github.com/dart-lang)\n* [Pub](https://pub.dartlang.org/) Репозиторий пакетов для Dart \\(аналог npm registry или любых других\\)\n* [Dartisans](https://plus.google.com/communities/114566943291919232850) Официальное коммьюнити на Google Plus  \n* [Dart Slack Channel](https://dartlang-slack.herokuapp.com/) Официальный канал в Slack\n* [Angular Dart Quickstart](https://webdev.dartlang.org/angular/tutorial/toh-pt0)\n\n#### Babel \u003ca id=\"angular-in-babel\"\u003e\u003c/a\u003e\n\n\u003e Babel – предназначен для транспиляции современного JS кода в код работающий на предыдущем стандарте, к примеру ES5.\n\n**Babel \\(основные ресурсы\\)**\n\n* [Babel](https://babeljs.io/) Официальный сайт Babel\n* [REPL](https://babeljs.io/repl/) Официальный REPL, который позволяет вам писать на современном ES6+ языке и видеть его результат\n* [Официальный репозиторий Babel \\(GitHub\\)](https://github.com/babel/babel)\n\n**Angular Online Playground**\n\n* [Plunker: Angular + Babel](http://plnkr.co/edit/PxCzCu?p=preview)\n\n**Основные источники**\n\n* [babel-angular-app](https://github.com/shuhei/babel-angular2-app) Макет Angular приложения для [Babel](https://babeljs.io/) и [Browserify](http://browserify.org/)\n* [angular-fullstack-starter](https://github.com/jgodi/angular2-fullstack-starter) Angular приложение + Webpack/Babel\n* [angular-es6-starter](https://github.com/blacksonic/angular2-babel-esnext-starter) Angular приложение на ES6, Babel, Webpack, Gulp\n* [angular-babel-seed](https://github.com/rbnlffl/angular-babel-seed) Простое Angular приложение на ES6\n* [angular-es6-todomvc](https://github.com/blacksonic/angular2-esnext-todomvc) Angular TodoMVC + ES6\n* [ng1-ng2-webpack-lazy-uirouter](https://github.com/swimlane/ng1-ng4-webpack-lazy-uirouter) Гибридное приложение на AngularJS + Angular в связке с UI-Router, Webpack, Babel\n\n**Babel плагины**\n\n* [babel-preset-angular](https://github.com/shuhei/babel-preset-angular2) Babel пресеты \\(presets\\) для Angular\n* [babel-plugin-type-assertion](https://github.com/shuhei/babel-plugin-type-assertion) Babel плагин для поддержки типизации в JS\n* [babel-plugin-angular-annotations](https://github.com/shuhei/babel-plugin-angular2-annotations) - Babel плагин для трансформации декораторов\n\n#### ES5 \u003ca id=\"angular-in-es5\"\u003e\u003c/a\u003e\n\n\u003e ECMAScript включает в себя структурированные, динамические, функциональные и прототипные фичи\n\n**Основные источники**\n\n[angular-es5-starter-kit](https://github.com/islam-muhammad/angular2-es5) Пример Angular приложения на ES5\n\n#### Ionic \u003ca id=\"ionic-in-angular\"\u003e\u003c/a\u003e\n\n\u003e Ionic - это прекрасный SDK с открытым исходным кодом для разработки гибридных мобильных приложений.\n\n* [Ionic Framework](http://ionicframework.com) Официальный сайт\n* [Ionic Documentation](http://ionicframework.com/docs/) Официальная документация\n\n**Ionic \\(основные ресурсы\\)**\n\n* [Ionic официальный репозиторий \\(GitHub\\)](https://github.com/ionic-team/ionic)\n* [Ionic подборка ресурсов](https://github.com/candelibas/awesome-ionic)\n* [Angular CLI Admin \\(Template\\)](https://github.com/jvitor83/angular-pwa-seed) Кроссплатформенный и кроссбраузерный стартер Angular  \\(Web/PWA, Mobile, Desktop\\) + Ionic\n* [angular-onsenui](https://github.com/onsenui/onsenui) - Крутой SDK для Angular, Vue, React\n\n#### Meteor \u003ca id=\"meteor-in-angular\"\u003e\u003c/a\u003e\n\n\u003e Meteor — веб-платформа на языке JavaScript, предназначенная для разработки Web-приложений реального времени.\n\n**Meteor \\(основные ресурсы\\)**\n\n* [Angular Meteor](http://angular-meteor.com/) Официальный сайт\n* [Пример аналога WhatsUp на Angular-Meteor + Ionic](https://www.angular-meteor.com/angular2)\n\n**Основные источники**\n\n* [Angular Meteor стартер](https://github.com/KyneSilverhide/angular2-meteor-seed)\n\n#### NativeScript \u003ca id=\"angular-in-nativescript\"\u003e\u003c/a\u003e\n\n\u003e Создавайте действительно нативные iOS, Android приложения на JS \\(TS\\) + CSS. NativeScript - кроссплатформенный фреймворк с открытым исходным кодом.\n\n**NativeScript \\(основные ресурсы\\)**\n\n* [NativeScript](https://www.nativescript.org/) Официальный сайт NativeScript\n* [Примеры использования NativeScript](http://www.syntaxsuccess.com/viewarticle/using-nativescript-with-angular-2.0)\n\n**Основные источники**\n\n* [Простой пример на Angular](https://github.com/NativeScript/sample-Angular2)\n* [Крутой стартер на Angular](https://github.com/NathanWalker/angular-seed-advanced)\n\n#### React Native \u003ca id=\"angular-in-react-native\"\u003e\u003c/a\u003e\n\n\u003e React Native — это фреймворк для создания нативно отображаемых iOS- и Android-приложений.\n\n* [React Native](https://facebook.github.io/react-native/) Официальный сайт\n\n**React Native \\(основные ресурсы\\)**\n\n* [Angular + React Native Renderer \\(GitHub\\)](https://github.com/angular/react-native-renderer)\n\n#### Haxe \u003ca id=\"angular-in-haxe\"\u003e\u003c/a\u003e\n\n\u003e Haxe — это высокоуровневый мультиплатформенный язык программирования с открытым исходным кодом, а также компилятор, с помощью которого можно создавать приложения и генерировать исходный код для разных платформ, сохраняя единую кодовую базу. Haxe включает в себя функциональность, поддерживаемую на всех платформах, например: числовые типы данных, строки, массивы, а также поддержку некоторых файловых форматов \\(xml, zip\\). Haxe также включает в себя поддержку платформо-специфических API для Adobe Flash, C++, PHP и других языков. Код, написанный на языке Haxe, может быть транслирован в код ActionScript 3, JavaScript, Java, C\\#, C++, Python, Lua, PHP, Apache CGI, а также в приложение Node.js\n\n**Основные источники**\n\n* [Haxe.org](http://haxe.org)\n* [Haxe на Wikipedia](https://en.wikipedia.org/wiki/Haxe)\n* [Haxe Playground](https://try.haxe.org/)\n* [Haxe compiler](http://haxe.org/documentation/introduction/compiler-targets.html) список того, во что можно компилировать: C++, C\\#, Java, Python, PHP, ActionScript 3, Flash, Neko bytecode\n* [Haxe \\(результаты опросов\\)](https://github.com/Angular-RU/angular-awesome-list/tree/e4390f7c9147982450276ab7573c48b0f9ee57a9/blog.onthewings.net/2015/11/14/haxe_usage_survey/README.md)\n* [Haxe группа](https://groups.google.com/forum/#!forum/haxelang) - коммьюнити\n* [Haxe и Node.js](https://github.com/Angular-RU/angular-awesome-list/tree/e4390f7c9147982450276ab7573c48b0f9ee57a9/matthijskamstra.github.io/haxenode/README.md)\n* [Haxe: работа с JavaScript библиотеками](http://philippe.elsass.me/2014/11/haxe-working-with-javascript-libraries/)\n* [Изучаем haxe за Y минут](https://learnxinyminutes.com/docs/haxe/)\n* [Успешная история про Haxe](http://nadako.github.io/rants/posts/2015-03-26_haxe-success-russian.html) - рассказ о портировании портирование с JavaScript на Haxe\n* [angular2haxe](https://github.com/nweedon/angular2haxe) Разработка на Haxe и Angular\n\n#### Scala \u003ca id=\"angular-in-scala\"\u003e\u003c/a\u003e\n\n\u003e Scala — мультипарадигмальный язык программирования, спроектированный кратким и типобезопасным для простого и быстрого создания компонентного программного обеспечения, сочетающий возможности функционального и объектно-ориентированного программирования. Язык программирования Scala является «симбиозом» Java и C\\#.\n\n* [Scala-lang.org](https://www.scala-lang.org/)\n\n**Основные источники**\n\n* [play-angular](https://github.com/gdi2290/play-angular2) - серверный рендеринг Angular на Scala\n\n#### C\\# \u003ca id=\"angular-in-csh\"\u003e\u003c/a\u003e\n\n\u003e C\\# — объектно-ориентированный язык программирования. Является языком разработки приложений для платформы Microsoft .NET Framework.\n\n* [ASP.NET Core 2.0 + Angular](https://github.com/emonney/QuickApp) - стартер\n* [CRUD операции: ASP.NET Core + Angular + ADO.NET](https://dzone.com/articles/crud-operations-with-aspnet-core-using-angular-5-a)\n* [ASP.NET Core SignalR чат на Angular](https://codingblast.com/asp-net-core-signalr-chat-angular/)\n\n#### Java \u003ca id=\"angular-in-java\"\u003e\u003c/a\u003e\n\n\u003e Java — сильно типизированный объектно-ориентированный язык программирования, разработанный компанией Sun Microsystems \\(в последующем приобретённой компанией Oracle\\). Приложения Java обычно транслируются в специальный байт-код, поэтому они могут работать на любой компьютерной архитектуре, с помощью виртуальной Java-машины.\n\n* [java.com](https://java.com/ru/)\n* [oracle.com/java](https://www.oracle.com/java/index.html)\n\n**Основные источники**\n\n* [Angular + Spring Boot](https://shekhargulati.com/2017/11/08/a-minimalist-guide-to-building-spring-boot-angular-5-applications/)\n* [CRUD Java Web Application: Spring Boot, MongoDB, Angular](https://www.djamware.com/post/5a792ecb80aca7059c142978/spring-boot-mongodb-and-angular-5-crud-java-web-application)\n* [Spring Boot API + Angular UI](https://github.com/oktadeveloper/spring-boot-angular-example)\n* [Angular для Java-разработчиков](https://www.youtube.com/watch?v=k8r76d8QzXs)\n* [Spring Boot + WebSockets + Angular](https://medium.com/oril/spring-boot-websockets-angular-5-f2f4b1c14cee)\n\n#### Kotlin \u003ca id=\"angular-in-kotlin\"\u003e\u003c/a\u003e\n\n\u003e Kotlin — статически типизированный язык программирования, работающий поверх JVM и разрабатываемый компанией JetBrains. Компилируется также в JavaScript и на другие платформы через инфраструктуру LLVM.\n\n* [kotlinlang.org](https://kotlinlang.org/)\n* [Создаем надежное приложение с помощью Kotlin, Angular, TypeScript и Okta](https://scotch.io/tutorials/build-a-secure-notes-application-with-kotlin-typescript-and-okta)\n* [Angular для Kotlin](https://github.com/Yegair/kotlin-angular)\n* [Angular-Kotlin Starter](https://github.com/gbaldeck/angular-kotlin-starter)\n* [Пример крупного приложения на JHipster, Spring Boot, Kotlin, Angular, ngrx, Webpack](https://github.com/dancancro/great-big-example-application)\n\n#### Bit \u003ca id=\"angular-components-with-bit\"\u003e\u003c/a\u003e\n\n\u003e Представьте, что все ваши компоненты доступны вам в облаке, и все это доступно для вашей команды и синхронизировано во всех ваших проектах. Это и есть Bit.\n\n* [Bit](https://bitsrc.io/)\n* [Bit официальный репозиторий \\(Github\\)](https://github.com/teambit/bit)\n* [Bit-Javascript](https://github.com/teambit/bit-javascript)\n\n#### NgRx \u003ca id=\"security\"\u003e\u003c/a\u003e\n\n* [Введение в @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)\n* [Redux + Angular - Часть 1](http://orizens.com/wp/topics/adding-redux-with-ngrxstore-to-angular-2-part-1/)\n* [Redux + Angular - Часть 2 \\(Тестирование Reducers\\)](http://orizens.com/wp/topics/adding-redux-with-ngrxstore-to-angular2-part-2-testing-reducers/)\n* [Redux + Angular: отличия от традиционной модели](http://orizens.com/wp/topics/angular-2-ngrxstore-the-ngmodel-in-between-use-case-from-angular-1/)\n* [Angular, Ngrx/Store, Ngrx/Effects – Введение в функциональный подход к разработке приложений](http://orizens.com/wp/topics/angular-2-ngrxstore-ngrxeffects-intro-to-functional-approach-for-a-chain-of-actions/)\n* [Создание простых API для @ngrx/Effects](https://gist.github.com/peterbsmith2/ce94c0a5ddceb99bab24a761731d1f07)\n* [redux-decorators](https://github.com/KarlPurk/redux-decorators) - Декораторы для работы с Redux\n* [@angular-redux/store](https://github.com/angular-redux/store) - Angular + Redux.\n* [@ngrx/store](https://github.com/ngrx/store) - RxJS state менеджер на основе концепции Redux\n* [mobx-angular](https://github.com/mobxjs/mobx-angular) - MobX + Angular\n\n#### Security \u003ca id=\"ngrx\"\u003e\u003c/a\u003e\n\n* [Angular.io Security Guide](https://angular.io/guide/security) - краткое руководство по безопасности, включающее информацию о предотвращении межсайтового скриптинга \\(XSS\\), политики безопасности и безопасности контента\n* [Angular + OpenID](https://damienbod.com/2016/03/02/angular2-openid-connect-implicit-flow-with-identityserver4/)\n* [Angular + OAuth2](https://github.com/michaeloryl/angular2-bootstrap4-oauth2-webpack)\n* [Angular + OAuth2 OIDC](https://www.softwarearchitekt.at/post/2016/07/03/authentication-in-angular-2-with-oauth2-oidc-and-guards-for-the-newest-new-router-english-version.aspx)\n* [Angular пример аутентификации](https://github.com/auth0-blog/angular2-authentication-sample)\n* [ng-ui-auth](https://github.com/ronzeidman/ng2-ui-auth) - Аутентификация на основе satellizer\n* [angular-token](https://github.com/neroniaky/angular2-token) - Служба аутентификации на основе сервиса токенов в Angular с поддержкой нескольких пользователей\n* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) - OAuth 2 + OpenId Connect \\(OIDC\\)\n* [@ngx-auth/core](https://github.com/fulls1z3/ngx-auth) - Утилита аутентификации для Angular\n\n","created_at":"2024-01-04T20:23:59.025Z","updated_at":"2026-04-12T21:00:21.882Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Полезные книги \u003ca id=\"awesome-books\"\u003e\u003c/a\u003e"],"projects_url":"https://awesome.ecosyste.ms/api/v1/lists/angular-ru%2Fangular-awesome-list/projects"}