Building a RESTful API Application using Spring and Angular

Discover the architecture of a two-part application with an Angular client and a Spring Boot API. Learn how the client calls endpoints, services fetch data, and repositories access the database.

Use spring Initializr to bootstrap a spring boot web app with dependencies like web, security, and JPA, plus dev tools, then import with Maven in Eclipse and run locally.

Visualize the domain model for a spring and angular RESTful API by modeling user, post, comment, role, and user role, with post-to-comment and user-to-roles relationships to support authentication and authorization.

Develop core domain models for a spring and angular REST API, including user, role, user rules, post with content and comments, and likes.

Map Java classes to relational tables using the Java Persistence API by annotating the User class, defining id generation, and configuring one-to-many relationships with cascade and fetch types.

Map domain models to relational database tables using annotations, configure cascade and fetch strategies, define one-to-many and many-to-one relationships with join columns, and prevent infinite loops with json ignore.

Configure the application by editing application properties to set the data source URL, user, and password, enable show sql, and set the MySQL 8 hibernate dialect for database schema creation.

Define the api service behaviors, validate headers and permissions, and route requests to the api service implementation that uses the repository to manipulate data.

Create the account service interface for a Spring and Angular RESTful API, outlining user management methods—save, find by name or email, list users, update, delete, and reset password.

Create a post service to handle requests via hash map, capturing user, post fields, and image name. Retrieve posts by id or user and delete posts, saving images on server.

Examine how the service delegates saving a user to its implementation, use GP repositories for database operations, and prepare required dependencies and utilities for future service implementation.

Create a user repository interface that extends the repository and defines methods for finding by username, finding by username containing, and listing users, enabling database interactions.

Create a post repository extending JPA repository and customize queries with @Query to sort posts by date descending, and enable find by user name, id, and delete by id.

Develop utility classes and add key dependencies like spring context, javax mail, Apache commons language, and timely for email templating, enabling password generation and user email notifications.

Create a constants utility for managing server-side image storage, defining folders for user and post pictures under static resources, with a temp and default profile image.

Create a mail utility class in the utility folder to send welcome emails using Spring mail properties, a Thymeleaf template, and MimeMessage with a context containing the user and password.

Implement the account service by wiring data models, app user and role repositories, and security components, generate a random password, encrypt it, and email users during creation, updates, and resets.

Implements the post service with repository integration, creates posts with caption, location, user, and date, retrieves posts, deletes posts and associated images, and saves uploaded post images via multipart requests.

Implement the comment service and its implementation by wiring the repository, enabling save operations, and applying service and transactional annotations; prepare rest resource and testing.

Review the application design and plan for creating restful api endpoints using a resource layer, wire data sources and servers, and test endpoints with a client app.

Refactor the account resource in a Spring and Angular RESTful API by moving business logic to the service layer and implementing user list, find, register, update, and photo upload.

Build a secure account resource with a change password flow and a reset password endpoint. Validate current, new, and confirm passwords, encode passwords, and update via the account service.

Develop a RESTful post resource in Spring that lists, retrieves, saves with a validated user and random image name, and deletes by id with response entities.

Extend the post resource with endpoints to fetch posts by username, like and unlike posts, add comments, and upload post photos, with user and post validation and transactional saves.

Test a Spring-based API using Postman and browser requests, exploring get and post endpoints and authentication. Explore manual testing, security considerations, and how cookies and Spring Security affect endpoint access.

Learn how to secure a restful api with JSON Web Tokens (JWT), requiring login with username and password, issuing a token in the header, and validating it for every request.

Set up spring security by implementing a custom user details service, wiring the account service, and configuring public endpoints and JWT-based stateless authentication.

Implement a JWT authentication flow in spring security by parsing login JSON, authenticating with the authentication manager, and returning a signed token with user rules in a bearer authorization header.

