Awesome Angular¶

Awesome Angular

Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. View as github page.

Angular¶

Angular is a development platform for building mobile and desktop web applications.

官方资源¶

社区¶

#angular2 channel on Freenode IRC Server
#angular hashtag on Twitter
Gitter Channel
Angular StackOverflow
@Angular on Twitter
/r/Angular2 Subreddit
Angular Group on Facebook
AngularJS on Google+
AngularAir podcast and live broadcast
Adventures in Angular podcast
ng-newsletter email newsletter
Angular Expo showcase
#ng-2 Slack Channel on AngularBuddies
#angular2 Slack Channel on dartlang.slack.com (Sign up)
Twitter's Most Shared #angular2 Content in a Simple Weekly Digest via The Herd Locker

推特队伍¶

推特专家¶

List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.

谷歌开发专家 ¶

服务端重写¶

Angular Universal Repository (GitHub)

物料设计¶

Official Angular Material Design (GitHub)
md2 Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Switch, Tabs, Tags(Chips), Toast and Tooltip.
ng2-material set of material2 examples and extra components (data table, dialog, ...) built on top of angular2-material/core
angular2-mdl Angular 2 components, directives and styles based on Material Design Lite
mdl-ext Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, ...)
ng2-materialize An Angular 2 wrap around Materialize library
Material Light Light, fast and easy to use Material Design components for Angular 2+ (Especially for mobile UI). There are several alternatives but this one has added value and advantages in my opinion (Take a loot at the Readme.md for details). There is also an online demo to see it in action. (API documentation is still lacking but in process).
Blox Material A lightweight Material Design library for Angular, based upon Google's Material Components for the Web.

备忘录¶

功能¶

指令¶

Directives allow you to attach behavior to elements in the DOM.

组件¶

A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

视图¶

A View is a core primitive used by angular to render the DOM tree.

模板¶

Templates are markup which is added to HTML to declaratively describe how the application model should be projected to DOM as well as which DOM events should invoke which methods on the controller.

变化检测¶

Every component gets a change detector responsible for checking the bindings defined in its template.

依赖注入¶

Angular 1.x has two APIs for injecting dependencies into a directive. Angular 2 unifies the two APIs, making the code easier to understand and test.

管道¶

Pipes can be appended on the end of the expressions to translate the value to a different format.

Web Workers¶

WebWorker support in Angular is designed to make it easy to leverage parallelization in your web application. When you choose to run your application in a WebWorker angular runs both your application's logic and the majority of the core angular framework in a WebWorker.

HTTP¶

Http is available as an injectable class, with methods to perform http requests. Calling request returns an EventEmitter which will emit a single Response when a response is received.

Introduction to HTTP in Angular 2

路由¶

测试¶

Ahead-of-Time Compilation¶

Angular CLI¶

Webpack¶

Official web page
Angular Webpack Starter from PatrickJS
Angular Webpack from preboot
Angular Nightly Webpack Starter
Angular Webpack with Visual Studio ASP.NET Core from Damien Bowden
Angular Typescript Webpack from schempy
Angular Webpack Tour of Heroes from michaelbazos - Tour of Heroes official typescript tutorial built with webpack
Angular Webpack + rxjs + modules
Shared Webpack config for Angular development by fulls1z3

系列¶

Ionic
Angular
- Introduction
- Components
Auth0
Angular
thoughtram
Angular Template Syntax Demystified
- Part 1
letsboot.com
Test Driven Development
- Part 1 Angular TDD, Karma, Jasmine, PhantomJS, Gitlab-CI
Angular and Firebase
- Part 1 Let’s learn how to install and setup AngularFire2 4.0

视频文章¶

风格设定¶

Angular Connect¶

书籍¶

ng-book 2 fullstack.io
Become a ninja with Angular 2 Ninja Squad
Angular Development with TypeScript Manning Publications
Angular in Action Manning Publications
Practical Angular 2 Leanpub
Switching to Angular 2 Packt Publishing
Rangle's Angular 2 training Rangle.io
揭秘 Angular 2 GF Securities
Learn Angular 2 Ionic Team
Testing Angular Applications Manning Publications

现场培训¶

