Awesome Angular Learning 😎

Awesome Angular Learning Resources, Courses & Examples

📖 Contents

• 📚 Ng Books
• 📕 Ng Courses
  • Focused Sites
  • Individual
  • Binge Sites
  • Free
  • Other
• 📊 Ng Examples
  • reference examples
  • popular examples
    • TodoMVC
    • Real-World Example
    • Hacker News Client
    • Tour of Heroes
    • Pokedex
  • state-manager examples
    • Akita
  • experts
    • John Papa
  • Seed/Starter Examples
  • other examples
• 📰 Ng News
• 🔗 Ng Other Resources

📚 Recommended Angular Books

• Programming TypeScript - Best TypeScript book that I’ve read to learn typescript.
• Pro Angular 6 - Great Angular2+ book.
• Become a Ninja with Angular - Nice in-depth and gives background and history of the development of Angular.
• https://egghead.io/browse/libraries/rxjs - not a book, but my recommended way to learn RxJS.

📕 Ng Courses

Angular Specific Learning Sites

• https://angular-university.io/ 🧠
  • https://github.com/angular-university 👪
  • https://www.udemy.com/rxjs-reactive-angular-course/ 📈 by Angular-University
• https://angularcasts.io/ - by @ryanchenkie_40935">Ryan Chenkie author of Securing Angular Applications

Individual Angular Courses

• https://www.udemy.com/the-complete-guide-to-angular-2/ - 37h by Maximilian Schwarzmüller (youtuber)
• https://www.udemy.com/the-complete-angular-master-class/ - 29.5h
• https://www.udemy.com/angular-crash-course/ - 10.5h ⚪
• https://www.udemy.com/angular-2-and-nodejs-the-practical-guide/ - 12.5h - The MEAN Stack Guide
• https://www.udemy.com/angular-4-front-to-back/ - 11.5h
• https://www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/ - 11h
• https://ultimatecourses.com/courses/angular 👍

Binge Learning Sites

• https://frontendmasters.com - 7 courses - 49h+
  • https://frontendmasters.com/learn/angular/ - 👪
• https://egghead.io/browse/frameworks/angular - 23 courses 🧠
  • https://egghead.io/browse/libraries/rxjs 🌟
• https://www.pluralsight.com/
  • https://app.pluralsight.com/paths/skill/angular - 14 courses - 52h Angular Path 🧠
• https://www.lynda.com/
  • https://www.lynda.com/AngularJS-training-tutorials/1696-0.html?category=advanced_339 - 📈

Free Angular Courses

• https://angular.io/tutorial - Tour of Heroes!
• https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-part-course-by-dan-wahlin-fc2ff27ab451/ 👍
  • https://scrimba.com/g/gyourfirstangularapp?utm_source=freecodecamp.org&utm_medium=referral&utm_campaign=gyourfirstangularapp_launch_article
• https://codecraft.tv/courses/angular/ 👍
• https://www.bitovi.com/academy/ - Bitovi Academy 👪
  • Angular ⚪
  • TypeScript
  • RxJS
  • JS
• https://www.udemy.com/course/getting-started-with-angular-2/
• https://teamtreehouse.com/library/angular-basics-2
• https://www.sitepoint.com/learn/angular/
• https://thinkster.io/tutorials/learn-angular-2
• https://www.udemy.com/courses/search/?src=ukw&q=angular&p=1&price=price-free&sort=most-reviewed - fair amount of free Angular courses on Udemy

Other Focused Angular Courses

• https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/ - 35h - Ionic 4
• https://www.udemy.com/course/test-driven-development-with-angular/ - 3h
• https://www.udemy.com/course/angular-styling-animations-for-angular-2-and-angular-4/ -7h

📊 Awesome Angular Examples

Reference Examples

