Home>Courses>Learn Front-End Development and Automated Testing with Angular

Learn Front-End Development and Automated Testing with Angular

Gain insights into modern web development and automated testing with Angular. Delve into test-driven development, unit, integration, and end-to-end testing while building a practical app for your portfolio.

Beginner

162 Lessons

450h 40min

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

239 Playgrounds

17 Quizzes

Course Overview

What You'll Learn

Course Content

Apply Your Skills

Course Overview

In this course, you will build an application, “Let’s Get Lunch”, for a company to help employees coordinate lunches and happy hours. This course covers modern web development and automated testing using the Angular framework. This course will dive deeply into test setup, unit testing, integration testing, and end-to-end testing. We’ll follow a test-driven development approach in our development cycle. You’ll be provided with a code repository that will serve as the API that your Angular application will ...Show More

In this course, you will build an application, “Let’s Get Lunch”, for a company to help employees coordinate lunches and happy h...Show More

What You'll Learn

Learn various features like directives, routing, and forms provided by Angular.

Learn to interact with an API using Angular.

Learn automated testing using Angular.

Learn unit, integration, and E2E testing.

Learn to test using Karma, Jasmine, and Cypress.

Learn various features like directives, routing, and forms provided by Angular.

Course Content

Before We Begin

6 Lessons

Get familiar with modern web development, Angular, automated testing, and essential development tools.

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

5 Lessons

Get started with API setup, running, verifying, and finalizing the 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

7 Lessons

Examine Angular's essential features, including CLI, modules, services, directives, and pipes.

Introduction to Angular

Conclusion on Introduction to Angular

Quiz on Angular Concepts

Let's Develop Client-Side

8 Lessons

Apply your skills to develop Angular client-side apps with routing, components, and styles.

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

5 Lessons

Map out the steps for effective app testing, from unit tests to TDD practices.

Testing Types

How to Test an App?

Writing Tests

Test-Driven Development

Quiz on Testing

User Signup

17 Lessons

Follow the process of building a user signup page, complete with authentication, routing, and testing.

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

7 Lessons

Master the steps to create a user dashboard, redirect users, and perform E2E testing.

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)

6 Lessons

Learn how to use Angular AuthGuards for securing routes and conducting authentication tests.

Auth Service

Auth Guard

Add Auth Guard to Dashboard

Dashboard E2E tests

Conclusion on Route Guard: AuthGuard

Quiz on Route Guard: AuthGuard

Navigation Bar

8 Lessons

Get started with integrating and testing a dynamic navigation bar in Angular using AuthService and Cypress.

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

10.

User Login

7 Lessons

Master the steps to implement and test a robust user login feature using Angular and Cypress.

Module and Component

Update navbar

Conclusion on User Login

Quiz on User Login

Challenge: Component Testing

11.

Creating Events

13 Lessons

Break down complex ideas to create events with authenticated users, interactive forms, and API integration.

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

12.

Dashboard Calendar

9 Lessons

Dig into integrating user events, calendar functionalities, thorough testing, and code enhancements.

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

13.

Event View

8 Lessons

Follow the process of developing and testing a fully-functional event view page.

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

14.

Event Comments

9 Lessons

Approach creating, displaying, and testing event comments in an Angular application.

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

15.

Events List

8 Lessons

Learn how to use Angular to create, test, and navigate an events listing application.

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

16.

Event Subscribe/Unsubscribe

9 Lessons

Walk through event subscription management, member list creation, and comprehensive testing techniques.

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

17.

Event Recommendations

7 Lessons

Work your way through implementing and testing restaurant recommendations in the event view page.

Recommendations Service

Recommendations List

Update Recommendations List Tests

Add Recommendations List Tests

Event Recommendations E2E tests

Conclusion on Event Recommendations

Quiz on Event Recommendations

18.

Event Update

7 Lessons

Apply your skills to updating events with components, forms, E2E tests, and addressing security issues.

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

19.

Route Guard (EventGuard)

4 Lessons

Map out the steps for implementing and testing a route guard for event ownership.

Event Guard

Event Guard Test

Conclusion on Event Guard

Quiz on Event Guard

20.

Deploy to Heroku

6 Lessons

Implement practices to deploy an Angular app with API to Heroku and secure it.

Restrict Google Maps API Key

Conclusion on Deploy to Heroku

21.

Appendix: Practice

2 Lessons

Practice using public APIs and mocked services for enhanced Angular development experience.

Public APIs

Alternative to APIs

22.

Appendix: Installation

3 Lessons

Step through installing Angular, Cypress for testing, and Heroku CLI for deployment.

Install and Run Angular Application

Install and Run Cypress

Install Heroku

23.

Conclusion

1 Lessons

Look at the completion milestone and reflect on your progress and aspirations forward.

It's a Wrap!

Project

Build a Weather App Using Angular and RxJS

beginner

1 hour

Project

Build a Weather App Using Angular and RxJS

Learn to build a weather app that provides real-time weather updates and forecasts using Angular integrated with the OpenWeather API.

beginner

1 hour

Project

Build a Personal Blogging Website Using Angular

intermediate

1 hour 30 min

Project

Build a Personal Blogging Website Using Angular

Create a blogging app with Angular featuring CRUD operations, admin controls, and user authentication.

intermediate

1 hour 30 mins

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath