timjacobi/angular-education

A list of helpful material to develop using Angular

Current Angular version:

UPDATED REPO LINKS!

For Angular 1.x education please visit https://github.com/timjacobi/angularjs-education

For Angular 2+ education please visit https://github.com/timjacobi/angular-education

Contributing

Please send a pull request to add any links and use the issues for general questions, thanks!

Introduction

• Official Angular Design Docs (Google Drive)
• Official Angular 2 - 5 min quickstart
• Angular2 - First Impressions (Minko Gechev)
• Angular 2 Series: Introduction (Ionic Team)
• Video: Keynote on Angular 2 (Misko Hevery, Rado Kirov)
• All About Angular 2.0 (Rob Eisenberg)
• The awesomeness of Angular 2 (Ciro Nunes)
• Angular 2 and the future of HTML5 apps (Brad Green)
• From Angular 1.x ng-repeat to Angular 2 NgFor with Component
• Migrating A Component From Angular 1.x to Angular 2
• Angular 2: Attribute @Directive() & Creating An Infinite Scroll Directive
• Angular 2 – Communication Between Components & Components Design

Angular NgRx/Store

• Adding Redux With NgRx/store and Angular2 - Part 1
• Adding Redux with NgRx/store to Angular2 – Part 2 (Testing Reducers)
• Angular 2 & NgRx/store: The NgModel In Between Use Case (from Angular 1)
• Comprehensive Introduction to @ngrx/store
• Video: @ngrx/store in 10 minutes (egghead.io)

Angular Explained

• Exploring Angular 2
• Two Phases of Angular 2 Applications (Victor Savkin)
• Angular 2 Template Syntax (Victor Savkin)
• Change Detection in Angular 2 (Victor Savkin)
• Functional Programming in Angular 2 (Victor Savkin)
• Unified Dependency Injection (Victor Savkin)
• The Core Concepts of Angular 2
• Angular 2 Template Syntax (John Lindquist)
• Angular 2 - Binding (es5)(John Lindquist)
• Angular 2 - Hello World (es5)(John Lindquist)
• Video: Zone.JS (Brian Ford)
• Angular 2 Series: Components (Ionic Team)
• Video: Angular Router (Brian Ford)
• The difference between Annotations and Decorators (Pascal Precht)
• Video: Data binding in Angular 2 (Misko Hevery)
• Dependency Injection in Angular 2 (Pascal Precht)
• Angular 2 Server Rendering (gdi2290 and Jeff Whelpley)
• Shadow DOM Strategies in Angular 2 (Pascal Precht)
• Routing in Angular 2 (Pascal Precht)
• Styling Angular 2 Components (Pascal Precht)
• Even better ES5 code for Angular 2 (Pascal Precht)
• Angular 2 Template Syntax Demystified - Part 1 (Pascal Precht)
• Introduction to Angular 2 – The fundamentals of Components (Aleksey Novik)
• Host and Visibility in Angular 2's Dependency Injection (Pascal Precht)
• Angular 2 Cheat Sheet (WIP)
• Forward References in Angular 2 (Christoph Burgdorf)
• Resolving Service Dependencies in Angular 2 (Pascal Precht)
• Angular 2: Event Emitters(Shawn Mckay)
• Angular 2: Properties(Shawn Mckay)
• Angular 2: Pipes(Shawn Mckay)
• How to set up Angular2 unit tests (Dima Kuzmich)
• How does Angular 2 Change Detection Really Work ?
• How to run Angular 2 in Production Today ?
• The Ultimate Angular CLI Reference Guide (Jurgen Van de Moere)

Angular Forms

• Video: AngularJS 2.0 Forms - Extending Todo app with Forms Validation (Ajden Towfeek)
• Forms in Angular 2 (Victor Savkin)
• Angular 2 Forms (David East)
• The Ultimate Guide to Forms in Angular 2 (ng-book)
• Angular 2 Form Builder and Validation Management (Cory Rylan)
• JavaScript/JSON powered FORMS for ANGULAR 2 (ng2-formly)
• Introduction to Angular 2 Forms - Template Driven, Model Driven or In-Between

Angular Docs

• Angular 2 Docs

Angular applications documentation tools

• 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

Angular Integrations

• Netflix: FalcorJS + Angular2 (gdi2290)
• Angular2-Meteor

Tutorials