方法和解释¶

集成¶

组件¶

Material 2 - Angular team's Material Design components built on top of Angular 2
NG ZORRO - An enterprise-class UI components based on Ant Design and Angular.
Element Angular - Element Design components built on top of Angular 2
Axponents: of Accessible Web Components (Dylan Barrell)
ng2-bootstrap Native Angular2 Bootstrap 3&4 components
ng2-charts Beautiful charts for Angular2 based on Chart.js
ng2-dragula Drag and Drop so simple it hurts!
ng2-file-upload Easy to use file upload directives
ng2-handsontable Excel-like data grid / spreadsheet
ng2-markdown Angular2 Markdown Web Component
ng2-select Angular2 based replacement for select boxes
ng2-safe-img Very tiny and safe img for Angular 2
ng2-table Simple table extension with sorting, filtering, paging... for Angular2 apps
ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
ng2-bs Experiments with Angular 2 directives for Bootstrap.
ng-lightning Native Angular 2 components & directives for Lightning Design System
ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
angular2-query-builder Modernized query builder based on jquery QueryBuilder
angular2-grid A drag/drop/resize grid-based plugin directive for angular2.
angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
angular2-cookie Library that implements Angular 1.x $cookies service in Angular 2
angular2-fontawesome Angular2 Components and Directives for Fontawesome
angular-safeguard Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
angular2-google-maps Angular2 directives for Google Maps
angular-cesium Creating map based web apps using Cesium and Angular
ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups
ng2-dropdown Dropdown menu for angular2 and bootstrap 3
angular2-multiselect-dropdown Angular 2 multiselect dropdown component for web applications
ng2-progress-bar Simple progress bar for angular2 and bootstrap 3
ng2-tabs Tabs control for angular2 and bootstrap 3
ng2-modal Modal window for angular2 and bootstrap 3
ng2-sheet Angular2 Components to add yours components inside a sheet window and repeatedly
ng2-paginator Pagination control for angular2 and bootstrap 3
fuel-ui Bootstrap 4 components and directives for use in Angular 2
prime-ng Collection of rich UI components for Angular 2
ng2-ace Ace editor directive made for Angular 2
ng2-storage A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
ng2-fontawesome A small directive making font awesome even easier to use.
ng2-sweetalert2 A wrapper for sweetalert2 for use with Angular 2.
angular2-text-mask Angular 2 input mask directive
angular-imask Angular 4+ input mask
ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js
file-droppa Simple files drop and upload component with files list
ngx-img-fallback Load placeholder image on image error
angular2-busy Show busy/loading indicators on any promise, or on any Observable's subscription
ng2-pdf-viewer PDF viewer component
Covalent - a UI platform built on Angular 2.0 + Material Design
angular2-infinite-scroll - An Infinite Scroll Directive for Angular2 (based on Observables)
ng2-card - Card view component for Angular2
Wijmo 5 - Set of UI components for Angular2
ng2-swipeable-card - Swipeable card component for Angular2
ngSemantic - UI components based on Semantic UI
vmware clarity - Mostly a CSS only framework but some components are ported to Angular 2
Teradata covalent - UI Platform built on angular/material 2.0
ng2-quill-editor - Quill editor component for Angular2
ngx-charts - Declarative Charting Framework for Angular2 and beyond!
ngx-datatable A feature-rich yet lightweight data-table crafted for Angular2 and beyond!
ngx-ui - Style and Component Library for Angular2 and beyond!
Cloudinary - Angular2 SDK for image and video management in the cloud
angular2-simple-countdown - a simple countdown angular2 directive with multiple language
ng-http-cache - Speed up your remote requests by automatically caching them on client.
ng-animate - 🌙 A collection of cool, reusable and flexible animations for Angular
lottie-angular2 - Render After Effects animations on Angular2 based on Bodymovin.
ngx-restangular - Restangular for Angular 2 and higher versions.
ngfb-sortable-table - Angular Firebase Sortable Table. Ability to filter and sort data with own firebase quering tools.
angular-split Angular split component
od-virtualscroll Observable-based virtual scroll implementation in Angular
angular2-froala-wysiwyg Angular 2 wrapper for Froala WYSIWYG HTML Editor
ngx-meta - Dynamic page title & meta tags utility for Angular (w/server-side rendering) by @fulls1z3
ngx-config - Configuration utility for Angular (incl. Angular Universal loader) by @fulls1z3
ngx-cache - Cache utility for Angular (incl. browser & server platform implementations) by @fulls1z3
ngx-i18n-router - Route internationalization utility for Angular by @fulls1z3
ngx-auth -Authentication utility for Angular by @fulls1z3
angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo
ng2-archwizard - Wizard component for Angular 2
ngx-popper - Tooltip managment, wrapper for popper.js(https://popper.js.org/)
ngx-avatar - Avatar component that makes it possible to genearte / fetch avatar based on the information you have about the user.
ngx-qrcode2 - An Angular 4+ Component library for Generating QR (Quick Response ) Codes
ng2-permission - Fully featured permission based access control for your angular 4+ applications. This module inspired from angular-permission.
ng-s-resource - Simplify RESTful http resource generator for Angular 4+.
ng-data-picker - 🏄🏼 A data picker based on Angular 4+ (like iOS native datetime picker)
ngx-siema - Lightweight and simple carousel with no dependencies.
ng-bootstrap - Angular 4 directives for Bootstrap 4 by the ui-bootstrap team
ng-snotify - Angular 4 Notification Center
ngx-permissions - Permission and roles based access control for your angular(angular 2, angular 4,5+) applications(AOT, lazy modules compatible)
nebular - Full-featured framework based on Angular
ng-select Angular ng-select - All in One UI Select, Multiselect and Autocomplete
ng-katex Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library

站点模板¶

NG-Dashboard - Dashboard for Angular 4+. UI Components based on Material Light. Chart Component based on MetricsGraficsJS. Map Directive based on LeafletJS. DEMO ONLINE

管道¶

fuel-ui OrderBy and Range pipes ported from Angular 1.x to Angular 2
ngx-filter-pipe Pipe for filtering arrays
ngx-pipes Bunch of useful pipes for Angular2 and beyond!
ngx-order-pipe OrderBy pipe for Angular4+ - sort collection by a field
angular2-camelcase Angular2 pipe to convert camelCase strings to human readable strings Edit

Generators¶

Node.js
Slush
- TheVelourFog/slush-angular2
Yeoman
- swirlycheetah/generator-angular2
Faristo
- majodi/generator-angular2
ngX-Rocket: Extensible Angular 4+ enterprise-grade generator and tools
Dart
Stagehand
- google/stagehand

文档工具¶

Compodoc : "The missing documentation tool for your Angular 2 application", integrate well with npm scripts
AngularDoc : Website that display "Architectural analysis and visualization for Angular 2 projects", integrate only with a github repository
NgModule-Viz : Visualize the dependencies between the NgModules in your Angular 2+ application.

TodoMVC¶

Official Angular 2.0

Universal Angular 2¶

Universal (isomorphic) javascript support for Angular 2

Universal General Resources¶

Universal Angular 2 Repository (GitHub)

Universal Seed Projects¶

universal-starter - Angular 2 Universal starter kit by @Angular-Class
ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3

Angular 2 in TypeScript¶

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources¶

TypeScript Official Website for TypeScript
REPL Official TypeScript REPL that runs entirely in your browser
TypeScript Repository (GitHub) Official GitHub Repo for TypeScript
DefinitelyTyped Repository (GitHub) The repository for high quality TypeScript type definitions.

TypeScript Seed Projects¶

Angular Seed Seed project for Angular apps
ng2-play A minimal Angular2 playground using TypeScript and SystemJS loader
Angular Lab A simple Angular 2+ setup using Angular CLI, TypeScript, Angular Flex Layout, Material 2, AOT, and unit and e2e tests on Travis CI and Saucelabs.
Angular2Go Angular 2 Go !
Angular 2 Samples Angular 2.0 sample components
Todo app with Firebase, OAuth, and Immutable
Spring Boot and Angular2 tutorial Angular2 practical example based on Rails tutorial.
Angular 2 Goldilocks seed - A seed project for Angular 2 and TypeScript that is not too simple, yet not too complex. In fact it's just right!
Angular 2 Starter - Simple Angular 2 Starter with Gulp workflow and Travis CI
Angular 2 Leaflet Starter - A map application starter based on Angular 2 and Leaflet
Angular 2 MapboxGL Starter - Another map application starter based on Angular 2 and MapboxGL JS
Angular 2 reconnecting websockets quickstart - Simple counter using 2-way or 1-way reconnecting websockets communication
ng2-start - Minimal setup to start creating an angular2 application
ng-kitchen-sink - The ultimate Angular 2 bootstrap single page app - touches on all key and advanced aspects of Angular
ng-skeleton - The ultimate Angular seed with ngrx, bootstrap and two factor auth
angular2-demo Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
Angular 2 Dashboard Starter - Ready to use dashboard control panel seed project based on Angular 2 and AdminLTE bootstrap theme.
ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+)
Angular 2 quickstart seed
Angular 2 full code coverage - Solid tested SystemJS and gulp workflow ready for your code using Angular2 final release (2.1.0) .. Demonstrates unit and full code coverage
Angular 2 webpack - Tour of Heroes official typescript tutorial built with webpack
ng2-boiler - A bare-bones simple starter with Angular2, TypeScript and Webpack configured.
Angular Webpack Starter - Angular Webpack Starter with AoT compilation, Lazy-loading, and Tree-shaking
Reaper - Angular 2 Webpack Starter Boilerplate w/o 2269 dependencies
famn - Angular 2 + FeathersJS application framework for both client and server side
Angular NPM Module Seed - Starting point for developing Angular modules and publishing them on NPM.
Angular2 D3v4 Seed - Angular2 D3v4 implementation of charts, graphs, area and view porting seed project
ng-seed/spa - Seed project for Angular apps featuring Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3
Reboard - Angular 4 + Material 2 starter dashboard with ngx-charts, based on generator-ngx-rocket (Typescript, SASS, Webpack, Jasmine+Karma, Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular Flex-Layout)
Angular5 + Redux + Graphql + MySQL quickstart - Simple Fullstack GraphQL Application with Angular CLI + Redux + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL).
Angular5 + Firebase + Structure - Angular 5 + Firebase + a very good router/module structure to make it your own so easy
{{ add_your_repo }}

