awesome-angular-learning icon indicating copy to clipboard operation
awesome-angular-learning copied to clipboard

Published 20 hours ago • verified publisher icon quangv
→

Metadata

🕶️ Awesome Angular Learning Resources, Courses & Examples

Awesome Angular Learning 😎

PRs Welcome

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 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 👪
  • 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.

← Metadata

30
Stars
4
Forks
Watchers

Owner

verified publisher icon quangv

Metadata

🕶️ Awesome Angular Learning Resources, Courses & Examples

Back