Awesome Angular 2
Awesome list of Angular 2 seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular 2 ecosystem
Current Angular 2 version:
Current Browser support for Angular 2:
Table of contents:
- Angular 2
- Universal
- TypeScript
- Dart
- Traceur
- Babel
- ES5
- Ionic 2
- Meteor
- NativeScript
- React Native
- Haxe
- Scala
Angular 2
Angular is a development platform for building mobile and desktop web applications.
Official Resources
Community
#angular2
channel on Freenode IRC Server#angular2
hashtag on Twitter- Gitter Channel
- Angular 2 StackOverflow
- @AngularJS 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
- tryangular2
- Built With Angular 2
#ng-2 Slack Channel
on AngularBuddies (Sign up)#angular2 Slack Channel
on dartlang.slack.com (Sign up)
Experts on Twitter
List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.
- @gdi2290
- @jeffwhelpley
- @pkozlowski_os
- @kentcdodds
- @mhevery
- @victorsavkin
- @tbosch1009
- @teropa
- @eggheadio
- @cedric_exbrayat
- Jack Franklin
- Thierry Chatel
- Uri Shaked
- Gonzalo Ruiz de Villa Suárez
- Sharon DiOrio
- John Papa
- Dan Wahlin
- Donald Sutherland
- Christian Weyer
- Todd Motto
- Tim Ruffles
- Wassim Chegham
- Aaron Frost
- Wilson Mendes
- Jared Williams
- Gerard Sans
- Pascal Precht
- Jeff Whelpley
- {{ add_expert }}
Server-Side Rendering
Material Design
Cheatsheet
Features
Annotations
Directives
Directives allow you to attach behavior to elements in the DOM.
Read more »
Components
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.
Read more »
View
A View is a core primitive used by angular to render the DOM tree.
Read more »
Templates
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.
Read more »
Change detection
Every component gets a change detector responsible for checking the bindings defined in its template.
Read more »
Dependency Injection
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.
Read more »
Pipes
Pipes can be appended on the end of the expressions to translate the value to a different format.
Read more »
Web Workers
WebWorker support in Angular2 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.
Read more »
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.
Read more »
Router
Test
Series
- Ionic
- Angular 2
- Auth0
- thoughtram
- Angular 2 Template Syntax Demystified
Video Tutorials
Angular Connect
- Keynote – Brad Green, Igor Minar and Jules Kremer
- Testing strategies with Angular 2 – Julie Ralph
- Building native mobile apps with Angular 2 0 and NativeScript​ - Sebastian Witalec
- Angular 2 Data Flow – Jeff Cross, Rob Wormald and Alex Rickabaugh
- Iterative version upgrade strategies for large Angular applications – Jen Bourey
- Debugging Angular 2 Apps with Batarangle – Yuri Takhteyev and Igor Krivanov
- Building apps with Firebase and Angular 2 - Sara Robinson
- Better concepts, less code in Angular 2 - Victor Savkin and Tobias Bosch
- Modularity and Packaging for Angular2 Applications – Pawel Kozlowski
- Creating realtime apps with Angular 2 and Meteor - Uri Goldshtein
- Angular 2 Data Flow – Jeff Cross, Rob Wormald and Alex Rickabaugh
Books
- ng-book 2
fullstack.io
- Become a ninja with Angular 2
Ninja Squad
- Angular 2 Development with TypeScript
- Angular 2 in Action
Manning Publications
On-Site Training
Approach and Explanation
-
Victor Savkin
-
thoughtram
- Developing a tabs component in Angular 2
- Developing a zippy component in Angular 2
- Resolving Service Dependencies in Angular 2
- Forward references in Angular 2
- Host and Visibility in Angular 2's Dependency Injection
- Dependency Injection in Angular 2
- Routing in Angular 2
- Angular 2 Template Syntax Demystified - Part 1
- View Encapsulation in Angular 2
- Styling Angular 2 components
- Even better ES5 code for Angular 2
- Writing Angular 2 code in ES5
- The difference between Annotations and Decorators
Integrations
Components
- Axponents: of Accessible Web Components (Dylan Barrell)
- ng2-bootstrap: Native Angular2 bootstrap components
- ng2-file-upload Easy to use Angular2 directives for file upload
- ng2-select Angular2 based replacement for select boxes
- ng2-handsontable Excel-like data grid / spreadsheet
- ng2-bs Experiments with Angular 2 directives for Bootstrap.
- ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
- angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
Generators
- Node.js
- Dart
- Stagehand
TodoMVC
Universal Angular 2
Universal (isomorphic) javascript support for Angular 2
Universal General Resources
Universal Seed Projects
- universal-starter - Angular 2 Universal starter kit by @Angular-Class
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
- TSD TypeScript Definition manager for DefinitelyTyped
- DefinitelyTyped Repository (GitHub) The repository for high quality TypeScript type definitions.
TypeScript Seed Projects
- Angular 2 Webpack Starter - An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by @Angular-Class
- Angular 2 Seed Seed project for Angular 2 apps
- ng2-play A minimal Angular2 playground using TypeScript and SystemJS loader
- NG2 Lab A simple Angular 2 setup using TypeScript, SystemJS and Firebase that also includes a few examples of unit testing and CI with Travis 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
- {{ add_your_repo }}
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
- Angular 2 Samples Angular 2 for Dart demos and samples from the community.
- Pipes Examples of Pipes in Angular 2 for Dart.
- 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
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.
- {{ add_your_repo }}
Babel Plugins
- babel-plugin-angular2-annotations An experimental babel transformer plugin for Angular 2 annotations
- 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
ES5 Seed Projects
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 General Resources
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
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
React Native Seed Projects
Angular 2 in Haxe
Haxe is an open source toolkit based on a modern, high level, strictly typed programming language.
Haxe General 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.