Ionic 2 in Angular 2¶

Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.

Ionic Framework Official Website for Ionic Framework
Ionic Documentation Official for Ionic Framework

Ionic 2 通用资源¶

Angular 2 in Cordova¶

Apache Cordova is a popular mobile application development framework using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs.

Cordova Framework Official Website for Apache Cordova
Cordova Documentation Official Documentation for Apache Cordova

Cordova Seed Projects¶

Angular 2 Seed CLI Admin (Template) Multi-platform Angular 2 project (Web/PWA, Mobile and Desktop) with Ionic 2 (and optionally Bootstrap).

Angular 2 in Dart¶

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

Dart General Resources¶

Dart Official Website for Dart
Dartpad Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.
Dart Organization (GitHub) Official GitHub Organization for Dart
Pub Repository of packages of software for the Dart programming language.
Dartisans The Official Dart Google+ community
Dart Slack Channel The Official Dart Slack channel.

Dart Seed Projects¶

Angular 2 Dart Quickstart A minimal quick start project.

Dart Demo, Samples, and Examples¶

Hackernews App A HackerNews application made with Angular 2 for Dart
Router Demo A basic example of Angular 2 router.
{{ add_your_repo }}

Angular 2 in Traceur¶

Traceur is a JavaScript.next-to-JavaScript-of-today compiler

