Your First Full Stack Application with Angular and Spring Boot

Take your first steps towards becoming a Full Stack Developer with Angular and Spring Boot

Angular is a complete front end framework with a wide range of features

Strong Module System

Strong Component System

Forms Handling

Routing System

Dependency Injection

HTTP Requests

Spring Boot is an awesome framework to build RESTful API and Microservices.

In this course, lets combine these awesome frameworks to create your first full stack web application.

Installation Guides

Our Recommendations

Use latest versionof Java

Use latest versionof "Eclipse IDE for Enterprise Java Developers"

Remember: Spring Boot 3+ works only with Java 17+

Node v8+ for npm

Visual Studio Code - Latest Version

Installing Java

Windows - https://www.youtube.com/watch?v=I0SBRWVS0ok

Linux - https://www.youtube.com/watch?v=mHvFpyHK97A

Mac - https://www.youtube.com/watch?v=U3kTdMPlgsY

Troubleshooting

Troubleshooting Java Installation - https://www.youtube.com/watch?v=UI_PabQ1YB0

Installing Eclipse

Windows - https://www.youtube.com/watch?v=toY06tsME-M

Others - https://www.youtube.com/watch?v=XveQ9Gq41UM

Troubleshooting

Configuring Java in Eclipse - https://www.youtube.com/watch?v=8i0r_fcE3L0

Installing Node Js (npm) & Visual Studio Code

Playlist - https://www.youtube.com/playlist?list=PLBBog2r6uMCQN4X3Aa_jM9qVjgMCHMWx6

Steps

Step 01 - Installing NodeJs and NPM - Node Package Manager

Step 02 - Quick Introduction to NPM

Step 03 - Installing Visual Studio Code - Front End Java Script Editor

Troubleshooting Installations

Node JS and NPM

https://docs.npmjs.com/common-errors

https://docs.npmjs.com/getting-started/troubleshooting

Visual Studio Code

https://code.visualstudio.com/docs/supporting/errors

https://code.visualstudio.com/docs/supporting/FAQ

Eclipse and Embedded Maven

PDF : https://github.com/in28minutes/SpringIn28Minutes/blob/master/InstallationGuide-JavaEclipseAndMaven_v2.pdf

GIT Repository For Installation : https://github.com/in28minutes/getting-started-in-5-steps

Getting Started with Spring, Spring Boot and JPA

Spring Tutorial for Beginners - https://www.youtube.com/watch?v=edgZo2g-LTM

Spring Boot Tutorial for Beginners - https://www.youtube.com/watch?v=pcdpk3Yd1EA

JPA and Hibernate Tutorial for Beginners - https://www.youtube.com/watch?v=MaI0_XdpdP8

Course Overview

Introduction

Developing your first full stack application with Angular and Spring Boot is fun.

In this course, you will learn the basics of full stack development developing a Basic Todo Management Application using Angular, Spring Boot and Spring Security Frameworks.

You will build the application step by step - in more than 50 steps. This course would be a perfect first step as an introduction to Angular and Full Stack Development.

You will be using Angular (Frontend Framework), TypeScript Basics, Angular Cli(To create Angular projects), Spring Boot (REST API Framework), Spring (Dependency Management), Spring Security (Authentication and Authorization - Basic and JWT), BootStrap (Styling Pages), Maven (dependencies management), Node (npm), Visual Studio Code (TypeScript IDE), Eclipse (Java IDE) and Tomcat Embedded Web Server. We will help you set up each one of these.

What You will learn

You will develop your first full stack application with Angular and Spring Boot

You will learn the basic of Angular - Angular Modules, Components, Data Binding and Routing

You will learn basics of building awesome frontend applications with Angular

You will be introduced to building great RESTful APIs with Spring Boot

You will learn to use Spring Security to configure Basic Authentication and JWT

You will learn to solve the challenges of connecting an Angular Frontend to a RESTful API

You will learn to connect REST API to JPA/Hibernate with Spring Boot

You will learn to use a wide variety of Spring Boot Starter Projects - Spring Boot Web, and Spring Boot Data JPA

You will understand the best practices in designing RESTful web services

You will develop a Todo Management Full Stack Application step by step with login and logout functionalities

You will learn the magic of Spring Boot - Auto Configuration, Spring Initializr and Starter Projects

You will understand how to make best use of Spring Boot Actuator and Spring Boot Developer Tools

You will understand and use the embedded servlet container options provided by Spring Boot

Requirements

You should have prior experience with Java, Basic JavaScript and Spring Framework.

You should have Chrome browser installed.

We will help you install Eclipse, Visual Studio Code and Node JS(for npm)

We will help you install Chrome Restlet Client Plugin

We will help you learn the basics of Modern JavaScript, TypeScript, Spring Boot and JPA.

