AngularJS2-Learning

A list of resources for learning Angular2

Added by: Sam Deering

GitHub

Repository

jmcunningham/angularjs2-learning

Stats

Stars: 418

Watchers: 418

Forks: 82

Module Description

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/)

Module stats last updated: 2017-10-18 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!