Traceur General Resources¶

Traceur Repository (GitHub) Official GitHub Repo for Traceur

Traceur Seed Projects¶

Angular 2 in Babel¶

The compiler for writing next generation JavaScript.

Babel General Resources¶

Babel Official Website for Babel
REPL Official Babel REPL that runs entirely in your browser
Babel Repository (GitHub) Official GitHub Repo for Babel

Babel Angular 2 Online Playground¶

Plunker: Angular 2 + Babel

Babel Seed Projects¶

babel-angular2-app A skeleton Angular 2 app built with Babel and Browserify.
angular2-fullstack-starter A full stack skeleton Angular 2 app built with Webpack/Babel.
angular2-es6-starter A skeleton Angular 2 ES6 application built with Babel, Webpack, Gulp.
angular-babel-seed The super simple Angular quickstarter with ES6
{{ add_your_repo }}

Babel Demo, Samples, and Examples¶

angular2-es6-todomvc Angular 2 TodoMVC implementation with ES6.
ng1-ng2-webpack-lazy-uirouter Hybrid lazy-loading Angular1 + Angular2 using UI-Router, Webpack2 and Babel.
{{ add_your_repo }}

Babel Plugins¶

babel-preset-angular2 Babel presets for Angular2
babel-plugin-type-assertion An experimental babel transformer plugin for rtts_assert

