GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Angular-RU → Angular Awesome List

Angular-RU / Angular Awesome List

Список ресурсов по Angular на русском

Programming Languages

typescript
32286 projects

Labels

awesomeangularwebpackmaterialtwitterslackdependency-injectioncheatsheetuniversalngxaotudemy

Projects that are alternatives of or similar to Angular Awesome List

Ngx Auth Firebaseui
Angular Material UI component for firebase authentication
Stars: ✭ 518 (+131.25%)
Mutual labels:  twitter, material, ngx
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+198.66%)
Mutual labels:  webpack, aot, universal
Angular Webpack Starter
A complete Angular 6 and Webpack 4 starter seed with minimal and full featured branches. Full featured branch includes: Material Design 2 (Bootstrap 4 branch available as well), @ngrx, HMR, DLLs and optional use of Universal for server-side rendering - Supports AOT (offline) compilation, sync and lazy loading. Karma/Protractor for e2e/unit tests.
Stars: ✭ 911 (+306.7%)
Mutual labels:  aot, universal, material
React Slack Chat
[UPDATED] A Server-less Beautiful Gooey / Material Design Slack Chat Web Integrating Widget.
Stars: ✭ 139 (-37.95%)
Mutual labels:  slack, material
Assent
Multi-provider framework in Elixir
Stars: ✭ 126 (-43.75%)
Mutual labels:  slack, twitter
Apollo Universal Starter Kit
Apollo Universal Starter Kit is an SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.
Stars: ✭ 1,645 (+634.38%)
Mutual labels:  webpack, universal
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-47.77%)
Mutual labels:  webpack, universal
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (-34.37%)
Mutual labels:  webpack, universal
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-36.16%)
Mutual labels:  material, ngx
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+718.3%)
Mutual labels:  webpack, universal
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-24.55%)
Mutual labels:  material, ngx
Tsuru
desktop client.
Stars: ✭ 126 (-43.75%)
Mutual labels:  slack, twitter
Vue Starter
🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.
Stars: ✭ 120 (-46.43%)
Mutual labels:  webpack, material
Tradingview Webhook Bot
⚙️ Send TradingView alerts to Telegram, Discord, Slack, Twitter and/or Email.
Stars: ✭ 135 (-39.73%)
Mutual labels:  slack, twitter
Twittnuker
Android 4.0+ Twitter Client
Stars: ✭ 117 (-47.77%)
Mutual labels:  twitter, material
Ngx Cache
Cache utility for Angular
Stars: ✭ 144 (-35.71%)
Mutual labels:  aot, universal
Electrode
Web applications with node.js and React
Stars: ✭ 2,033 (+807.59%)
Mutual labels:  webpack, universal
Localize Router
An implementation of routes localisation for Angular
Stars: ✭ 177 (-20.98%)
Mutual labels:  aot, universal
Vuesion
Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.
Stars: ✭ 2,510 (+1020.54%)
Mutual labels:  webpack, universal
Sambell
wake me when it's quitting time
Stars: ✭ 101 (-54.91%)
Mutual labels:  webpack, universal
View All Similar Projects ➔

Добро пожаловать на Angular-RU

Мы любим Angular в России, и именно поэтому в нашем блоге мы будем рассказывать о своём опыте использования Angular, актуальных проблемах и путей их решения, также разбираемся, какие тренды ожидают нас в ближайшем будущем и многое другое.

Current Angular version:

npm version

Читайте наш блог (angular-ru.gitbook.io/blog)

Awesome Angular Awesome TipeIO Awesome devarchy.com

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

Содержание:

Полезные книги

Книги о программировании для разного уровня специалистов. Все перечисленные ниже книги являются переводом с английского, поэтому по возможности рекомендуем читать их в оригинале.

Чистый код

О том, как правильно писать чистый и понятный код, какие приемы рефакторинга существуют.

Паттерны проектирования

Подробное описание популярных паттернов проектирования и примеры их использования.

Чистая архитектура

Введение в чистую архитектуру, полезна для больших проектов.

Angular

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

Карта развития

img

Список ресурсов для развития

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

Новости в twitter

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

Angular Team (эксперты из команды Angular)

Google Developer Experts

Остальные известные эксперты:

Сообщества:

Митапы:

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

Сообщества

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

Cheatsheet (чит-лист)

UI библиотеки

Material Design

Other Design

Важные особенности

Компоненты

Компонент управляет отображением представления на экране, в ее основе используется Shadow DOM по умолчанию (для создания инкапсулированного визуального поведения). Как правило, компоненты используются для создания простого виджета в пользовательском интерфейсе, в то же время они могут представлять из себя набор еще более простых компонентов внутри себя (для увеличения абстракции и создания простых функциональных виджетов внутри приложения).

@Component({
  selector: 'html-name-element'
})
export class MyComponent {
  // ...
}

Шаблоны

Шаблон - это ваша html-разметка, в которой вы можете описывать ваши взаимодействия с DOM на основе модели данных и событий вашего класса компонента (в примере, контроллер MyComponent).

@Component({
 templateUrl: 'my.component.html'
})
export class MyComponent {

  public title: string = "Hello world";

  // ..

}

<!-- my.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

Angular CLI - инструмент для быстрой разработки приложений на Angular