• Video: AngularJS 2.0 Overview - ToDo Application in 20 minutes
• Video: An Angular2 Todo App: First look at App Development in Angular2
• Creating a Super Simple Todo app Using Angular 2 (Sandeep Panda)
• Developing A Tabs Component in Angular 2 (Pascal Precht)
• Developing a zippy component in Angular 2 (Pascal Precht)
• Angular 2 Singleton Service (Raúl Jiménez)
• Angular 2 Shadow DOM Emulation (Dylan Barrell)
• Injecting Parents into Angular2 Components (Dylan Barrell)
• An Introduction to Angular 2 (Jesus Rodriguez)
• Video: Getting started with Angular 2 developer preview
• Video: Creating d3 components with Angular2 and TypeScript (gdi2290 and Aysegul Yonet)
• Video: Migrating an Angular 1.x app to Angular 2 (David East)
• Complete guide of Angular 2
• recursive treeview in angular 2.0 (Torgeir Helgevold)
• How to publish a library for Angular 2 on npm (Olivier Combe)
• Angular 2 Observable Data Services (Cory Rylan)
• Angular 2 Text Snippet Directive (Cory Rylan)
• In-depth Guide: Creating Your First Angular 2 Component (Thomas Greco, Scotch.io)
• @AngularClass - Angular 2 Fundamentals
• @TutorialEdge - Angular Fundamentals
• Angular 2 Tutorial: Create a CRUD App with Angular CLI (Todd Motto, Jurgen Van de Moere)
• Understanding Component Architecture: Refactoring an Angular App (Jurgen Van de Moere)

Components

