Go Java Full Stack with Spring Boot and Angular

Bookmark the course GitHub repository and follow playlists to install Node.js, npm, and Visual Studio Code. Start Angular development with JavaScript, TypeScript, and Angular CLI.

Explore the high level full stack architecture with an Angular front end and a Spring Boot RESTful API back end to build a to-do management app with authentication and authorization.

Explore modern JavaScript and TypeScript, learning how TypeScript adds typing to JavaScript for safer, compile-time errors. See how ES6+ features like classes, modules, decorators, and interfaces enable modular Angular development.

Install Angular CLI with npm, verify Node.js and npm versions, resolve admin permissions, then run ng version to confirm and use the CLI to generate and run Angular apps.

Create and launch your first Angular app with Angular CLI; explore ng commands like ng new, ng generate, and ng serve, and learn about modules, components, and routing.

Import the angular project into Visual Studio Code by opening the folder or dragging it in, then use the Explorer view. Run ng serve and refer to Readme.md for setup.

Explore Angular CLI commands such as ng serve, ng lint, ng build, ng test, and ng e2e, and learn dist bundles deploy, and Jasmine, Karma, and Protractor drive tests.

Explore the Angular CLI project structure, including app, assets, environments, and key files like tsconfig.json, package.json, index.html, main.ts, and polyfills, for bootstrapping and building Angular apps.

Learn how Angular builds a page from components—menu, to-do list, and footer—each with HTML, CSS, and TypeScript, plus the @Component decorator and data binding.

Explore Angular component basics by embedding templates directly, switching between template and templateUrl, and observing component-scoped styles in the app component.

Create a welcome component with ng generate component, observe automatic updates with ng serve, and declare and include app-welcome in app.component.html.

Compare TypeScript, JavaScript, and Java syntax through a TypeScript class, modules, imports, exports, and decorators to illustrate cross-module usage and typing.

Learn to create a login component in angular with ng generate, add it to the app module, and build a simple username and password form.

Learn to implement click event binding on the login page with Angular, using data binding and interpolation to reflect username, and define a handle login method.

Harness two-way data binding with ngModel on the login page, wiring the login component to the template via FormsModule and observing live username updates as you type.

Master three data binding approaches in Angular: interpolation, event binding, and two-way binding with ngModel. See how ngModel binds component properties to the view and updates in real time.

In this step, implement hard-coded authentication in the Angular login logic, validate username and password, and display an 'invalid credentials' message using ngIf in the login component.

Implement routing in Angular by mapping login and welcome paths to their components, enabling router-outlet for display, and adding an error component for unknown routes.

Inject the Angular router into the login component and call navigate to route users from login to the welcome page, demonstrating dependency injection and router navigation.

Add a name route parameter to the welcome route and inject ActivatedRoute to display the username in the welcome component, passing the parameter from login.

Create the listTodos component with ng generate and map the /todos route to ListTodosComponent. Use interpolation and ngFor to render a table of todos with id and description.

Enable navigation from the welcome component to the todos page by implementing a routerLink directive, linking login, welcome, and todos pages.

Define a to-do class in TypeScript with a constructor for id, description, done, and targetDate, then update the to-dos list to use the class and Angular pipes for date formatting.

Discover how Angular modules group components and directives, differentiate them from JavaScript modules, and learn to import built-in modules like forms, browser, and app routing for Angular features.

Explore how Angular bootstrapping works by loading the root module and root component, wiring index.html and main.ts, and rendering the login component via the router.

Discover how Angular modules and components form the app, using templates, data binding, routing, directives like Ngfor and Ngif, and plan secure, Bootstrap-styled pages with REST APIs.

Extend the existing login, welcome, and my todos pages by adding a navigation menu and footer, styling with bootstrap, securing access, and refactoring into separate service components.

Integrate Bootstrap via UNPKG CDN into a global styles.css for the Angular app, then create menu and footer components and include them in app.component.html.

Learn to build a responsive bootstrap navigation bar by structuring a header nav with brand, home, to-dos, login, and logout links, applying navbar classes for a dark, right-aligned menu.

Learn to style an angular app's footer and page components using css and bootstrap 4, including positioning, container layouts, text styling, alerts, and button classes.

