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