• Element Angular Angular UI library
• Awsome Angular Components
• Axponents: of Accessible Web Components (Dylan Barrell)
• Simple Example Components: TreeView, Grid, Input Values and Bindings, Core Directives, How to ignore view bindings (Torgeir Helgevold)
• ng-bootstrap Angular 2 powered Bootstrap by the angular-ui/bootstrap team
• 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-select Angular2 based replacement for select boxes
• ng2-table Simple table extension with sorting, filtering, paging... for Angular2 apps
• angular2-data-table Yet table extension with sorting, filtering, paging...
• [file-droppa] (https://github.com/ptkach/fileDroppa) Angular2 file upload and file list directives
• angular2-google-maps Angular2 directives for Google Maps.
• angular2localization An Angular 2 library to translate messages, dates and numbers.
• primeng collection of rich UI components for Angular2.
• Angular2 Infinite Scroll Directive Infinite Scroll Component
• ng2-bs3-modal Angular2 Bootstrap3 Modal Component
• ng2-swipeable-card Material Design Angular2 Swipeable Card Component
• ngx-pipes Useful pipes for Angular2 and beyond!
• 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!
• ng2-inline-editor An Angular 2 Component to edit inline any text.
• angular2-circle-progress Simple Angular 2 Circle Progress Component
• od-virtualscroll Observable-based virtual scroll implementation in Angular

Boilerplates

• Angular CLI - Official command-line generator for Angular 2 apps
• Github: ng2-play (Pawel Kozlowski)
• Github: ng2-lab (Roland Groza)
• Github: Angular2 Babel App
• Github: Angular2 Sandbox (Gion Kunz)
• Yeoman: generator-modern-web-dev (NG2, TypeScript, ES2015, SASS, ... and completely separate build system) (Sebastien Dubois)
• Yeoman: generator-angular2 (Chris Wheatley)
• Yeoman: generator-mcfly-ng2 (Avi Haiat)
• Slush: slush-angular2 (Ryan Usumi)
• slush-ng2-play Generator of minimum Angular2 with ES6, based on ng2-play from pkozlowski-opensource
• Plunkr: Angular2 + Typescript Template (@radotzki)
• Plunkr: Angular2 + ES6 Template
• Github: Angular2 + Webpack + TypeScript (gdi2290 AngularClass)
• Github: Angular2 + TypeScript in baby steps (Zia Khan)
• Github: Angular2 Seed TypeScript (Minko Gechev)
• Github: Angular2 Minimalist Starter (Roger Padilla)
• Github: Angular2 + TypeScript: Seed Project (@ghpabs) Fully automated development workflow using Gulp.
• Github: Angular2 Starter for TypeScript (Antony Budianto) Complete Gulp Workflow
• Github: Angular2 Starter for Javascript in ES6 Automated Gulp workflow with example CRUD application.
• Github: Angular2 Seed TypeScript (Matthias Schuetz) A complete, yet simple, starter for Angular 2 using TypeScript.
• Github: Angular2 boilerplate on steroids (Pedro Eugenio) This is an Angular 2 fullstack project boilerplate on steroids! Aimed at reaching top notch performance levels.
• Github: Laravel Angular2 Material Boilerplate Laravel and Angular 2 integration.

Example Apps

• Yatrum.com - App for Travellers
• ng2do (David East)
• ng-conf 2015 Demo (Microsoft)
• ng2chat (Rob Wormald)
• angular2-tuber (Alex Hawkins) A YouTube Search Engine built with Angular2
• ng2-random-user (Kent C. Dodds) Simple Random User Card getter using randomuser.me
• hn-ng2 (Harry Wolff) Hacker News implemented with Angular2. Dart version (Andres Araujo)
• NG2 Challenges Challenges to help you learn and understand the evolving Angular2 Framework.
• Angular 2 and Express - Heroku ready (Vlado Tešanović)
• cart2 (Ciro Nunes)
• Developing a MEAN app with Angular 2.0 (Arvind Ravulavaru)
• JWT authentication in Angular 2 (mgonto and gdi2290)
• Add authentication to an Angular 2 app
• Angular Reading Position Indicator
• d3 directives from Angular 1 to Angular 2 (gdi2290)
• Angular 2 Carousel component with Bootstrap
• Angular 2 Bootstrap Style Modal (Shlomi Assaf)
• Chat Application using RxJS (ng-book)
• Todo app with Firebase, OAuth, and Immutable
• Angular 2 Table pagination example + Java Spring Backend
• Dribbble Clone using Angular 2
• Angular2 Leaflet Starter
• Angular2 MapboxGL Starter
• Angular 2 & TypeScript implementation of the Responsive Dashboard (RDash) admin dashboard theme @ziyasal
• Angular 2 Chosen wrapper
• Angular 2 Money, dates and datetimes input handling
• Auth0, Angular 2: The new horizon
• Angular 2 Blog
• Angular 2 Samples(Torgeir Helgevold)
• angular2-demo Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
• TV Tracker
• Go Game
• Stock Portfolio
• Echoes Player open source app in ng2
• Sequence Alignment Calculator (@radotzki)
• Directive checking if an element is within the browsers visual viewport (@k3nsei)
• Directive checking if clicked inside elementRef or outside (@k3nsei)
• Angular 2 Chess (@shlomiassaf)
• MeetUpEvent (Angular2, Firebase)
• SoundCloud API client with Angular2, NgRx/Store and NgRx/Effects

• Angular 2 AOT (Ahead-of-Time) Compilation with Webpack

• Ng-Chat - Angular 2 Websocket Messenger Application
• Angular Admin Dashboard
• Efficient virtual scrolling demo RxJS / Angular Material / Reactive Forms / SystemJS

Live Code Experiments

• Angular 1 with Angular 2 Dependency Injection (Rob Wormald)
• angular2-playground (Sekib Omazic)
• jsBin ES5 Angular 2 (gdi2290)

Angular Material

• Official Angular 2 Material Components (very early stage of its development process)

Stack Overflow Questions

• Working with Angular 2
• How to Import the HTTP module
• How to Import Immutable.js

Classes

• Free Udemy Course - Angular 2 Fundamentals
• Udemy - The Complete Guide to Angular 2
• Udemy - Angular 2 with TypeScript for Beginners: The Pragmatic Guide
• Udemy - Introduction to Angular 2
• Udemy - Angular 2 - Concepts, Code and Collective Wisdom
• Egghead.io Angular 2
• Angular Boot Camp
• AngularClass
• Web Age Solutions - Angular 2 Programming
• Angular 2 For Beginners With Typescript (inc. Firebase App)
• Angular University - Premium Quality Tutorials on Angular 2 and its Ecosystem

Books

• Rangle.io : Introduction to Angular 2 and ngCourse2
• ng-book 2 (Ari Lerner)
• Become a ninja with Angular
• Angular 2 in action
• Angular 2 - A Practical Introduction to the New Web Development Platform
• Practical Angular 2
• Angular 2 Development with TypeScript
• Switching to Angular 2
• Mastering Angular 2 Components
• Testing Angular 2 Applications

Tools

• Babel plugin for Angular @ annotations
• Angular2 Snippets for Sublime Text
• Angular 2 Style Guide WebStorm Live Templates
• Codelyzer - A set of tslint rules for static code analysis of Angular 2 TypeScript projects.

Opinions

• Angular 2.0 is a tempest we should all embrace (Ed Gordon)

Social Media

• Gitter Channel
• #angular2 on Twitter
• @angularjs on Twitter
• #angularjs at Freenode
• Angular2 Group on Facebook
• Angularjs on Google+
• /r/Angular2 on Reddit

Angular Dart

• Angular2 Dart API cheatsheet
• Angular2 Dart cheatsheet
• Angular2 Dart Gnome Tutorial app
• Angular2 Dart Router demo

TypeScript Definitions

• DefinitelyTyped

Best Practices and Style Guidelines

• Official Angular 2 Style Guide

Related Lists

• AngularJS Education - A collection of useful resources to learn and improve your AngularJS skills
• TypeScript Education - A list of helpful material to start learning TypeScript