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

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

Conclusion on Navigation Bar

Let's conclude what we’ve learned so far and upload our updated application to GitHub.

What have we done so far?

In this chapter:

We’ve now added a navbar to our application that subscribes to an emitted event by using an Event Emitter to keep our navbar links in sync. This depends on whether a user is logged in or not.
We wrote unit tests for NavbarComponent. We also wrote E2E tests that leverage one of Cypress’s command features to avoid code duplication.

Get hands-on with 1300+ tech skills courses.