Step Wise Details

Quick Overview

Step 01 - Understanding Full Stack Application Architecture

Step 02 - Quick Overview of Modern JavaScript and TypeScript

Step 03 - Installing Angular CLI - Awesome Tool to create Angular Projects

Step 04 - Creating and Launching Angular Application with Angular CLI

Step 05 - Importing Angular App into Visual Studio Code

Step 06 - Exploring Angular CLI Commands - test, lint, e2e, serve, build

Step 07 - Exploring Angular CLI Project Structure

Getting Hands on With Angular

Step 08 - Introduction to Angular Components - Basics

Step 09 - Introduction to Angular Components - Playing with AppComponent

Step 10 - Generating Welcome Component with ng generate

Step 11 - Language Variations With an Example - Java, JavaScript and TypeScript

Step 12 - Generating and Setting up Login Component

Step 13 - Understanding Event Binding - Adding click event on Login Page

Step 14 - Using ngModel with 2 Way Data Binding in Login Page

Step 15 - Quick Review of Data Binding Approaches

Step 16 - Adding Hardcoded Authentication to Logic Component - ngIf directive

Step 17 - Implementing Routes for Login, Welcome and Error Components

Step 18 - Implementing Routing from Login to Welcome Component

Step 19 - Adding Route Parameter for Welcome Component

Step 20 - Create List Todos Component with ng generate

Step 21 - Create a Link to Todos in Welcome Component

Step 22 - Best Practice - Create a Todo Class

Step 23 - Quick Introduction to Angular Modules

Step 24 - Understanding Bootstrapping of Angular App with Root Module and Component

Step 25 - Quick Review - Angular Modules and Components

Step 26 - Overview of Next Few Steps - Bootstrap, Menu, Footer and Refactoring

Step 27 - Adding Bootstrap Framework and Creating Components for Menu and Footer

Step 28 - Using Bootstrap to Create a Menu with Navigation Links

Step 29 - Styling Footer and Other Components with CSS and Bootstrap

Step 30 - Good Practice - Use RouterLink instead of href for Routes

Step 31 - Creating an Independent Authentication Service Component

Step 32 - Using Session Storage to Store User Authentication Token

Step 33 - Enabling Menu Links Based on User Authentication Token

Step 34 - Implementing Logout to remove User Authentication Token

Step 35 - Securing Components using Route Guards - Part 1

Step 36 - Securing Components using Route Guards - Part 2

Step 37 - Quick Review - Authentication Service, Dependency Injection and Route Guards

Introduction to Web Services and REST

Step 41 - What is a Web Service?

Step 42 - Important How Questions related to Web Services

Step 43 - Web Services - Key Terminology

Step 44 - Introduction to RESTful Web Services

Getting Up and Running with REST and Spring Boot

Step 45 - Initializing a RESTful Services Project with Spring Boot

Step 46 - Creating a Hello World Service

Step 47 - Enhancing the Hello World Service to return a Bean

Step 48 - Quick Review of Spring Boot Auto Configuration and Dispatcher Servlet - What's happening in the background?

Step 49 - Enhancing the Hello World Service with a Path Variable

Connecting Angular Frontend to Spring Boot Restful Services

Step 50 - Connecting Angular Frontend with Restful API - 1 - Creating Data Service

Step 51 - Connecting Angular Frontend with Restful API - 2 - HttpClientModule and HttpClient

Step 52 - Connecting Angular Frontend with Restful API - 3 - Understanding Observable

Step 53 - Connecting Angular Frontend with Restful API - 4 - Understanding Subscribe

Step 54 - Connecting Angular Frontend with Restful API - 5 - Handling Error Responses

Step 55 - Calling Welcome HTTP Service with Path Variables

Step 56 - Designing RESTful Services for Todo Resource

Step 57 - Creating REST API for retrieving Todo List

Step 58 - Connecting Angular Frontend with Todo List RESTful Service

Step 59 - Creating REST API to delete a Todo - DELETE Request Method

Step 60 - Adding Delete Todo Feature to Angular Frontend

Step 61 - Creating Todo Component and Handle Routing

Step 62 - Designing Todo Page with Bootstrap Framework

Step 63 - Creating Retrieve Tod0 Service and Connect Angular Frontend

Step 64 - Improve Todo Page Appearance

Step 65 - Creating REST API for Updating Todo - PUT Request Method

Step 66 - Creating REST API for Creating a Todo - POST Request Method

Step 67 - Implementing Update Todo Feature in Angular Frontend

Step 68 - Implementing New Todo Feature in Angular Frontend

Step 69 - Improving Todo Form - Validation and Form Submit on Enter - ngSubmit

Step 70 - Enhancing Validation Messages on Todo Page

