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
    • Introduction to the Bugged Out App
    • Adding the Bugs Module (Feature Module)
    • Creating a Shared Module
    • Creating the Bug List Component
    • Introduction to Routing
    • Creating the Router
    • Creating the Bug Module's Own Routing
    • Implementing Route Redirection
    • Adding Wildcard Routing
    • Creating the Navbar Component
    • Navbar template logo
    • Creating the Navbar Template
    • Styling the Navbar
    • Introduction to Router Links
    • Creating the Bug List Template
    • Styling the Bug List Component
    • Introduction to the Core Module
    • Creating the Core Module
    • Introduction to Firebase
    • Creating the Firebase Project
    • Adding the Firebase SDK
    • Creating the Firebase Config Service
    • Structuring Our Bug Data in the Firebase Database
    • Configuring Access to the Firebase Database
    • Creating the Bug Service
    • Introduction to Firebase Listeners
    • Using a Firebase Listener to Get Data
    • Typescript Data Encapsulation
    • Creating the Bug Model Class
    • Parsing the Bug Data from Firebase (TypeScript Casting)
    • Displaying the Bugs in the Table
    • Creating the Bug Detail Component
    • Creating the Bug Detail Template (Bootstrap Modal)
    • Displaying the Bug Detail Modal (Attribute Binding)
    • Creating the Bug Detail Form
    • Styling the Bug Detail Form
    • Creating the Form Model (Reactive Forms/Model Driven Forms)
    • Binding the Form Model to the Template
    • Submitting the Reactive Form
    • Using Validators for Form Validation
    • Introduction to Form and FormControl States
    • Creating a Custom Validator
    • Applying a Custom Validator (Reactive Form / Model Driven Form)
    • Applying Validation Styling
    • Creating Reactive Forms Using the FormBuilder
    • Creating the Add Bug TypeScript Method
    • Using the Add Bug TypeScript Method
    • Resetting the Form on Submit
    • Passing an Existing Bug into the Form
    • Creating the Bug Update Method
    • Using the Update Bug Method
    • Adding a Firebase Child Changed Listener
    • Parsing the Bug Updates
    • Transforming the Date Format in the Table
    • Displaying the Status String in the Table (TypeScript Enum)
    • Displaying the Severity String in the Table
    • Using the TypeScript Enums for the Dropdowns
    • Disabling the Submit Button when the Form is Invalid
    • Final Tweaks of the Bugged Out App
    • Bugged Out Exercise
    • Bugged Out final source