Course Purchase Includes

Each purchase comes with a 10 day money-back guarantee

  • 19.5 hours of content

  • Unlimited access

  • Access to code forums

  • Devslopes Certificate of Completion

Course curriculum

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