Implementing Spring Security with Basic Authentication

Step 71 - Overview of Security with Basic Auth and JWT

Step 72 - Setting up Spring Security

Step 73 - Configure standard userid and password

Step 74 - Enhancing Angular Welcome Data Service to use Basic Auth

Step 75 - Configure Spring Security to disable CSRF and enable OPTION Requests

Step 76 - Creating Angular HttpInterceptor to add Basic Auth Header

Step 77 - Configure HttpInterceptor as Provider in App Module

Step 78 - Create Basic Authentication RESTful Service in Spring Boot

Step 79 - Create Angular Basic Authentication Service

Step 80 - Connect Login Page to Basic Authentication Service - Part 1

Step 81 - Connect Login Page to Basic Authentication Service - Part 2

Step 82 - Refactoring Angular Basic Authentication Service

Step 83 - Refactoring HttpInterceptor to use Basic Authentication Token

Step 84 - Best Practice - Use Constants for URLs and Tokens

Connecting Spring Security with JWT

Step 85 - Introduction to JWT

Step 86 - Importing JWT Framework into Eclipse

Step 87 - Quick Tip - Resolving JWT Compilation Errors

Step 88 - Executing JWT Resources - Get Token and Refresh Token

Step 89 - Understanding JWT Spring Security Framework Setup

Step 90 - Creating a New User with Encoded Password

Step 91 - Using JWT Token in Angular Frontend

Connecting REST API With JPA and Hibernate

Step 92 - Setting up Todo Entity and Populating Data

Step 93 - Connecting GET REST APIs to JPA Repository

Step 94 - Connecting POST, PUT and DELETE REST APIs to JPA Repository

Spring Boot in 10 Steps

Introduction to Spring Boot in 10 Steps

Step 01 - Introduction to Spring Boot - Goals and Important Features

Step 02 - Developing Spring Applications before Spring Boot

Step 03 - Using Spring Initializr to create a Spring Boot Application

Step 04 - Creating a Simple REST Controller

Step 05 - What is Spring Boot Auto Configuration?

Step 06 - Spring Boot vs Spring vs Spring MVC

Step 07 - Spring Boot Starter Projects - Starter Web and Starter JPA

Step 08 - Overview of different Spring Boot Starter Projects

Step 09 - Spring Boot Actuator

Step 10 - Spring Boot Developer Tools

First 10 Steps in JPA with H2 in-memory database

Introduction to JPA in 10 Steps

Step 01 - Object Relational Impedence Mismatch - Understanding the problem that JPA solves

Step 02 - World before JPA - JDBC, Spring JDBC and myBatis

Step 03 - Introduction to JPA

Step 04 - Creating a JPA Project using Spring Initializr

Step 05 - Defining a JPA Entity - User

Step 06 - Defining a Service to manage the Entity - UserService and EntityManager

Step 07 - Using a Command Line Runner to save the User to database.

Step 08 - Magic of Spring Boot and In Memory Database H2

Step 09 - Introduction to Spring Data JPA

Step 10 - More JPA Repository - findById and findAll

Code Snippets

Core JWT Components - Spring Boot 3

``` sh
package com.in28minutes.rest.webservices.restfulwebservices.jwt;
public record JwtTokenRequest(String username, String password) {}
package com.in28minutes.rest.webservices.restfulwebservices.jwt;
public record JwtTokenResponse(String token) {}
package com.in28minutes.rest.webservices.restfulwebservices.jwt;
import java.time.Instant;
import java.time.temporal.ChronoUnit;
import java.util.stream.Collectors;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.oauth2.jwt.JwtClaimsSet;
import org.springframework.security.oauth2.jwt.JwtEncoder;
import org.springframework.security.oauth2.jwt.JwtEncoderParameters;
import org.springframework.stereotype.Service;
@Service
public class JwtTokenService {
private final JwtEncoder jwtEncoder;
public JwtTokenService(JwtEncoder jwtEncoder) {
this.jwtEncoder = jwtEncoder;
}
public String generateToken(Authentication authentication) {
var scope = authentication
.getAuthorities()
.stream()
.map(GrantedAuthority::getAuthority)
.collect(Collectors.joining(" "));
var claims = JwtClaimsSet.builder()
.issuer("self")
.issuedAt(Instant.now())
.expiresAt(Instant.now().plus(90, ChronoUnit.MINUTES))
.subject(authentication.getName())
.claim("scope", scope)
.build();
return this.jwtEncoder
.encode(JwtEncoderParameters.from(claims))
.getTokenValue();
}
}
package com.in28minutes.rest.webservices.restfulwebservices.jwt;
import org.springframework.http.ResponseEntity;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class JwtAuthenticationController {
private final JwtTokenService tokenService;