Back To Course Home

Learn Front-End Development and Automated Testing with Angular

0% completed

Before We Begin

Course Introduction Who is this course for?Let's Get Lunch: The Project App How Web Applications Work The Client-server Model Required Tools and Technologies

API Setup and Installation

Run MongoDB and Set up Required Accounts Let's Get Lunch API Running the API Verifying the Database Concluding API Setup and Installation

Introduction to Angular

Introduction to Angular Exploring the Code Modules Services Directives and Pipes Conclusion on Introduction to Angular Quiz on Angular Concepts

Let's Develop Client-Side

Angular's Client-Side Recreate the Project App Creating the HomeComponent Bootstrap Configuration Update AppComponent Test Conclusion on Client-Side Quiz on Client-Side Challenge: Adding Routes

Apps' Testing Refresher

Testing Types How to Test an App?Writing Tests Test-Driven Development Quiz on Testing

User Signup

Introduction User Creation Auth Service - Signup Signup Mock Test: Success Implement Signup Function Add Signup Routing Feature Build Signup Form Add Users' Dietary Preferences Signup Test: Failure Auth Service - Login Automate Login After Signup Adding Tests for Signup Component Tests for Signup Form Tests for Signup Page Conclusion on User Signup Quiz on User Signup Functionality Challenge: Use Service

User Dashboard

Adding Dashboard Feature Redirecting Users E2E Testing with Cypress E2E Tests for Signup Component Conclusion of User Dashboard Quiz on User Dashboard Challenge: Writing an E2E test

Route Guard (AuthGuard)

Auth Service Auth Guard Add Auth Guard to Dashboard Dashboard E2E tests Conclusion on Route Guard: AuthGuard Quiz on Route Guard: AuthGuard

Navigation Bar

Navbar Component Event Emitter Update Navbar Tests Complete Navbar Tests Navbar E2E Test Conclusion on Navigation Bar Quiz on Navigation Bar Challenge: Writing Cypress Commands

User Login

Module and Component Login Unit Tests Update navbar Login E2E Testing Conclusion on User Login Quiz on User Login Challenge: Component Testing

Creating Events

Setup and Routing

Auth Interceptor

Unit Tests for Interceptor

Create Event Service

Auth Service - Current User

Add Packages and Modules

Create Event Form Setup

Add Google Places Autocomplete

Form Submission Functionality

E2E Tests for Event Creation

Conclusion on Create Events

Quiz on Event Creation

Challenge: Form Validation

Dashboard Calendar

Get User Events Dashboard Tests Angular's Calendar Adding Events to the Calendar Update Calendar Tests Update Dashboard E2E Test Conclusion on Dashboard Calendar Quiz on Dashboard Calendar Challenge: Using Literal Strings

Event View

Event View Component Test Get Event Functionality Add Call to Event View Update Event View Test Event View E2E Tests Conclusion on Event View Quiz on Event View Challenge: Using date-fns Function

Event Comments

Comments Service Comments Module and Component Tests for Comments Component Create Comments Test Comments Creation Event Comments E2E Tests Conclusion on Event Comments Quiz on Event Comments Challenge: Using Placeholder

Events List

Listing All Events Events List Module Tests for Listing All Events Update Navigation Bar Events List E2E Tests Conclusion on Event List Quiz on Event List Challenge: Modifying Templates

Event Subscribe/Unsubscribe

Events Service Members List Module Subscribe/Unsubscribe to an Event Implement Subscribe Method Members List Test Event Subscribe/Unsubscribe E2E Tests Conclusion on Event Subscribe/Unsubscribe Quiz on Event Subscribe/Unsubscribe Challenge: Practicing Directives

Event Recommendations

Recommendations Service Recommendations List Update Recommendations List Tests Add Recommendations List Tests Event Recommendations E2E tests Conclusion on Event Recommendations Quiz on Event Recommendations

Event Update

Update Event Service Create Event Update Component Implement Event Update Functionality Event Update E2E tests Conclusion on Event Update Quiz on Event Update Challenge: Practicing Routers

Route Guard (EventGuard)

Event Guard Event Guard Test Conclusion on Event Guard Quiz on Event Guard

Deploy to Heroku

Adding API Property MongoDB Atlas Setup Heroku Angular App Restrict Google Maps API Key Conclusion on Deploy to Heroku

Appendix: Practice

Public APIs Alternative to APIs

Appendix: Installation

Install and Run Angular Application Install and Run Cypress Install Heroku

Conclusion

Form Submission Functionality

Let's add the onSubmit functionality and a button that submits our event form.

Now that our form is set up and our third-party libraries are working, we can add the onSubmit method that’s bound to the form’s ngSubmit event.

Below is our updated code. Use this to make changes throughout the lesson.

Get hands-on with 1300+ tech skills courses.