Angular Roadmap

The following is a deep dive, designed to familiarize you thoroughly with Angular. It is not the “easy path to just learning ‘enough'” – it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of TypeScript, Karma, Jasmine, and Protractor and hands on non-Angular TypeScript practice to ensure a rock solid foundation in everything Angular.

Level 0 – Reference only if you need pre-Angular basics

  1. Course: Introduction to Computer Science – CS50 (If you want more confidence programming)
  2. Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
  3. Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
  4. Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
  5. Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
  6. Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven’t studied these books, do yourself a favor and study them alongside whatever else you might be doing)
  7. Official Docs: ESLint – thoroughly review the User Guide
  8. Official Docs: Axios npm package – thoroughly review, you’ll want this for making API calls

Level 1 – Basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
You NEED to know JavaScript – if you’re shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features

For each project:

  • Use a git workflow (If you wonder what this is, read the articles in Tier 0)

For at least one project:

  • Use Angular Material
  • Use Bootstrap

  1. Official Docs: TypeScript in 5 minutes
  2. Official Docs: Angular – About Angular, all sections, pay special attention to the resources section, and within it: Angular CLI, Augury, Codelyzer, Lite-Server, and Ionic.
  3. Official Docs: Angular – Getting Started
  4. Official Docs: Angular – Tutorial, all sections
  5. Official Docs: Flexbox
  6. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  7. Official Docs: Karma – all intro sections
  8. Official Docs: Jasmine – getting started (Jasmine Standalone)
  9. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  10. Podcast: Adventures in Angular – listen to one episode of your choice.
  11. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  12. Podcast: AngularAir – watch one episode of your choice.
  13. Project: CodeWars – complete 10 problems using TypeScript
  14. Official Docs: CSS Grid Layout
  15. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  16. Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Level 2 – Beyond basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests

For at least one project:

  • Use Angular Material
  • Use Bootstrap

  1. Official Docs: TypeScript basics types through Project Configuration of the TypeScript Handbook
  2. Project: CodeWars – complete 20 problems using TypeScript
  3. Official Docs: Karma – all config sections
  4. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  5. Official Docs: Angular – Fundamentals, all sections
  6. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  7. Podcast: Adventures in Angular – listen to one episode of your choice.
  8. Podcast: AngularAir – watch one episode of your choice.
  9. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  10. Project: CodeWars – complete 20 problems using TypeScript
  11. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  12. Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Level 3 – Intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Utilize Sass
  • Implement end-to-end testing

For at least one project:

  • Use Angular Material
  • Use Bootstrap

  1. Official Docs: Angular – Techniques, all sections
  2. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  3. Official Docs: Jasmine Docs – study in their entirety
  4. Book: TypeScript Deep Dive
  5. Official Docs: Protractor Quickstart
  6. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  7. Official Docs: Protractor Setup
  8. Project: Google Code Jam – complete the qualifying round of any past contest using TypeScript
  9. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  10. Podcast: Adventures in Angular – listen to one episode of your choice.
  11. Podcast: AngularAir – watch one episode of your choice.
  12. Official Docs: MDN Client-side storage
  13. Official Docs: RxJS Docs
  14. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  15. Project: CodeWars – complete 20 problems using TypeScript
  16. Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Level 4 – Beyond intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Utilize Sass
  • Implement end-to-end testing

For at least one project:

  • Use Angular Material
  • Use Bootstrap

On two projects of your choice – use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.


  1. Official Docs: Angular – API, all sections
  2. Official Docs: Protractor Tests
  3. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  4. Official Docs: Protractor Reference
  5. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  6. Podcast: Adventures in Angular – listen to one episode of your choice.
  7. Project: CodeWars – complete 20 problems using TypeScript
  8. Podcast: AngularAir – watch one episode of your choice.
  9. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  10. Official Docs: Webpack Docs
  11. Official Docs: Gulp Docs
  12. Project: Google Code Jam – complete one round of any past contest using TypeScript
  13. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  14. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  15. Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  16. Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
  17. Official Docs: JavaScript Guide on MDN study thoroughly three chapters
  18. Project: Utilize everything you’ve learned to create a comprehensive portfolio that showcases your ability with Angular, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.

Bonus – advanced

  1. Official Docs: Ionic Framework Study thoroughly, then refactor any previous project into a mobile app using Ionic
  2. Project: Make an open source contribution to a project you use
  3. Official Docs: MDN Accessibility
  4. Project: Google Code Jam – complete one round of any past contest using TypeScript
  5. Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
  6. Write an extensive tutorial on Angular – post it publicly
  7. Project: Make an open source contribution to a project you use
  8. Project: Google Code Jam – complete one round of any past contest using TypeScript
  9. Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in TypeScript
  10. Project: Make an open source contribution to a project you use
  11. Project: Google Code Jam – complete one round of any past contest using TypeScript
  12. Project: Make an open source contribution to a project you use
  13. Project: Google Code Jam – complete one round of any past contest using TypeScript
  14. Project: Make an open source contribution to a project you use
  15. Project: Google Code Jam – complete one round of any past contest using TypeScript
  16. Project: Make an open source contribution to a project you use
  17. Project: Make an open source contribution to a project you use
  18. Project: Make an open source contribution to a project you use
  19. Project: Make an open source contribution to a project you use
  20. Project: Make an open source contribution to a project you use
  21. Project: Make an open source contribution to a project you use
  22. Project: Make an open source contribution to a project you use

Helpful links

  1. How to not f-up your local files with Git part1, part2 and part 3
  2. surge.sh
  3. Learn to Code HTML & CSS
  4. Learn to Code Advanced HTML & CSS
  5. Getting Sassy with CSS
  6. Programming for the Web with JavaScript
  7. Data Visualization and D3.js
  8. YDKJS
  9. For when you need assets/ideas
    1. pixabay
    2. Unsplash
    3. Pexels
    4. LibreStock
    5. Google Fonts
    6. FlatIcon’s Free Icon Sets
  10. Official Docs
    1. MDN HTML – for exploring all that HTML has to offer
    2. MDN CSS– for exploring all that CSS has to offer
    3. MDN JavaScript– for exploring all that JavaScript has to offer
    4. Sass – supercharged CSS
    5. D3 – for creating awesome graphs and charts
    6. Angular – option for creating single page apps on the frontend
    7. Karma – venture into testing
    8. Jest – venture into testing
    9. Webpack – module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
    10. Babel – makes the new JavaScript work on old browsers (or node versions for that matter)
    11. Gulp – for automating your workflow
    12. ESLint – for helping to keep your code clean
    13. Prettier – more help keeping your code clean
    14. Travis – continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)

Attribution

Related Articles

Core Java

1. What are primitive types in Java ? byte, short, int, long, float, double, char, boolean… 2. What are tokens? Name the 5 types of tokens available in Java with an example…

Hackerearth-Java

     1. Challenge : Welcome to Java! Welcome to the world of Java! In this challenge, we practice printing to stdout. The code stubs…

JavaScript

Explain event delegation Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The…

Responses

Your email address will not be published. Required fields are marked *

KodNest Training New Batch is starting on 21st September 2020. Attend one week free demo classes.Register Now

New Report

Close