Angular 2 & TypeScript Beginner Web Development

Course Curriculum

Chapter 1: Overview and Tools

Lecture 1: What is Angular 2?

Lecture 2: Angular 2 – Why we use TypeScript

Lecture 3: Angular 2 – Overview of tools

Chapter 2: Angular 2 – Creating a Skeleton Project

Lecture 1: Angular2 – skeleton project overview

Lecture 2: Angular2 – Defining the Dependancies (package.json)

Lecture 3: Angular2 – Configuring the TypeScript Compiler (tsconfig.json)

Lecture 4: Angular2 – Configuring the SystemJS Module Loader (systemjs.config.js)

Lecture 5: Angular2 – Installing the NPM Packages (npm install)

Lecture 6: Angular2 – Creating the Root Module (app.module.ts)

Lecture 7: Angular2 – Creating the Root Component (app.component.ts)

Lecture 8: Angular2 – Configuring the Starting of the App (main.ts)

Lecture 9: Angular2 – Creating the Hosting Webpage (index.html)

Lecture 10: Angular2 – Creating the Global Stylesheet (styles.css)

Lecture 11: Angular2 – Building and Running the App (npm start)

Lecture 12: Assets

Chapter 3: Angular 2 Fundamentals – Task Card App

Lecture 1: Angular 2 – Task Card App Introduction

Lecture 2: Angular 2 – How to Clone the Skeleton Project

Lecture 3: Angular 2 – Creating the Card Component

Lecture 4: Angular 2 – Creating the Card's HTML Markup (External Template)

Lecture 5: Angular 2 – Styling the Card Component

Lecture 6: Angular 2 – Adding the Task Status Icon (Third Party Library)

Lecture 7: Angular 2 – Creating the Task Model Class

Lecture 8: Angular 2 – Creating the Properties for the Card Component (Input Properties)

Lecture 9: Angular 2 – Using the Task Property Data (Property Binding)

Lecture 10: Angular 2 – Creating the Task Data Source

Lecture 11: Angular 2 – Using the Data Source to Generate Tasks (ngFor)

Lecture 12: Angular 2 – Creating the Add Task Form

Lecture 13: Angular 2 – Styling the Add Task Form

Lecture 14: Angular 2 – Adding the Angular Form Syntax (Template Driven Form)

Lecture 15: Angular 2 – Creating the Add Task Method (TypeScript Methods)

Lecture 16: Angular 2 – Adding New Tasks to the Data Source (Event Binding)

Lecture 17: Angular 2 – Protecting the Data Source from Empty Tasks

Lecture 18: Angular 2 – Clearing the Input Field After Adding a Task

Lecture 19: Angular 2 – Marking Tasks as Complete/Not Complete

Lecture 20: Angular 2 – Styling the Completed Cards (Class Binding)

Lecture 21: Angular 2 – Setting the Task Status Label to Reflect the Status (ngIf)

Lecture 22: Angular 2 – NgIf Directive vs the Hidden Property

Lecture 23: Angular 2 – Final Tweaks

Lecture 24: Exercise

Lecture 25: Assets

Chapter 4: Web API's/HTTP – Reusable Weather Component

Lecture 1: Angular 2 – Introduction to the App

Lecture 2: Angular 2 – Creating the Weather Component

Lecture 3: Angular 2 – Creating the Weather Component Template

Lecture 4: Angular 2 – Styling the Weather Component

Lecture 5: Angular 2 – Creating the Weather Component (Services)

Lecture 6: Angular 2 – An Introduction to Dependency Injection

Lecture 7: Angular 2 – Getting the User's Geographical Location

Lecture 8: Angular 2 – Signing Up for Forecast.io (Weather Data Web API)

Lecture 9: Angular 2 – Introduction to Observables (ReactiveX (RXJS) Library)

Lecture 10: Angular 2 – Introduction to JSONP Get Requests (HTTP/JSONP)

Lecture 11: Angular 2 – Getting the Weather Data (HTTP/JSONP)

Lecture 12: Angular 2 – Converting the Location Method to an Observable

Lecture 13: Angular 2 – Creating the Weather Model Class

Lecture 14: Angular 2 – Introduction to the Component Lifecycle

Lecture 15: Angular 2 – Subscribing to the Weather Data Observable (ngOnInit)

Lecture 16: Angular 2 – Displaying the Weather Data in the Template

Lecture 17: Angular 2 – Formatting the Weather Data on the Template (Pipes)

Lecture 18: Angular 2 – Converting the Wind Value (Custom Pipes)

Lecture 19: Angular 2 – Converting the Temperature Value (Custom Pipes)

Lecture 20: Angular 2 – Getting a Goole Maps API Key

Lecture 21: Angular 2 – Getting the Location Name Using Reverse Geocoding (Google Maps API)

Lecture 22: Angular 2 – Displaying the Location on the Component

Lecture 23: Angular 2 – Allowing the Changing of the Data Units

Lecture 24: Angular 2 – Adding the Javascript Icon Library (Skycons)

Lecture 25: Angular 2 – Adding the Animated Weather Icons

Lecture 26: Angular 2 – Configuring the Weather Based Colors

Lecture 27: Angular 2 – Changing the Component Colors Based on the Weather (ngStyle)

Lecture 28: Angular 2 – Hiding the Component Content Until the Data is Available

Lecture 29: Angular 2 – Adding a Loading Indicator

Lecture 30: Angular 2 – Final Tweaks

Lecture 31: Angular 2 – Reusing the Component in Another App

Lecture 32: Angular 2 – Summary and Challenges

Lecture 33: Assets

Chapter 5: Real World Angular 2 App with Backend – Bugged Out

Lecture 1: Introduction to the Bugged Out App

Lecture 2: Angular 2 – Adding the Bugs Module (Feature Module)

Lecture 3: Angular 2 – Creating a Shared Module

Lecture 4: Angular 2 – Creating the Bug List Component

Lecture 5: Angular 2 – Introduction to Routing

Lecture 6: Angular 2 – Creating the Router

Lecture 7: Angular 2 – Creating the Bug Module's Own Routing

Lecture 8: Angular 2 – Implementing Route Redirection

Lecture 9: Angular 2 – Adding Wildcard Routing

Lecture 10: Angular 2 – Creating the Navbar Component

Lecture 11: Angular 2 – Creating the Navbar Template

Lecture 12: Angular 2 – Styling the Navbar

Lecture 13: Angular 2 – Introduction to Router Links

Lecture 14: Angular 2 – Creating the Bug List Template

Lecture 15: Angular 2 – Styling the Bug List Component

Lecture 16: Angular 2 – Introduction to the Core Module

Lecture 17: Angular 2 – Creating the Core Module

Lecture 18: Angular 2 – Introduction to Firebase

Lecture 19: Angular 2 – Creating the Firebase Project

Lecture 20: Angular 2 – Adding the Firebase SDK

Lecture 21: Angular 2 – Creating the Firebase Config Service

Lecture 22: Angular 2 – Structuring Our Bug Data in the Firebase Database