Implement a jwt authorization filter in a spring and angular api, handling cors headers, extracting bearer tokens, decoding jwt to derive user details and authorities, and setting the security context.

Test the restful api security by registering users, obtaining an authorization token, and accessing protected endpoints, ensuring access is denied without a token and allowed with proper authorization.

Generate an Angular client application to consume the api, build services that talk to endpoints, and prepare to explore Angular architecture and api requests in the next lecture.

Create an Angular app with the Angular CLI, configure routing for three routes, and style with CSS. Then run ng serve to launch a local app that consumes the API.

Create a front-end service to access the back-end api, generating an account service and a server constants class with host and client paths for the dev environment.

Define account service models and server constant; implement login, register, password reset, user updates, and profile photo upload using Angular http client, observables, and token handling in local storage.

Build the post service in Angular, implementing create, get by id, get by user name, add comment, delete, like and unlike, plus photo upload with progress.

Create an alert service in Angular that broadcasts in-app messages using an alert model and an alert type enum (success, danger) via a subject to all components.

Implement a cache service to reduce unnecessary api requests and improve application performance. Use interceptors to serve cached responses by url and invalidate or clear cache as needed.

The cache interceptor checks for cached API responses and serves them when available, while invalidating on non-get requests and excluding login, register, reset password, and user search.

Create an Angular authentication interceptor that intercepts requests, attaches the authorization header with a token from the account service, and clones the request before sending.

Build an authentication guard implementing canActivate to protect routes by checking login status with the account service and redirecting to login via the router when needed.

Implement a post resolver that fetches the full post data before navigating to the post detail route, ensuring the post id, captions, images, and comments load without a blank screen.

Develop a loading service in Angular to enhance user experience during background processes with a visual loading spinner, wired to the app component through observables.

Learn about the Angular app component structure, including a wrapper navigation bar that adapts to login status, and main pages like login, home, profile, and post details.

Generate the necessary user interface components for the app, including blogging, sign-in, reset password, form, profile, navbar, and post detail pages, enabling likes and comments.

Define and configure routes for a Spring and Angular RESTful API app, mapping login, signup, reset password, home, post, and profile to components while applying guards and authentication logic.

Register all created services, guards, and interceptors in the app module providers, declare routes at the root with the router module, and register the loading module for the app.

Test the created routes by running the app and verifying navigation through login, signup, and home pages via the router outlet, with modules, services, interceptors, and guards loaded.

Build a navigation bar component in Angular for a RESTful app. Wire services and subscriptions to enable user search, profile navigation, and image posting with Google Maps API location lookups.

Develop a login component in Angular by injecting services, subscribing to login observables, and processing the full HTTP response to extract the authorization token and redirect after login.

Implement sign up with account service registration, show a spinner, handle existing user or email errors, and redirect logged-in users to home; unsubscribe on destroy to avoid memory leaks.

Explains building a reset password component in Angular, wiring the account service to call set password, showing a loading spinner, handling email responses, and unsubscribing on destroy.

Create and wire the home component to fetch user and post data, support profile and post detail navigation, manage subscriptions, and render posts with Bootstrap in a dynamic Angular UI.

Implement a post detail component in Angular, loading post data via resolve, showing the post and comments, enabling like/unlike, adding comments, and deleting the post with redirect to homepage.

Develop a profile component in a Spring and Angular RESTful app by wiring services, loading user data and posts, enabling profile picture updates, and handling password changes.

Clean up the app by configuring the Google Maps API key, handling image uploads via named multipart files, and applying bootstrap styles from bootswatch before running.

Test the full stack by running the front end and back end, logging in, posting, liking, commenting, and refreshing profiles while validating cache behavior and api interactions.

Deploy a front-end by creating an S3 bucket, enabling static web hosting, and uploading the distribution files. Ensure public access so the site is online while the back-end runs locally.

Define a clear goal, choose a language to master, practice relentlessly, use version control, read others' code, and build end-to-end projects to become a developer.