• https://github.com/gothinkster/angular-realworld-example-app/ - Realworld example, modules example.
• https://github.com/johnpapa/angular-cosmosdb/tree/master/src - Client/Server code on one repository.
• https://stackblitz.com/angular/aykjopnoxpx?file=src%2Fapp%2Fgreeting%2Fuser.service.ts - singleton service example (reference in the docs)
• https://stackblitz.com/angular/jleevaraabv?file=src%2Fapp%2Fapp-routing.module.ts - lazy loading modules example (reference in the docs)
• https://stackblitz.com/angular/rllqkyqadgvb?file=src%2Fapp%2Fapp.component.ts - simple ngModule example
• https://stackblitz.com/angular/aqqyljyojye - Router example from the Ng docs.
• https://github.com/ngx-rocket/generator-ngx-rocket - Extensible Angular 8+ enterprise-grade project generator 👍

Popular Examples

TodoMVC

• https://github.com/tastejs/todomvc/tree/master/examples/angular2_es2015/app - TodoMVC
  • https://github.com/tastejs/todomvc/pull/1581 - PR (how it differs from the original todomvc/angular2 example)
• https://github.com/lacolaco/angular-todomvc/tree/master/projects/todomvc-simple/src/app - Angular 8 TodoMVC
• https://github.com/compodoc/compodoc-demo-todomvc-angular/tree/master/src/app - Angular 8 TodoMVC
  • https://compodoc.github.io/compodoc-demo-todomvc-angular/ - nice docs generation.
• https://github.com/bookwalker/angular-todomvc/tree/master/src/app - Angular 7 TodoMVC
• https://github.com/addyosmani/todomvc-angular-4/tree/master/src/app - Angular 4 TodoMVC
• https://github.com/tastejs/todomvc/tree/master/examples/angular2/app - Original TodoMVC angular2 example.
• State Managers (NgRx, NGXS, Akita)
  • https://github.com/mailok/todo-akita - NG + Akita example 👍
  • https://github.com/mailok/todo-ngxs - NG + NGXS example
  • https://github.com/lacolaco/angular-todomvc - NgRx - TodoMVC example.
  • https://github.com/bookwalker/angular-ngrx-todomvc - another NgRx example.
  • https://github.com/nicobytes/todo-app-ngrx - yet another NgRx example.

Real-World Example

• https://github.com/gothinkster/angular-realworld-example-app/tree/master/src/app - Angular Real World Example
• https://github.com/stefanoslig/angular-ngrx-nx-realworld-example-app - with ngrx & nx.

Hacker-News PWA

• https://github.com/housseindjirdeh/angular2-hn/tree/master/src/app
• https://github.com/SebastianM/angular-hacker-news/tree/master/src
• https://github.com/alfredoperez/ngx-hn/tree/master/src/app
• https://github.com/Ashishdce/hn-pwa-angular/tree/master/src/app

Tour of Heroes

• https://github.com/johnpapa/angular-tour-of-heroes/tree/master/src/app

Pokedex

• https://github.com/coryrylan/ng-pokedex/tree/master/src/app

State-manager examples

Akita

• Recommended Application Structure
• https://github.com/datorama/akita/tree/master/examples/angular-ecommerce - Akita ecommerce example
  • https://engineering.datorama.com/building-production-quality-real-world-applications-with-angular-akita-bf18d516f2f7 - blog post about ecommerce example.
• https://stackblitz.com/edit/akita-todos-app - not “TodoMVC” but example from the intro blog post.
• https://github.com/datorama/akita/tree/master/angular/playground - Akita Playground, can be viewed live http://akita.surge.sh/
• https://github.com/datorama/akita/network/dependents?package_id=UGFja2FnZS00NTE4NzU1ODc%3D - lots of examples on GitHub dependancy graph.

Expert Examples

John Papa

• ng2 StyleGuide👍
• PluralSight - Video Tutorials
• https://github.com/johnpapa/angular-cosmosdb - cosmosdb express angular
• https://github.com/johnpapa/awesome-angular-workshop
• https://github.com/johnpapa/vikings
• https://github.com/johnpapa/angular-first-look-examples
• https://github.com/johnpapa/ng-demos - older examples, but here for posterity
• https://github.com/johnpapa/pwa-angular