Replace href with routerLink for internal navigation to avoid full page refresh in a single-page Angular app; ensure home, todos, login refresh only the content.

Create an independent authentication service component, moving login logic from the login component into a hardcoded authentication service, and inject it to control access and the menu state.

Learn to use session storage to track login state by storing the authenticatedUser in the browser session and exposing an isUserLoggedIn check to enable or disable links.

Enable and disable menu links based on the user authentication token using a hard-coded authentication service, updating the menu component and template with conditional display.

Implement a logout component that removes the session storage token via the hardcoded authentication service and updates routing and menus to reflect logout. Plan to restrict todos to authenticated users.

Implement an Angular route guard to secure routes by verifying user login before activating components such as welcome, to-dos, and logout, using a canActivate service.

Implement the route guard by adding canActivate in the routing module. Use an array of guards that run sequentially and redirect to login when not authenticated, verified with console logs.

Review the hard-coded authentication service, its session storage, and login/logout flow; implement dependency injection and a route guard (CanActivate) to protect secured routes, then prep for Spring Boot back-end integration.

Set ambitious long-term goals to guide your learning, then establish short-term milestones like deploying a full-stack app to AWS, Azure, and Google Cloud to build cloud and DevOps expertise.

Understand what a web service is and how it enables interoperable, machine-to-machine communication over a network for application-to-application interaction beyond HTML outputs.

Explore how web services enable application-to-application data exchange through request and response. Learn how XML and JSON support platform-independent formats and how service definitions specify the request, response, and endpoints.

Explore key web service terminology, including request, response, message exchange format, and service definition, and learn how service providers, service consumers, endpoints, and transport options like http and mq interact.

Explore RESTful web services built on HTTP, where resources are exposed via URIs and acted on with standard HTTP methods like GET, POST, and PUT.

Initialize a RESTful services project with Spring Initializr, generate a Maven project using Spring Boot, add web, dev tools, and H2, then import in Eclipse and run the app.

Develop a simple hello world rest controller in Spring Boot, map a GET request to the URI /hello world, and return the text Hello world for browser display.

Create a hello world bean and return it via a get mapping, demonstrating bean-to-json conversion in Spring Boot with a JSON message field.

Explore how Spring Boot auto-configuration wires DispatcherServlet, JSON conversion via Jackson, and error handling, by tracing mappings, REST controllers, response bodies, and HTTP message converters.

Create and map a hello world bean using a path variable, demonstrating how /users/{id} passes name through @PathVariable and formats the response with String.format.

connect your angular frontend to spring boot rest services by adding a button, creating a welcome data service, and invoking the hello world bean via the httpclient module and observables.

Learn to connect an Angular frontend to a RESTful API with HttpClient and HttpClientModule, injecting HttpClient and performing a GET request to the Hello World Bean endpoint.

Learn how to connect an Angular frontend to a Spring Boot RESTful API using observables for asynchronous HTTP calls, handle cross-origin requests with @CrossOrigin, and manage retries by subscribing.

Explains subscribing to an asynchronous Angular service call, handling the response with handleSuccessfulResponse, logging to console, parsing response.message into a HelloWorldBean, and displaying a customized welcome message on the page.

Learn to handle server errors in Angular by using subscribe with an error callback to display a user-friendly message and implement a common error response using error.error.message.

Learn to call the welcome http service with a path variable in Angular, using a data service to pass the name and display the resulting message.

Design restful todo services for the backend to let the front end retrieve all todos for a user and create, update, or delete them using get, post, put, and delete.

Create a rest api to retrieve all todos for a user with an in-memory service via a rest controller and a get mapping /users/{username}/todos.

Connect the Angular frontend to a RESTful todo service by building a TodoDataService, fetching all todos with retrieveAllTodos, handling an observable with subscribe, and wiring to the backend.

Develop and expose a restful delete endpoint to remove a todo by id, wiring a delete mapping, a service deleteById flow, and ResponseEntity status no content or not found.

Learn to execute a delete request for a todo using a Restlet REST client, configure the origin, and verify deletion with a 204 response.

Add a deleteTodo action in the Angular frontend to remove todos via TodoDataService with username and id, handle a 204 response, and refresh the list with RefreshTodos.

Build the update flow for todos by adding a todo component, routing to /todos/:id with route guards, and navigating from the list to edit a specific item.