Angular 2 in ES5¶

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources¶

{{ help_add_resources }}

ES5 Seed Projects¶

angular2-es5-starter-kit Angular2 ES5 Starter Kit

Meteor in Angular 2¶

Build Realtime Web and Mobile Apps With Angular and Meteor

Meteor General Resources¶

Angular Meteor Official Website for Angular Meteor
Angular 2 Meteor

Meteor Seed Projects¶

Angular 2 in NativeScript¶

Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.

NativeScript General Resources¶

NativeScript Official Website for NativeScript
Using NativeScript

NativeScript Seed Projects¶

Angular 2 in React Native¶

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript

React Native General Resources¶

React Native Official Website for React Native

React Native Projects¶

Angular 2 React Native Renderer (GitHub)

React Native Seed Projects¶

{{ add_your_repo }}

Angular 2 in Haxe¶

Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities. General purpose language, with Haxe, you can easily build cross-platform tools targeting all the mainstream platforms natively. "Write once compile anywhere", with strong easily extendable macro system and powerfull, highly optimizing compiler with DCE (and f.e. using inline constructors). Can be used for server side rendering and in isomorphic way - possible to share the same source code compiling into client side in javascript and server side in pyhton (or java/php/node - can be choosen later/changed at scaling). Haxe code can contain (inline) any target language fragments (can be used to step by step porting), the externs mechanism provides access to the native APIs and libraries in a type-safe manner. Server, client, mobile (Android and iOS at once), desktop, embedded (Raspbery, award winning TIVO set top boxes), Playstation ... all can be reached natively with much less typing, more error-proof, more stable and compile-time type checked code even for non type-safe targets (f.e. JavaScript, PHP)!

Haxe General Resources¶

Haxe.org
Haxe on Wikipedia
Haxe Playground
Haxe compiler targets compiler targets: C++, C#, Java, Python, PHP, ActionScript 3, and Flash or Neko bytecode
Haxe Usage Survey results
Haxe discussion group - community
Haxe and Node.js
Haxe: working with JavaScript libraries
Learn haxe in Y minutes
A success story for Haxe - about porting JavaScript to haxe targeting both JavaScript and C# "without interrupting the development of actual game by the rest of the team!", "AWESOME BONUS", "there are only benefits"
News And Information For Haxe Developers
{{ help_add_resources }}

Haxe Seed Projects¶

angular2haxe Haxe Language Bindings for Angular 2
{{ add_your_repo }}

Angular 2 in Scala¶

General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.

Scala General Resources¶

{{ help_add_resources }}

Scala Seed Projects¶

Angular 2 components with Bit¶

Bit is an open source virtual repository (code base) built to make components easily manageable and usable across applications. You can quickly export any Angular component from any context while working on any project to a bit distributed Scope. Bit's reusbale component environment cuts the overhead of configuring build and test environments for exporting every new component. The Scope is a virtual component repository which stores, organizes, manages and tests your components. Once modeled on a Scope, your components can be easily found and used in any Angular application. Components can be organized together and still modified and used individually without pulling in entire libraries.

Bit Resources¶

Bit
Bit-Javascript
bitsrc - Free community hub for sharing, managing and finding open source components.

安全¶

Angular.io Security Guide - brief security guidance including Preventing cross-site scripting (XSS), Sanitization and Content security policy.

认证¶

NgRx¶

enjoy — PatrickJS