Overview and Tools
  • What is Angular 2?
  • Angular 2 - Why we use TypeScript
  • Angular 2 - Overview of tools
Angular 2 - Creating a Skeleton Project
  • Angular2 - skeleton project overview
  • Angular2 - Defining the Dependancies (package.json)
  • Angular2 - Configuring the TypeScript Compiler (tsconfig.json)
  • Angular2 - Configuring the SystemJS Module Loader (systemjs.config.js)
  • Angular2 - Installing the NPM Packages (npm install)
  • Angular2 - Creating the Root Module (app.module.ts)
  • Angular2 - Creating the Root Component (app.component.ts)
  • Angular2 - Configuring the Starting of the App (main.ts)
  • Angular2 - Creating the Hosting Webpage (index.html)
  • Angular2 - Creating the Global Stylesheet (styles.css)
  • Angular2 - Building and Running the App (npm start)
  • Assets
Angular 2 Fundamentals - Task Card App
  • Angular 2 - Task Card App Introduction
  • Angular 2 - How to Clone the Skeleton Project
  • Angular 2 - Creating the Card Component
  • Angular 2 - Creating the Card's HTML Markup (External Template)
  • Angular 2 - Styling the Card Component
  • Angular 2 - Adding the Task Status Icon (Third Party Library)
  • Angular 2 - Creating the Task Model Class
  • Angular 2 - Creating the Properties for the Card Component (Input Properties)
  • Angular 2 - Using the Task Property Data (Property Binding)
  • Angular 2 - Creating the Task Data Source
  • Angular 2 - Using the Data Source to Generate Tasks (ngFor)
  • Angular 2 - Creating the Add Task Form
  • Angular 2 - Styling the Add Task Form
  • Angular 2 - Adding the Angular Form Syntax (Template Driven Form)
  • Angular 2 - Creating the Add Task Method (TypeScript Methods)
  • Angular 2 - Adding New Tasks to the Data Source (Event Binding)
  • Angular 2 - Protecting the Data Source from Empty Tasks
  • Angular 2 - Clearing the Input Field After Adding a Task
  • Angular 2 - Marking Tasks as Complete/Not Complete
  • Angular 2 - Styling the Completed Cards (Class Binding)
  • Angular 2 - Setting the Task Status Label to Reflect the Status (ngIf)
  • Angular 2 - NgIf Directive vs the Hidden Property
  • Angular 2 - Final Tweaks
  • Exercise
  • Assets
Web API's/HTTP - Reusable Weather Component
  • Angular 2 - Introduction to the App
  • Angular 2 - Creating the Weather Component
  • Angular 2 - Creating the Weather Component Template
  • Angular 2 - Styling the Weather Component
  • Angular 2 - Creating the Weather Component (Services)
  • Angular 2 - An Introduction to Dependency Injection
  • Angular 2 - Getting the User's Geographical Location
  • Angular 2 - Signing Up for Forecast.io (Weather Data Web API)
  • Angular 2 - Introduction to Observables (ReactiveX (RXJS) Library)
  • Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)
  • Angular 2 - Getting the Weather Data (HTTP/JSONP)
  • Angular 2 - Converting the Location Method to an Observable
  • Angular 2 - Creating the Weather Model Class
  • Angular 2 - Introduction to the Component Lifecycle
  • Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)
  • Angular 2 - Displaying the Weather Data in the Template
  • Angular 2 - Formatting the Weather Data on the Template (Pipes)
  • Angular 2 - Converting the Wind Value (Custom Pipes)
  • Angular 2 - Converting the Temperature Value (Custom Pipes)
  • Angular 2 - Getting a Goole Maps API Key
  • Angular 2 - Getting the Location Name Using Reverse Geocoding (Google Maps API)
  • Angular 2 - Displaying the Location on the Component
  • Angular 2 - Allowing the Changing of the Data Units
  • Angular 2 - Adding the Javascript Icon Library (Skycons)
  • Angular 2 - Adding the Animated Weather Icons
  • Angular 2 - Configuring the Weather Based Colors
  • Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)
  • Angular 2 - Hiding the Component Content Until the Data is Available
  • Angular 2 - Adding a Loading Indicator
  • Angular 2 - Final Tweaks
  • Angular 2 - Reusing the Component in Another App
  • Angular 2 - Summary and Challenges
  • Assets
Real World Angular 2 App with Backend - Bugged Out
  • Introduction to the Bugged Out App
  • Angular 2 - Adding the Bugs Module (Feature Module)
  • Angular 2 - Creating a Shared Module
  • Angular 2 - Creating the Bug List Component
  • Angular 2 - Introduction to Routing
  • Angular 2 - Creating the Router
  • Angular 2 - Creating the Bug Module's Own Routing
  • Angular 2 - Implementing Route Redirection
  • Angular 2 - Adding Wildcard Routing
  • Angular 2 - Creating the Navbar Component
  • Angular 2 - Creating the Navbar Template
  • Angular 2 - Styling the Navbar
  • Angular 2 - Introduction to Router Links
  • Angular 2 - Creating the Bug List Template
  • Angular 2 - Styling the Bug List Component
  • Angular 2 - Introduction to the Core Module
  • Angular 2 - Creating the Core Module
  • Angular 2 - Introduction to Firebase
  • Angular 2 - Creating the Firebase Project
  • Angular 2 - Adding the Firebase SDK
  • Angular 2 - Creating the Firebase Config Service
  • Angular 2 - Structuring Our Bug Data in the Firebase Database