Skip to content

Latest commit

 

History

History
192 lines (168 loc) · 17.5 KB

angular.md

File metadata and controls

192 lines (168 loc) · 17.5 KB
Raw

Angular - Topic Deep Dive

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.

Tier 0 - reference only if you need pre-Angular basics

  • Course: Introduction to Computer Science - CS50 (If you want more confidence programming)
  • 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.)
  • Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
  • Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
  • Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
  • 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)
  • Official Docs: ESLint - thoroughly review the User Guide
  • Official Docs: Axios npm package - thoroughly review, you'll want this for making API calls

Tier 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 - and hit YDKJS.

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
  • Official Docs: TypeScript in 5 minutes
  • 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.
  • Official Docs: Angular - Getting Started
  • Official Docs: Angular - Tutorial, all sections
  • Official Docs: Flexbox
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Official Docs: Karma - all intro sections
  • Official Docs: Jasmine - getting started (Jasmine Standalone)
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Podcast: Adventures in Angular - listen to one episode of your choice.
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Podcast: AngularAir - watch one episode of your choice.
  • Project: CodeWars - complete 10 problems using TypeScript
  • Official Docs: CSS Grid Layout
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Tier 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
  • Official Docs: TypeScript basics types through Project Configuration of the TypeScript Handbook
  • Project: CodeWars - complete 20 problems using TypeScript
  • Official Docs: Karma - all config sections
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Official Docs: Angular - Fundamentals, all sections
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Podcast: Adventures in Angular - listen to one episode of your choice.
  • Podcast: AngularAir - watch one episode of your choice.
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Project: CodeWars - complete 20 problems using TypeScript
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Tier 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

Tier 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.

  • Official Docs: Angular - API, all sections
  • Official Docs: Protractor Tests
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Official Docs: Protractor Reference
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Podcast: Adventures in Angular - listen to one episode of your choice.
  • Project: CodeWars - complete 20 problems using TypeScript
  • Podcast: AngularAir - watch one episode of your choice.
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Official Docs: Webpack Docs
  • Official Docs: Gulp Docs
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
  • Project: Select an API from Todd Motto's API List and build an Angular application powered by data fetched from the API you chose.
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters
  • 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

  • Official Docs: Ionic Framework Study thoroughly, then refactor any previous project into a mobile app using Ionic
  • Project: Make an open source contribution to a project you use
  • Official Docs: MDN Accessibility
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
  • Write an extensive tutorial on Angular - post it publicly
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • 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
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using TypeScript
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use

Helpful links