Dev Tools

  • @compodoc/ngd-cli - Просмотр зависимостей в Angular
  • angular-playground - Scenario Driven Development
  • @ngrx/store-devtools - Инструменты разработчика для @ngrx/store.
  • angular-prettyjson - Улучшенный вывод объектов в шаблоне для отладки (директива json)
  • Augury - Chrome расширение разработчика для отладки
  • angular-webpack-config - Заготовленная Webpack конфигурация для быстрого старта

Starter Kit

Webpack стартеры

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

Публикации

Видеоуроки

Стайл-гайды

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

Книги

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

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

Интеграции

Подборка компонентов

Пайпы (pipes)

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

Структуры данных и манипуляции состоянием

  • angular-localstorage - Декоратор для автоматического сохранения и восстановления полей классов из LocalStorage
  • ng-webstorage - LocalStorage и SessionStorage менеджер
  • ng-storage localStorage и sessionStorage обертки
  • angular-safeguard - Обертка над cookies/sessionStorage/localStorage
  • @ngx-cache/core - Умное кеширование в Angular
  • angular-cookie Библиотека имплементирующая из AngularJS 1.x $cookies-сервис в Angular
  • ng-http-cache - Кеширование http-запросов

Роутинг

  • ng-breadcrumb - генератор иерархии маршрутизации на основе вложенного роутинга
  • ng-page-transition - Простой компонент с анимированными переходами при имезении маршрутизации
  • @ngx-i18n-router/core - Инструмент интернационализации роутинга

Валидация

Логгирование

i18n

  • @ngx-translate/core - Удобная библиотека для работы с файлами локализаций (i18n)
  • @angular-ru/ngx-i18n-combine - Объединение файлов i18n из компонентов и общих файлы для ваших локализаций (json, ts, js, jsx, tsx)
  • angular-l10n - Библиотека для перевода сообщений, дат и цифр
  • @ngx-universal/translate-loader - Лоадер, который обеспечивает переводы на стороне браузер или сервера

Производительность

  • angular-performance-checklist - чеклист советов по улучшению производительности приложений на Angular
  • @angularclass/idle-preload - Idle Preload для предварительной загрузки асинхронных маршрутов

Ленивая загрузка

  • ng-lazyload-image - Ленивая подргузка изображений на Agular
  • ng-image-lazy-load - Лоадер для ленивой загрузки изображений

Лоадеры

  • gulp-inline-ng-template - Gulp-плагин для встраивания HTML и CSS в @Component-декоратор.
  • angular-template-loader - Объединяет все html и css в единое целое при компиляции компонентов
  • angular-router-loader - Webpack лоадер, который позволяет загружать модули на основе строки с помощью маршрутизатора

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

Генераторы

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

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

TodoMVC

Расширения для IDE's

TypeScript

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

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

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

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

Dart

Dart — язык программирования, созданный Google. Dart позиционируется в качестве замены/альтернативы JavaScript. Dart - это масштабируемый язык программирования с открытым исходным кодом, с качественными библиотеками и рантаймом, для создания веб-приложений, серверов и мобильных приложений.

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

Babel

Babel – предназначен для транспиляции современного JS кода в код работающий на предыдущем стандарте, к примеру ES5.

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

Angular Online Playground

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

Babel плагины

ES5

ECMAScript включает в себя структурированные, динамические, функциональные и прототипные фичи

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

angular-es5-starter-kit Пример Angular приложения на ES5

Ionic

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

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

Meteor

Meteor — веб-платформа на языке JavaScript, предназначенная для разработки Web-приложений реального времени.

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

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

NativeScript

Создавайте действительно нативные iOS, Android приложения на JS (TS) + CSS. NativeScript - кроссплатформенный фреймворк с открытым исходным кодом.

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

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

React Native

React Native — это фреймворк для создания нативно отображаемых iOS- и Android-приложений.

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

Haxe

Haxe — это высокоуровневый мультиплатформенный язык программирования с открытым исходным кодом, а также компилятор, с помощью которого можно создавать приложения и генерировать исходный код для разных платформ, сохраняя единую кодовую базу. Haxe включает в себя функциональность, поддерживаемую на всех платформах, например: числовые типы данных, строки, массивы, а также поддержку некоторых файловых форматов (xml, zip). Haxe также включает в себя поддержку платформо-специфических API для Adobe Flash, C++, PHP и других языков. Код, написанный на языке Haxe, может быть транслирован в код ActionScript 3, JavaScript, Java, C#, C++, Python, Lua, PHP, Apache CGI, а также в приложение Node.js

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

Scala

Scala — мультипарадигмальный язык программирования, спроектированный кратким и типобезопасным для простого и быстрого создания компонентного программного обеспечения, сочетающий возможности функционального и объектно-ориентированного программирования. Язык программирования Scala является «симбиозом» Java и C#.

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

  • play-angular - серверный рендеринг Angular на Scala

C#

C# — объектно-ориентированный язык программирования. Является языком разработки приложений для платформы Microsoft .NET Framework.

Java

Java — сильно типизированный объектно-ориентированный язык программирования, разработанный компанией Sun Microsystems (в последующем приобретённой компанией Oracle). Приложения Java обычно транслируются в специальный байт-код, поэтому они могут работать на любой компьютерной архитектуре, с помощью виртуальной Java-машины.

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

Kotlin

Kotlin — статически типизированный язык программирования, работающий поверх JVM и разрабатываемый компанией JetBrains. Компилируется также в JavaScript и на другие платформы через инфраструктуру LLVM.

Bit

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

NgRx

Security

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].