Giter VIP home page Giter VIP logo

angular-awesome-list's Introduction

Awesome Angular

Awesome Angular Awesome

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

Angular-RU

Current Angular version:

npm version

Current Browser support for Angular:

Sauce Test Status

Содержание:

Angular

Angular - это платформа для разработки мобильных и десктопных веб-приложений.

Официальные ресурсы

Новости в twitter

Данный список хорош тем, что благодаря нему, вы будете в курсе основных событий.

Angular Team (эксперты из команды Angular)
Google Developer Experts
Остальные известные эксперты:
Сообщества:
Митапы:

Этот список далеко не полный...

Сообщества

Серверный рендеринг

Cheatsheet (чит-лист)

UI библиотеки

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 Workers

Поддержка Web Worker в Angular предназначена для упрощенного распараллеливания в вашем приложении. Когда ваше приложение запускается, Angular проводит всю основную работу по обработке вашей логики в отдельных потоках, ядро выполняет вычисление в своем рабочем потоке, в то время как другие функции могут и вовсе выполняться не в потоках.

HTTP

Самый распространенный способ получить данные от 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 - объект ошибки
    }
  }
  
}

Роутинг

Тестирование

Ahead-of-Time компиляция

Angular CLI

Webpack стартеры

Публикации

Видеоуроки

Стайл-гайды

Angular Connect конференция

Книги

Онлайн тренинги

Подборка статей

Интеграции

Компоненты

  • 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

Пайпы (pipes)

  • fuel-ui - OrderBy и Range, портированные из AngularJS 1.x в Angular
  • ngx-filter-pipe Пайп (pipe) для фильтрации массивов
  • ngx-pipes набор полезных пайпов для Angular
  • ngx-order-pipe OrderBy - сортировка коллекций
  • angular2-camelcase Пайп для преобразования строк в camelCase

Примеры приложений

Генераторы

Инструменты документации

  • Storybook: "Cреда разработки, которую вы полюбите"
  • Compodoc: Отличный инструмент для создания документации вашего приложения
  • AngularDoc: Веб-сайт, отображающий "Архитектуру и визуализацию Angular-приложения"
  • NgModule-Viz: Визуализация связей между NgModules и зависимостями в Angular

TodoMVC

Angular Universal

Universal (изоморфный) - рендеринг приложений Angular на серверной стороне

Universal (основные ресурсы)

Основные источники

  • 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

TypeScript позволяет вам писать код на JavaScript так, как вы этого хотите.

TypeScript является типизированным надмножеством JavaScript, который компилируется в JavaScript.

TypeScript (основные ресурсы)

Основные источники

Dart

Основные источники

Traceur

Traceur (основные ресурсы)

Основные источники

Babel

Babel (основные ресурсы)

Online Playground

Основные источники

Babel плагины

ES5

Основные источники

Ionic

Ionic 2 (основные ресурсы)

Meteor

Meteor (основные ресурсы)

Основные источники

NativeScript

NativeScript (основные ресурсы)

Основные источники

React Native

React Native (основные ресурсы)

Основные источники

Haxe

Основные источники

Scala

Основные источники

Bit

NgRx

Security

angular-awesome-list's People

Contributors

splincode avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.