Здесь вы найдете список полезных репозиториев, стартеры, примеры, учебные пособия, компоненты, модули, видеоролики и все остальное причастное к экосистеме Angular.
Содержание:
- Angular
- Официальные ресурсы
- Новости в twitter
- Сообщества
- Серверный рендеринг
- Cheatsheet (чит-лист)
- UI библиотеки
- Важные особенности
- Angular CLI
- Webpack стартеры
- Публикации
- Видеоуроки
- Стайл-гайды
- Angular Connect конференция
- Книги
- Курсы и тренинги
- Подборка статей
- Интеграция
- Компоненты
- Пайпы
- Примеры приложений
- Генераторы
- Инструменты документации
- TodoMVC
- Angular Universal
- TypeScript
- Dart
- Traceur
- Babel
- ES5
- Ionic
- Meteor
- NativeScript
- React Native
- Haxe
- Scala
- Bit
- Security
- NgRx
Angular - это платформа для разработки мобильных и десктопных веб-приложений.
- Сайт
- Блог
- Документация по фреймворку
- Чит-лист частовстречающихся вещей в Angular
- Быстрый старт
- GitHub репозиторий
Данный список хорош тем, что благодаря нему, вы будете в курсе основных событий.
- Мишко Хевери (@mhevery)
- Игор Минар (@mhevery)
- Брэд Грин (bradlygreen)
- Наоми Блэк (@naomitraveller)
- Тобиас Бош (@tbosch1009)
- Кара Эриксон (@karaforthewin)
- Роб Уормальд (@robwormald)
- Джек Франклин
- Тьерри Шатель
- Ури Шейк
- Гонсало Руис из Виллы Суарес
- Джон Папа
- Джон Папа
- Дэн Вахлин
- Кристиан Вейер
- Тоддский девиз
- Тим Раффлес
- Вассим Чхаг
- Aaron Frost
- Аарон Фрост
- Джаред Уильямс
- Жерар Санс
- Паскаль Прехт
- Джефф Whelpley
- Рауль Хименес
- Киро Нанес
- Максим Сальников
- Дебора Курата
- Минько Гечев
- Шай Резник
- Патрик Стэплтон (@gdi2290)
- Скотт Мосс (@scotups)
- Брэд Грин (@bradlygreen)
- Джефф Кросс (@jeffbcross)
- Виктор Савкин (@victorsavkin)
- Павел Козловский (@pkozlowski_os)
- Алексей Охрименко (@Ai_boy)
- egghead.io (@eggheadio)
- hirez.io (@hirez_io)
- hypedrivendev.io (@cedric_exbrayat)
- amcdnl.com (@amcdnl)
Этот список далеко не полный...
- Канал в Gitter
- Вопросы по Angular на StackOverflow
- Angular на Reddit
- Подкасты от AngularAir
- Подкатсы от Devchat по Angular
- Журнал ng-newsletter
- Витрина приложений от Angular Expo
- Чат от AngularBuddies в Slack
- Чат от dartlang.slack.com в Slack
- Подборка популярных Twitter's аккаунтов
- Официальный репозиторий Angular Universal (GitHub)
- Русскоязычный репозиторий Angular Universal (GitHub)
- Официальный cheatsheet от Angular
- Официальный cheatsheet по AngularDart
- Еще один cheatsheet для AngularDart
- Чек-лист Angular Performance
- Официальный репозиторий Angular Material Design (GitHub)
- Коллекция Material Design компонентов (md2)
- Коллекция компонентов на основе материала Material Design Lite (angular2-mdl)
- Компоненты, созданные с помощью Google Material Design Lite framework (mdl-ext)
- Компоненты Materialize library (ng2-materialize)
- Material Light
- Легковесная библиотека на основе Material Design
Компонент управляет отображением представления на экране, в ее основе используется Shadow DOM по умолчанию (для создания инкапсулированного визуального поведения). Как правило, компоненты используются для создания простого виджета в пользовательском интерфейсе, в то же время они могут представлять из себя набор еще более простых компонентов внутри себя (для увеличения абстракции и создания простых функциональных виджетов внутри приложения).
@Component({
selector: 'html-name-element'
})
export class MyComponent {
// ...
}
Шаблон - это ваша html-разметка, в которой вы можете описывать ваши взаимодействия с DOM на основе модели данных и событий вашего класса компонента (в примере, контроллер MyComponent).
@Component({
template: 'my-component.component.html'
})
export class MyComponent {
public title: string = "Hello world";
// ..
}
<!-- my-component.component.html -->
<p>
Интерполяция: {{ title }},
или так: {{ this.title }}
</p>
Каждый компонент имеет свой собственный детектор изменений, который гарантирует проверку привязок данных, определенных шаблоне.
Внедрение зависимостей (англ. Dependency Injection) — это композиция структурных шаблонов проектирования, при которой за каждую функцию приложения отвечает один, условно независимый объект (сервис), который может иметь необходимость использовать другие объекты (зависимости), известные ему интерфейсами. Зависимости передаются (внедряются) сервису в момент его создания.
// logger.service.ts
@Injectable()
export class LoggerService {
// ..
public get trace() {
return console.debug.bind(console);
}
}
// my-component.component.ts
@Component({ /* .. */ })
export class MyComponent {
constructor(private logger: LoggerService) {
logger.trace('Init MyComponent');
}
}
Директивы позволяют получать прямой доступ к DOM ваших элементов. Они бывают двух видов: структурные и атрибутные.
Атрибутная директива:
@Directive({
selector: '[bold]'
})
export class BoldDirective{
constructor(private elementRef: ElementRef){
this.elementRef.nativeElement.style.fontWeight = "bold";
}
}
Здесь внедряется сервис "ElementRef". Он представляет ссылку на элемент, к которому будет применяться директива:
<!-- my-component.component.html -->
<p bold>Hello world</p>
Структурные директивы:
Структурные директивы изменяют структуру DOM с помощью добавления или удаления html-элементов. Существует минимум три встроенных структурных директивы: ngIf, ngSwitch и ngFor.
@Component({ /* ... */ })
export class AppComponent {
// ..
public items = ["Apple iPhone", "Huawei Mate", "Samsung Galaxy", "Motorola Moto Z"];
}
<!-- my-component.component.html -->
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
Пайп (pipe) представляет собой особый обработчик, который позволяет форматировать отображаемые значения
// my-component.component.ts
@Component({ /* .. */ })
export class MyComponent {
public fields = [ { id: 1 }, { id: 2 } ];
}
<!-- my-component.component.html -->
Читаемый вывод объекта:
<pre> {{ fields | json }} </pre>
Помимо стандартных, вы можете писать собственные
@Pipe({ name: 'factorial' })
export class FactorialPipe implements PipeTransform {
transform(value: number, args?: any): number {
if(value<=0) return 0;
let result = 1;
for(let i=1; i<=value; i++){
result = result * i;
}
return result;
}
}
// my-component.component.ts
@Component({ /* .. */ })
export class MyComponent {
public x = 5;
}
<!-- my-component.component.html -->
Факториал числа {{ x }} равен {{ x | factorial }}
<!-- Факториал числа 5 равен 120 -->
Поддержка Web Worker в Angular предназначена для упрощенного распараллеливания в вашем приложении. Когда ваше приложение запускается, Angular проводит всю основную работу по обработке вашей логики в отдельных потоках, ядро выполняет вычисление в своем рабочем потоке, в то время как другие функции могут и вовсе выполняться не в потоках.
Самый распространенный способ получить данные от web-служб — это через HttpClient сервис доступный для внедрения зависимостей в ваших компонентах. Angular HttpClient довольно прост. Все, что нам нужно сделать, это вызвать метода get и передать ему url. Данный метод get возвращает объект Observable. Этот класс является частью библиотеки rxjs, которая используется во многих местах Angular'а.
// rest.service.ts
@Injectable()
export class RestService {
constructor(private httpClient: HttpClient) {}
public getByObservable(url: string): Observable<any> {
return this.httpClient.get(url);
}
public getByPromise(url: string): Promise<any> {
return this.httpClient.get(url).toPromise();
}
}
Подобно обещанию (Promise), наблюдатель (Observable) не содержит в себе сразу значения. Вместо этого у него есть метод подписки(subscribe), где мы можем зарегистрировать обратный вызов(callback). Этот callback вызывается, как только результат будет доступен. Помимо обещания, Observable может вернуть более одного значения. Вы можете вернуть себе поток результатов. Но это не имеет значения в данном случае. В нашем случае Observable возвращает только одно значение.
// my-component.component.ts
@Component({ /* .. */ })
export class MyComponent {
constructor(private rest: RestService) {}
// Observable classic examples
public getFields() {
this.rest.getByObservable('http://anyurl.com').subscibe(value =>{
// value - результат
},
error => {
// error - объект ошибки
});
}
// Promise classic examples
public async getAsyncField() {
try {
// value - результат
const value = await this.rest.getByPromise('http://anyurl.com');
} catch (error) {
// error - объект ошибки
}
}
}
- Официальная документация
- AOT в Angular
- Сборка Angular приложения для продакшина
- Прояснения в Ahead-Of-Time компиляции в Angular
- Несколько решений по работе с Ahead of Time (AOT)
- Пример кода с Webpack и AOT
- Пример кода с Rollup и AOT
- Официальный сайт Webpack
- Angular Webpack стартер от PatrickJS
- Angular Webpack стартер от Preboot
- Angular Nightly Webpack стартер
- Angular Webpack стартер с ASP.NET Core от Damien Bowden
- Webpack конфигурация для Angular разработки от ng-seed
- Ionic
- Angular
- Auth0
- thoughtram
- Angular Template Syntax
- letsboot.com
- Test Driven Development
- Angular and Firebase
- Egghead.io - Angular
- Egghead.io - Разработка приложения на Angular + Redux
- HiRez.io - Angular: основы
- HiRez.io - Angular: введение в компоненты
- Udemy - Введение в Angular
- Udemy - Angular и TypeScript для начинающих
- Udemy - Курс по Angular
- Pluralsight - Angular: обзор
- Pluralsight - Angular 2: Getting Started
- Channel9 - Будущее TypeScript
- Channel9 - Создание кроссплатформенных приложений с Angular
- Code School - Разгоняем Angular
- Angular - типизированное хранилище
- Angular - расширенные советы и рекомендации
- Angular Fullstack
- Angular Master Class
- Основной доклад – Brad Green, Igor Minar and Jules Kremer
- Стратегии тестирования Angular – Julie Ralph
- Создание нативных мобильных приложений с Angular and NativeScript - Sebastian Witalec
- Angular Data Flow – Jeff Cross, Rob Wormald and Alex Rickabaugh
- Стратегии итеративных обновлений больших Angular-приложений – Jen Bourey
- Отладка Angular приложений с ипсользованием Batarangle – Yuri Takhteyev and Igor Krivanov
- Разработка приложений с Firebase and Angular - Sara Robinson
- Концепции Angular - Victor Savkin and Tobias Bosch
- Модульность Angular приложений – Pawel Kozlowski
- Создание приложений реального времени на Angular и Meteor - Uri Goldshtein
- ng-book 2
fullstack.io
- Как стать ниндзя в Angular
Ninja Squad
- Angular разработка с TypeScript
Manning Publications
- Angular в бою
Manning Publications
- Практики Angular
Leanpub
- Переходим на Angular
Packt Publishing
- Angular тренинги
Rangle.io
- Изучаем Angular
Ionic Team
- Тестирование Angular приложений
Manning Publications
- AngularClass
- Angular Boot Camp
- thoughtram
- Egghead.io
- ng-book
- Angular Workshop
- Web Age Solutions
- Letsboot.com
- Free on-site 2-days training delivered by SFEIR (in France)
-
Victor Savkin
- Внедрение зависимостей (DI) в AngularJS и Angular
- Пишем на Angular с Typescript
- Angular - синтаксис шаблонов
- Концепция The Core Concepts of Angular 2
- Основные файзы при разработке на Angular
- Стратегии обнаружения в Angular
- Поддержка функционального программирования
- Angular: унифицированный Dependency Injection
- Angular Router
-
AngularClass
-
thoughtram
- Разработка компонента tabs (вкладки) в Angular
- Разработка zippy-компонента в Angular
- Введение в сервисы в Angular
- Forward references в Angular
- Видимость в DI в Angular 2
- Dependency Injection in Angular 2
- Роутинг в Angular
- Angular - синтаксис шаблонов
- View Encapsulation в Angular
- Стилизация Angular компонентов
- ES5 для Angular
- Пишем на JS в Angular
- Разница между аннотациями и декораторами
-
Hristo Georgiev
-
Helgevold Consulting
-
Burak Tasci (fulls1z3)
- [FalcorJS + Angular (видео)] (https://www.youtube.com/watch?v=z8UgDZ4rXBU&feature=youtu.be)
- [Angular + Meteor] (http://angular-meteor.com/angular2)
- [NativeScript + Angular] (https://github.com/NativeScript/nativescript-angular)
- [ReactNative + Angular] (https://github.com/angular/react-native-renderer)
- [GraphQL + Angular] (https://github.com/apollographql/apollo-angular)
- Material 2 - Компоненты от Material Design
- NG ZORRO - Enterprise компоненты, основанные на Ant Design
- Element Angular - Element Design компоненты
- ng-bootstrap Нативный Bootstrap для Angular
- ng-charts Компоненты диаграмм основанные на Chart.js
- ng-dragula Drag and Drop
- ng-file-upload Простая директива для загрузки файлов
- ng-handsontable Excel-подобная таблица (data grid / spreadsheet)
- ng-markdown Angular Markdown компонент
- ng-select Angular компонент для select
- ng-safe-img Простая директива для обработки событий ошибки загрузки картинок (img)
- ng-table Простой компонент таблицы с сортировкой и фильтрацией
- ng-smart-table Smart-компонент таблицы
- ng-bs Директивы для Bootstrap
- ng-lightning Компоненты основанные на Lightning Design System
- ag-grid Улучшенный Datagrid
- angular-query-builder Усовершенствованные запросы на основе jquery QueryBuilder
- angular-grid drag/drop/resize сетка
- angular-jwt Библиотека для отправки аутентифицированных HTTP-запросов и декодирования JWT
- angular-cookie Библиотека имплеминтирующая из AngularJS 1.x $cookies-сервис в Angular
- angular-fontawesome Angular компоненты и директивы для Fontawesome
- angular-safeguard Обертка над cookies/sessionStorage/localStorage
- angular-google-maps Angular директивы для Google Maps
- angular-cesium Создание map web apps с использованием Cesium
- ng-radio-group Angular директивы для radio/checkbox
- ng-dropdown Выпадающее меню на основе bootstrap 3
- angular-multiselect-dropdown Выпадающее меню (multiselect)
- ng-progress-bar Простой progress bar
- ng-tabs Tabs control для angular
- ng-modal Модальные окна
- ng-sheet Динамические компоненты меню
- ng-paginator Контроллы пагинации для angular
- fuel-ui Bootstrap 4 компоненты и директивы
- prime-ng Коллекция Primeng-компонентов
- ng-ace Ace editor на Angular
- ng-storage localStorage и sessionStorage обертки
- ng-fontawesome Простая директива для fontawesome
- ng-sweetalert2 Обертка над sweetalert2
- angular-text-mask Angular input маска (директива)
- angular-imask Еще одна input маска (директива)
- ng-fullpage Fullpage скролл на основе fullPage.js
- file-droppa Простой загрузчик файлов на основе drag and drop
- ngx-img-fallback Placeholder загрузки для image и image error
- angular-busy Индекатор загрузки для Promise, Observable's
- ng-pdf-viewer PDF viewer на Angular
- Covalent - UI набор компонентов на основе Material Design
- angular-infinite-scroll - Бесконечный скролл на Angular
- ng-card - Card-компоненты
- Wijmo 5 - Набор компонентов пользовательского интерфейса для Angular
- ng-swipeable-card - Перетаскиваемые card-компонентыы
- ngSemantic - Компоненты пользовательского интерфейса на основе Semantic UI
- vmware clarity - Clarity набор компонентов от VMware
- Teradata covalent - Набор компонентов пользовательского интерфейса на основе materialize
- ng-quill-editor - Quill editor компонент
- ngx-charts - Настраиваемый Charting-фреймворк на Angular
- ngx-datatable Функциональный и легкий компонент таблиц данных
- ngx-ui - Библиотека стилей и компонентов ngx-ui
- Cloudinary - Angular SDK для управления изображениями и видео в облаке
- angular-simple-countdown - Простой countdown
- ng-http-cache - Кеширование http-запросов
- ng-animate - Коллекция крутых анимаций
- lottie-angular - After Effects анимации для Angular
- ngx-restangular - Restangular сервис
- ngfb-sortable-table - Angular Firebase Table компоненты
- angular-split Angular split компонент
- od-virtualscroll Бесконечный скролл на Observable
- angular-froala-wysiwyg WYSIWYG HTML Editor на Angular
- ngx-meta - Утилита Dynamic page для Angular Universal
- ngx-config - Настройки для Angular (Angular Universal loader)
- ngx-cache - Кеширование в Angular
- ngx-i18n-router - Роутинг с учетом локализации
- ngx-auth Сервис аутентификации
- angular-promise-buttons - Кнопка загрузки
- ng-archwizard - Wizard компонент
- ngx-popper - Tooltip менеджер на основе popper.js(https://popper.js.org/)
- ngx-avatar - Компонент аватарок
- ngx-qrcode2 - Компонент для генерации QR (Quick Response ) кода
- ng2-permission - Полнофункциональный контроль доступа на основе ролей и прав в вашем приложении
angular-permission
. - ng-s-resource - Простой RESTful http генератор ресурсов
- ng-data-picker - Data picker
- ngx-siema - Простая карусель
- ng-bootstrap - Angular директивы для Bootstrap 4
- ng-snotify - Angular Notification Center
- ngx-permissions - Управление доступом и ролями
- nebular - Фреймворк Nebular основанный на Angular
- ng-select ng-select (Select, Multiselect, Autocomplete)
- ng-katex Модуль для математических выражений с синтаксисом TeX
- ng-fullcalendar Jquery календарь для Angular
- fuel-ui - OrderBy и Range, портированные из AngularJS 1.x в Angular
- ngx-filter-pipe Пайп (pipe) для фильтрации массивов
- ngx-pipes набор полезных пайпов для Angular
- ngx-order-pipe OrderBy - сортировка коллекций
- angular2-camelcase Пайп для преобразования строк в camelCase
- NG-Dashboard - Dashboard для Angular 4+. Компоненты пользовательского интерфейса на основе Material Light. Компоненты диаграмм на основе MetricsGraficsJS. Map директива на основе LeafletJS. DEMO ONLINE
- Node.js
- Slush
- Yeoman
- Faristo
- ngX-Rocket:
- Dart
- Stagehand
- Storybook: "Cреда разработки, которую вы полюбите"
- Compodoc: Отличный инструмент для создания документации вашего приложения
- AngularDoc: Веб-сайт, отображающий "Архитектуру и визуализацию Angular-приложения"
- NgModule-Viz: Визуализация связей между NgModules и зависимостями в Angular
Universal (изоморфный) - рендеринг приложений Angular на серверной стороне
- universal-starter - Angular Universal стартер от @Angular-Class
- ng-seed/universal - Angular Universal стартер с Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, TSLint/codelyzer
TypeScript позволяет вам писать код на JavaScript так, как вы этого хотите.
TypeScript является типизированным надмножеством JavaScript, который компилируется в JavaScript.
- TypeScript Официальный сайт TypeScript
- REPL Официальная онлайн-среда для компиляции TypeScript в браузере
- Официальный репозиторий (GitHub)
- DefinitelyTyped официальный репозиторий (GitHub) Высококачественные определения типов
- Angular стартер от @mgechev Angular стартер (Angular 5+, TypeScript, Gulp, ..)
- TypeScript, Angular Flex Layout, Material 2, AOT, unit/e2e тесты Travis CI и Saucelabs.
- Angular подборка примеров
- Angular, Angular CLI, AngularFire2, OAuth, Immutable - пример
- Spring Boot и Angular Практические примеры от Rails.
- Angular стартер с Gulp и Travis CI
- Angular Leaflet Starter - приложение с картами
- Angular MapboxGL Starter - Другой стартер с картами, основанный на Angular и MapboxGL JS
- Angular + websockets - Простой счетчик с 2-way и 1-way взаимодействием по websockets
- ng-start - Минимально настроенное angular приложение
- ng-kitchen-sink - Пример SPA на Angular
- ng-skeleton - Пример SPA на Angular c ngrx, bootstrap и двухфакторной авторизацией
- angular-demo Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
- Angular Dashboard Starter - Простая панель управления на Angular 2 и AdminLTE
- ngx-admin - Панель управления на Nebular
- Angular стартер от @valor-software
- Angular webpack стартер от @michaelbazos
- ng-boiler - Angular, TypeScript, Webpack
- Angular Webpack Starter
- Reaper - Angular Webpack Starter Boilerplate
- famn - Angular + FeathersJS
- Angular NPM Module Seed
- Angular2 D3v4 Seed - Angular + реализация графиков
- ng-seed/spa - Angular, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
- Reboard - Angular, Material 2, ngx-charts от generator-ngx-rocket (Typescript, SASS, Webpack, Jasmine+Karma, Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular Flex-Layout)
- Angular + Redux + Graphql + MySQL quickstart - Простое приложение совместно с GraphQL, Angular CLI + Redux + Express + GraphQL + Sequelize (MySQL, Postgres, Sqlite, MSSQL).
- Angular5 + Firebase + Structure - Angular + Firebase