Design a bootstrap-based todo page with description and target date fields, styled inputs and a save button, enabling updating and preparing to retrieve existing todo details.

Create a retrieve todo service and connect the Angular frontend to fetch a single todo by id, using ActivatedRoute for route params and binding data with ngModel.

Fix todo page appearance by initializing a default todo to prevent null errors. Split ngModel into property and event bindings and format the target date with Y-Y-Y-Y, M-M, D-D.

Create a REST update endpoint for todos using a put request, integrating a save method that updates by deleting and re-adding, with post mapping for creation.

Demonstrate creating a todo via post, returning a created resource url and 201 status by building the location header from the current request path.

Put consumers first in RESTful service design by naming resources clearly with plurals and documenting APIs with Swagger. Use HTTP methods appropriately and return codes, avoiding sensitive data in URIs.

Implement the update todo feature in the Angular frontend by calling putTodo with username, id, and the todo body, then subscribe and navigate back to the todos list after save.

Implement a new add todo feature in the Angular frontend by adding a button, routing with a minus one id, and using create versus update logic to persist new todos.

Turn a todo form into a template-driven form using ngSubmit, enabling enter-to-submit and basic validations (required fields and min length) before saving.

Enhance todo page validation by styling invalid fields with ng-invalid, showing dynamic messages, using form dirty and template references to reveal targeted errors, and enabling submit on enter.

Secure the application by implementing basic authentication and JWT tokens to protect REST services and frontend access, highlighting the differences between basic security and JWT.

Enable spring security with the spring boot starter security, restart the app, and compare form-based authentication with basic authentication for REST calls.

Configure a stable user id and password, using in28minutes dummy credentials, by setting spring.security.username to user and spring.security.user.password to password for form and basic authentication.

Enhance the Angular welcome data service to send basic authentication headers and address cors preflight checks by base64-encoding the username and password.

Configure Spring Security to allow all options requests and disable CSRF in a Spring Boot 3 application, using a SecurityFilterChain with HTTP basic authentication in a stateless setup.

Configure an Angular HTTP interceptor to automatically attach a basic authentication header to all outgoing requests. Implement the HTTPInterceptor interface, clone requests, and set an authorization header before calling next.handle.

Configure the HttpInterceptor as a provider in the app module with useClass and multi: true, using HttpInterceptorBasicAuthService to enable basic authentication in the frontend.

Create a backend basic authentication service in Spring Boot that authenticates users via a restful service using Spring Security, returning 'you are authenticated' on success.

migrate from hardcoded authentication to a real Angular basic authentication service. duplicate and rename the service, wire HttpClient and HttpHeaders, and call the basicauthentication service from the login page.

Connect the login page to the basic authentication service using observable workflow: subscribe to executeAuthenticationService, handle success by routing to welcome and storing authenticated user in sessionStorage, and manage errors.

Connect the login page to the basic authentication service using handleBasicAuthLogin, test the backend login validation, and temporarily disable the HTTP interceptor to observe credential handling.

Refactor the Angular basic authentication service to centralize token handling via sessionStorage, add utility methods for authenticated user and token, ensure logout clears tokens, and remove hard coded auth code.

Refactor the http interceptor to use the basic authentication token instead of hard-coded credentials, wiring the welcome message and todos through the basic authentication service and authorization header.

Learn to replace hard coded URLs and tokens with a centralized constants file, enabling environment specific builds and preventing typos across the app.

Learn why reviewing regularly is the key to long-term retention, and how taking notes of key concepts and ideas and reviewing them periodically builds lasting understanding.

Learn how JWT, also called jot, encodes header, payload, and signature to convey claims, with expiration and refresh tokens for secure authenticated requests.

Disable basic authentication and implement jwt authentication for the rest api by adding oauth2 resource server dependencies and configuring /authenticate to issue a bearer token for protected endpoints.

Implement a JWT authentication flow in the Angular frontend by posting username and password to /authenticate, storing the bearer token, and attaching it to future requests.

Set up a database-backed ToDo entity with H2, JPA, and Spring Data JPA, auto-generating long IDs and prepopulating data via data.sql, then verify via the H2 console.

