shawdren / angularjs2-learning

A list of resources for learning Angular2

Angular 2-Learning

A bunch of links to blog posts, articles, videos, etc for learning AngularJS 2.

The version of this repo for Angular 1.x is [here] (https://github.com/jmcunningham/AngularJS-Learning)

Table of Contents

Books
Videos
Courses
Help
General Topics [Typescript] (#typescript) Introductions/Beginning AngularJS2
Best Practices/Style Guides
Lessons Learned
Boilerplates/Seed Projects
Sample Apps
Dependency Injection
Components
Services/Providers
Routing
Observables
Forms
Templates Component Libraries Authentication
Code Organization
Testing
Localization
Styling
Mobile
Popular Third-Party Modules

Books

Title	Author	Publisher	ng Version	Last Update
ng-book 2	Lerner, Coury, Murray, Taborda	Gumroad	v2.0	October 2016
Angular 2 Development with TypeScript	Yakov Fain and Anton Moiseev	Manning	v2.0	Sept 2016
Angular 2 Development in Action	Jeremey Wilken	Manning	v2.0	Summer 2016
Testing Angular 2 Applications	Jesse Palmer	Manning	v2.0	Summer 2016
Angular 2 Router	Victor Savkin	Leanpub	v2.0	October 2016
Angular 2 A Practical Introduction	Sebastian Eschweiler	Leanpub	v2.0	October 2016
Rangle's Angular 2 Training Book	Rangle.io	-	v2.0	?

Videos

• Egghead.io
• [Build Angular 2 apps with TypeScript and Visual Studio Code] (https://www.youtube.com/watch?v=zoCLEwFUpqg)
• [TypeScript 2.0 - ES6, ES7 features, how to use TypeScript in Angular2] (https://www.youtube.com/watch?v=R5gXgPzPR_U)

Courses

• [Angular University] (https://angular-university.io/)
• [Angular 2 From the Ground Up] (https://www.udemy.com/angular-2-from-the-ground-up/?ids=586976)
• [Ultimate Angular] (https://ultimateangular.com/)

Help

• [StackOverflow] (http://stackoverflow.com/questions/tagged/angularjs)
• [AngularJS Mailing List (Google Groups)] (http://groups.google.com/group/angular)
• [Chatroom (Browser-based IRC)] (http://webchat.freenode.net/?channels=angularjs&uio=d4)
• [AngularJS Google+ Community] (https://plus.google.com/u/0/communities/115368820700870330756)
• [reddit] (http://www.reddit.com/r/angular2)

General Topics

• [Two-way Data Binding in Angular 2] (http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html)
• [Angular 2 Animations - Foundation Concepts] (http://blog.thoughtram.io/angular/2016/09/16/angular-2-animation-important-concepts.html)
• [Angular 2 Change Detection Explained] (http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html)
• [Two Phases of Angular 2 Applications] (https://vsavkin.com/two-phases-of-angular-2-applications-fda2517604be#.b8enydcti)
• [Change Detection in Angular 2] (https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.zbsrbs3od)
• [Angular 2 NgModule Intro - Ahead Of Time Compilation And Lazy Loading - Avoid Common Pitfalls] (http://blog.angular-university.io/angular2-ngmodule/)
• [How does Angular 2 Change Detection Really Work ?] (http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/)
• [Use @NgModule to Manage Dependencies in your Angular 2 Apps] (https://auth0.com/blog/angular-2-ngmodules/)
• [Debugging Angular 2 Apps with Augury] (https://scotch.io/tutorials/debugging-angular-2-apps-with-augury)
• [Ahead-of-Time Compilation in Angular 2] (http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/)
• [Scalable Single-Page Application Architecture] (http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/)
• [Building an Angular 2 Application for Production] (http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/)
• [Debugging Angular 2 Applications] (http://tutorials.pluralsight.com/front-end-javascript/debugging-angular-2-applications)
• [Angular 2 Lazy Loading with Webpack] (https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack)
• [Angular 2 AoT Compilation with webpack] (https://medium.com/@laco0416/aot-compilation-with-webpack-359ac9f4916f#.6rqapma5q)

Typescript

• [Angular 2: Why Typescript] (https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8#.e8hmmohp5)
• [Functional Typescript] (https://vsavkin.com/functional-typescript-316f0e003dc6#.u1x9h5g75)
• [Learn Typescript in 30 Minutes] (http://tutorialzine.com/2016/07/learn-typescript-in-30-minutes/)
• [Adding Custom Typings Files (*.d.ts) In An Angular 2 TypeScript Application] (https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm)

Introductions/Beginning Angular2

• [Core Concepts of Angular 2] (https://vsavkin.com/the-core-concepts-of-angular-2-c3d6cbe04d04#.vdpk10s1z)

Tutorial Series

• [Tour Of Heros] (https://angular.io/docs/ts/latest/tutorial/index.html)
• [Official Angular 2 Quickstart] (https://angular.io/docs/ts/latest/quickstart.html)
• [Angular 2 User Registration and Login Example & Tutorial] (http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial)
• [building hacker news with angular 2 cli, rxjs and webpack] (http://houssein.me/angular2-hacker-news)

Best Practices/Style Guides

• [Official Style Guide] (https://angular.io/docs/ts/latest/guide/style-guide.html)

Lessons Learned

Boilerplates/Seed Projects

• [Angular CLI] (https://github.com/angular/angular-cli)
• [Official Quick Start by the Angular team] (https://github.com/angular/quickstart)
• [Angular Seed] (https://github.com/mgechev/angular-seed)
• [Angular 2 Webpack] (https://github.com/preboot/angular2-webpack)
• [Angular2 Seed] (https://github.com/falconmick/angular-seed)

Sample Apps

• [Angular 2 Kitchen Sink] (https://github.com/born2net/Angular-kitchen-sink)
• [Angular 2 Chat App] (https://github.com/start-angular/angular2-node-socket-io-chat-app)
• [Angular 2 Full Stack Project] (https://github.com/DavideViolante/Angular2-Full-Stack)

Dependency Injection

• [Dependency Injection in Angular 1 & Angular 2] (https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18#.s31f6b2l5)

Components

• [Angular 2 Template Syntax] (http://victorsavkin.com/post/119943127151/angular-2-template-syntax)
• [Component Relative Paths in Angular 2] (http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html)
• [Polymorphic Component Container using ContentChildren] (http://www.mcrook.com/2016/10/angular-2-contentchildren-with-abstract.html)
• [Stateful and Stateless Components: The Missing Manual] (https://toddmotto.com/stateful-stateless-components)
• [Angular 2 Smart Components vs Presentation Components: What's the Difference, When to Use Each and Why?] (http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/)

Services/Providers

• [Bypassing Providers in Angular 2] (http://blog.thoughtram.io/angular/2016/09/14/bypassing-providers-in-angular-2.html)

Routing

• [Resolving Route Data in Angular 2] (http://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html)
• [Routing in Angular 2 Revisited] (http://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html)
• [Protecting Routes Using Navigation Guards] (http://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html)
• [Angular Router: Understanding Redirects] (https://vsavkin.com/angular-router-understanding-redirects-2826177761fc#.gcqlf0qvq)
• [The Powerful URL Matching Engine of Angular Router] (https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router-775dad593b03#.qdynh1gsq)
• [Angular Router: Preloading Modules] (https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb#.6kqqd77v2)
• [Angular 2 Router] (https://vsavkin.com/angular-2-router-d9e30599f9ea#.k0skg6bxn)
• [Angular Router: Declarative Lazy Loading] (https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee#.71q1f28h8)
• [Angular 2 Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes] (http://blog.angular-university.io/angular-2-router-nested-routes-and-nested-auxiliary-routes-build-a-menu-navigation-system/)
• [Angular 2 Router Introduction - Child Routes, Auxiliary Routes, Avoid Common Pitfalls] (http://blog.angular-university.io/angular2-router/)
• [Named Router Outlets in Angular 2] (http://onehungrymind.com/named-router-outlets-in-angular-2/)

Observables

• Taking Advantage of Observables in Angular 2: [Part 1] (http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html), [Part 2] (http://blog.thoughtram.io/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html)
• [Cold versus Hot Observables] (http://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html)
• [Managing State In Angular 2 Applications] (https://vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02#.x1ql2h7ku)
• [The Taxonomy of Reactive Programming] (https://vsavkin.com/the-taxonomy-of-reactive-programming-d40e2e23dee4#.j0qx1fyxi)
• [Angular 2 HTTP Requests with Observables] (https://scotch.io/tutorials/angular-2-http-requests-with-observables)
• [RxJ First Steps] (http://juristr.com/blog/2016/06/rxjs-1st-steps-subject/)
• [3 Common Rxjs Pitfalls that you might find while building Angular 2 Applications] (http://blog.angular-university.io/angular-2-rxjs-common-pitfalls/)
• [Observables Cheat Sheet] (http://onehungrymind.com/observable-cheat-sheet/)

Forms

• [Reactive Forms in Angular 2] (http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html)
• [Custom Form Controls in Angular 2] (http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html)
• [Introduction to Angular 2 Forms - Template Driven vs Model Driven or Reactive Forms] (http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/)
• [Angular 2 Form Validation] (https://scotch.io/tutorials/angular-2-form-validation)
• [How to Build Nested Model-driven Forms in Angular 2] (https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2)
• [Using Angular 2’s Model-Driven Forms with FormGroup and FormControl] (https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol)
• [How to Implement Conditional Validation in Angular 2 Model-driven Forms] (https://scotch.io/tutorials/how-to-implement-conditional-validation-in-angular-2-model-driven-forms)
• [Using Angular 2’s Template-Driven Forms] (https://scotch.io/tutorials/using-angular-2s-template-driven-forms)
• [How to Deal with Different Form Controls in Angular 2] (https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2)
• [Angular 2 form fundamentals: reactive forms] (https://toddmotto.com/angular-2-forms-reactive)
• [Angular 2 form fundamentals: template-driven forms] (https://toddmotto.com/angular-2-forms-template-driven)
• [Angular 2 Forms — Create Async Validator Directive] (https://medium.com/@NetanelBasal/angular-2-forms-create-async-validator-directive-dd3fd026cb45#.ge1d9la2t)
• [Reactive FormGroup validation with AbstractControl in Angular 2] (https://toddmotto.com/reactive-formgroup-validation-angular-2)

Templates

• [Angular 2 Template Syntax] (https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rmb27rg77)
• [Angular 2 ngFor - Learn all Features including trackBy, why is it not only for Arrays ?] (http://blog.angular-university.io/angular-2-ngfor/)

Authentication

• [Angular 2 Authentication Tutorial] (https://dzone.com/articles/angular-2-authentication-tutorial-part-ii)
• [Auth0: Angular 2 Authentication] (https://auth0.com/blog/angular-2-authentication/)
• [JWT authentication with Vert.x, Keycloak and Angular 2] (http://126kr.com/article/5ycbj4vkc4q)
• [Angular 2 — Making your component auth-aware] (https://medium.com/@NetanelBasal/angular-2-making-your-component-auth-aware-982054048c8a#.cj6um59ur)

Code Organization

Testing

• [3 Ways to Test Angular 2 Components] (https://vsavkin.com/three-ways-to-test-angular-2-components-dcea8e90bd8d#.g1gb8mbe6)
• [Testing Components in Angular 2 with Jasmine] (https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine)
• [Angular 2 Testing In Depth: Services] (https://auth0.com/blog/angular-2-testing-in-depth-services/)

Localization

• [Angular 2: Automated i18n workflow using gulp] (http://rolandoldengarm.com/index.php/2016/10/17/angular-2-automated-i18n-workflow-using-gulp/)

Styling

• [CSS Encapsulation with Angular 2 Components] (https://coryrylan.com/blog/css-encapsulation-with-angular-2-components)

Mobile

Popular Third-Party Modules

• [Angular 2 Progressbar] (https://murhafsousli.github.io/ng2-progressbar/)
• [PrimeNG] (http://www.primefaces.org/primeng/#/)
• [Kendo UI for Angular 2] (http://www.telerik.com/kendo-angular-ui/)