Seed/Starter Examples

• https://github.com/angular/angular2-seed/tree/master/src/app
• https://github.com/PatrickJS/angular-starter/tree/master/src/app
• https://github.com/qdouble/angular-webpack-starter/tree/master/src/app
• https://github.com/tomastrajan/angular-ngrx-material-starter/tree/master/projects/angular-ngrx-material-starter/src/app
• https://github.com/vladotesanovic/angular2-express-starter/tree/master/src/app - Express
• https://github.com/lathonez/clicker - Ionic 2
• https://github.com/maximegris/angular-electron/tree/master/src/app - Electron

Other Examples

• https://github.com/hamedbaatour/minimus/tree/master/src/app - A fully featured production ready Angular 8 weather app tutorial project
• https://github.com/thardy/kazuku - Kazuku CMS
• https://github.com/EladBezalel/material2-start - Angular Flex-Layout with Angular Material, tutorial & starter template
• https://github.com/anihalaney/rwa-trivia - Large Trivia App, has walk-thru tutorials 👍
• https://github.com/r-park/todo-angular-firebase
• https://github.com/TwanoO67/bootstraping-ngx-admin-lte/tree/master/src/app
• https://github.com/DeborahK/Angular-GettingStarted/tree/master/APM-Final/src/app
• https://github.com/coursefiles/angular2-essential-training/tree/master/app
• https://github.com/Ismaestro/angular8-example-app/tree/master/src/app
• https://github.com/aviabird/angularspree/tree/develop/src/app
• https://github.com/akveo/ngx-admin/tree/master/src/app
• https://github.com/codetok/cdk-admin/tree/master/src/app
• https://github.com/cornflourblue/angular2-registration-login-example/tree/master/app
• https://github.com/houko/Angular2
• https://github.com/blacksonic/todoapp-angular - author of TodoMVC/angular2_es2015
• https://github.com/luixaviles/socket-io-typescript-chat - A chat application implemented using Socket.io, TypeScript, Angular and Angular Material components ✨671 stars
• https://github.com/webmaxru/pwatter - PWA Angular Progressive Web App using Workbox
• https://github.com/avatsaev/angular-contacts-app-example - Full Stack Angular PWA example app with NgRx & NestJS

📰 Keep up to date with Ng

• https://www.reddit.com/r/Angular2/top/?t=month - Reddit/angular2 - Top this month
• https://dev.to/t/angular/top/month - Dev.to/angular - Top this month
• https://blog.angular.io/ - Angular Blog
• https://twitter.com/hashtag/angular - #angular on Twitter

🔗 Other Awesome Ng Resources

• https://github.com/avatsaev/angular-learning-resources
• https://github.com/PatrickJS/awesome-angular
• https://github.com/timjacobi/angular-education - List of ng2 learning resources.
• https://stackoverflow.com/questions/tagged/angular - Stack Overflow, most voted questions 👍
• https://hackr.io/tutorials/learn-angular - Hackr.io is a community to find and share the best online courses & tutorials.
• https://blog.bitsrc.io/the-state-of-angular-in-2019-b5fb7783a1c6 - Overview of different topics related to Angular in 2019
• 🔮 https://github.com/quangv/awesome-zeitgeist - Surveys and trends relevant to front-end design & development.
• https://github.com/mgechev/angular-performance-checklist 👍
• https://www.tutorialspoint.com/angular_material7/index.htm - Angular Material Tutorials

🌟 = highly recommended
⚪ = not comprehensive
📈 = advance
🧠 = comprehensive, includes advance material
👪 = Ng, TypeScript, RxJS (family)
👍 = looks cool
✨ = high github stars count
(icon labels are used conservatively)

Did I miss a high-quality Angular course? PR’s are welcomed! Thanks.