Connect get REST APIs to a JPA repository by creating a to-do JPA repository, exposing find by id and find by username, and wiring it to the Angular front end.

Learn to connect post, put, and delete REST APIs to the todo JPA repository, implementing create, update, and delete to-dos with proper responses and username handling.

Master Spring Security to secure REST APIs and microservices through six security principles, authentication and authorization, the filter chain, and JWT, form, and basic authentication, plus CSRF and OAuth.

Explore authentication and authorization fundamentals, matching identities to resources across systems, including mfa scenarios and access control for rest apis, web apps, and databases.

Learn six core security principles for full-stack development: trust nothing, assign least privileges, complete mediation, defense in depth, economy of mechanism, and openness of design, with day-one security practices.

Explore how Spring Security guards web apps, REST APIs, and microservices through a configurable filter chain that enforces authentication and authorization, with DispatcherServlet as the front controller.

Explore the Spring Security filter chain, covering authentication, authorization, CORS, CSRF, and the default login/logout pages and exception translation filter.

Create a Spring Boot project using Spring Initializr with Gradle and Java 17, include Spring Web and Spring Security, then run to see the default security configuration.

Explore Spring Security's default form-based authentication by creating a HelloWorldResource rest controller, observing automatic login prompts, session cookies, and protected resources, including the logout behavior.

Explore basic authentication in Spring Security for securing REST APIs, including authorization headers, Base 64 encoding, common flaws, and configuring static credentials in application.properties, with hands-on testing.

Explore cross-site request forgery and how Spring Security by default requires a per-request csrf token; see GET /todos work while POST /users/{username}/todos returns 401 until a synchronizer token is provided.

Explore how Spring Security handles cross-site request forgery by inspecting logout flows, retrieving CSRF tokens, and using them in POST requests for REST APIs.

Explains how to disable CSRF and implement a stateless REST API by configuring a custom security filter chain in Spring Boot, enabling HTTP basic authentication and disabling form login.

Configure cross-origin requests in Spring MVC using global addCorsMappings or local @CrossOrigin, enabling allowed origins like localhost:3000 or in28minutes.com for REST calls.

This lecture demonstrates storing user credentials in memory with an in-memory user details manager, configuring multiple users with roles, and moving toward a database using JDBC or JPA.

Learn to store and authenticate user credentials in an H2 in-memory database using JDBC with Spring Security, configuring a data source and initializing user schema with JDBC user details manager.

Differentiate encoding, hashing, and encryption, noting encoding is reversible and not for security, hashing is one-way for integrity and password storage, and encryption uses a key.

Learn how Spring Security stores passwords with adaptive one-way hashing using bcrypt, scrypt, or argon2 via PasswordEncoder, emphasizing bcrypt with a configurable work factor for security.

Learn the basics of JWT authentication, including header, payload, and signature, and understand symmetric versus asymmetric encryption while using a Bearer token in the authorization header.

Configure jwt security using spring oauth2 resource server, build RSA key and jwk source, set up jwt decoder bean, and migrate from basic auth to jwt security configuration.

Configure jwt authentication with Spring Security by generating an rsa key pair, creating an rsa key and a jwk source, and building a jwt decoder from the public key.

Set up a Nimbus JwtEncoder with a JWKSource to issue JWTs via a /authenticate endpoint using basic auth, then pass the JWT as a bearer token to REST APIs.

Learn to build and encode a jwt with Spring Security, wiring JwtEncoder via constructor, creating claims: issuer, issuedAt, expires, subject, and scope, and returning a JwtResponse token for bearer authentication.

Explore the Spring Security authentication flow from the authentication manager through multiple providers to the user details service, culminating in credentials and authorities stored in the security context holder.

Explores Spring security authorization with global and method security, switching from JWT to basic auth, and applying pre/post and JSR-250 annotations to enforce role-based access and post-authorization checks.

Implement OAuth with Spring Security in a Spring Boot project by configuring an OAuth2 client for Google login, and understand resource owner, resource server, and authorization server concepts.

Enable OAuth2 login with Google in Spring Boot by adding an OAuth2 security configuration, configuring Google client credentials, and testing login at /login to access user details via authentication.

Master Spring Security basics, including authentication, authorization, and the filter chain, with form, basic, and JWT methods. Learn CSRF, CORS, and password encoding techniques.