Angular and Deno: A Practical Guide

Connect to a local MySQL database using MySQL Workbench, create the not admin database, test the connection at localhost:3306 with root and root, and prepare tables in the Daynard schema.

Install Coton, create and run migrations to build a users table with id, first name, last name, unique email, and password, then manage migrations up, down, and status.

Create a controllers directory and urls folder, implement an oauth controller with a register function, wire it to post /api/register, and test with Postman.

Apply validation middleware to keep code cleaner by moving validations into a dedicated register validation module that uses a next parameter to proceed to the register function.

Generate a JWT with a package, set a payload with the user ID and expiration, and secure the secret via an environment variable; store the token in an httpOnly cookie.

Logout function clears cookies and deletes the JWT, returns a success message, and uses an OAuth middleware to verify authentication for protected routes.

Build a user service that separates business logic from the repository, filters sensitive data like passwords, and exposes create and find one methods for formatted data and database access.

Explore dependency injection using a service collection to register repositories, services, and controllers as transient, enabling automatic injection and eliminating manual initialization, with end-to-end testing.

Learn how to implement user creation, reading, updating, and deletion in an admin context with Angular and Deno, including authentication, validation, and auto-generated passwords.

Implement user data updates by adding update info and password routes, validate password confirmation, and return a 400 error when mismatched.

Create and migrate the roles table, defining admin, Ed, and viewer, and implement a role model, repository, service, and controller wired via dependency injection.

Introduce an abstract repository pattern in TypeScript by defining an abstract class and abstract methods, then extend it for specific models to reduce code and simplify repositories.

Implement a foreign key to link users to roles by adding a role_id column via migration, declare a belongs to relationship, and configure user creation with a default admin role.

Learn how to include related models in queries by adding include options to find methods and the user service, enabling belongs to relationships to load roles.

Refactor a find one operation to support dynamic where conditions with multiple key-value pairs using a where interface, simplifying queries across service, repository, and controller.

Establish a many-to-many relation between roles and permissions by creating a role_permissions bridge table with foreign keys, and implement models, repositories, and a controller to attach permissions to roles.

Implement find and count pagination for users using limit and offset, returning data with total counts and pages, while including roles and removing the password in the mapped results.

Create a products table with title, description, image, and price; develop the product model, repository, service, and controller to enable full CRUD in an Angular and Deno project.

Learn to upload images by creating an image controller, using the multi pather package for multipart form data, saving files to uploads, and serving them via an image endpoint.

Export csv: build a csv file from orders and their items, format header row with id, name, email, product title, quantity, and provide it as a downloadable attachment.

Build a daily sales chart by joining orders with order items and summing price times quantity by day, casting dates to year, month, and day.

Install angular and set up a new project, skip unnecessary installers, enable routing, run the server, and view the running angular app in the browser.

Replace the DHT email with a bootstrap email in an angular project, then build a dashboard and generate a navigation component using ng generate component with the up prefix.

Generate components with Angular schematics, organize them into public and secure models for unauthenticated and authenticated areas, and move menu and navigation into the secure module.

Learn how to send user data to a server using HttpClient, post to the register endpoint, configure the development API via environment variables, and redirect to login on success.

Build a login form with reactive forms, using a form group for email and password. Submit to the backend to obtain a JWT cookie and navigate to the main page.

Implement a logout function that posts to logout with an empty payload, subscribes to the logout service, and redirects unauthenticated users to the login page.

secure an Angular component by obtaining the authenticated user via a private OAuth service, redirect unauthenticated users to login, and pass the user as input to avoid duplicate calls.

Learn to implement an HTTP interceptor in Angular that automatically adds with credentials to every request by cloning the request and configuring HTTP interceptors in the providers.

Learn to share the current authenticated user across components in Angular with event emitters, subscribe in profile and navigation, and update the reactive form via patch.

Create a users component, add it to the menu and routing, and implement router link active to highlight the correct tab; finally redirect the empty path to the dashboard.

Explore building an Angular users list by creating a user service, fetching data from an endpoint via observable, looping through users, and preparing headers with name, email, role, and pagination.

Learn to delete a specific user by adding a delete button, confirming the action, calling the user service delete endpoint, and updating the front-end list to reflect the removal.

Add an add button, generate a users create component, and implement a simple form with first name, last name, email, and id using a form group and form builder.

Create a user in Angular using a dedicated service, fetch roles from the roles service, and populate the role select options. Navigate to the users page after a successful creation.

Implement an abstract base class to automatically provide five shared methods for all models via a rest service, enabling extension for user, road, and other endpoints.

Create and wire a new roles component in Angular, fetch roles via the role service, display names with actions, and implement delete with confirmation.

Create and manage a dynamic permissions form array in an Angular reactive form, using a form builder to add permission groups, toggle checks, and submit selected permissions to the server.

update a role in the angular and deno guide by editing a role with name and permissions in a form, then patch the update and navigate after saving.

Create a products component, define the product interface with id, title, image, price, and description; wire routing, display the products, enable delete, and implement pagination via a product service.

Create a reusable paginator component in angular, using input for last page and current page and an output pageChanged event to load products and navigate between pages.

Create products by building a form with title, description, image, and price using a form group and form builder, submit through the product service, and navigate to the products page.

Update products by creating and wiring a component, fetching the existing product via the product service, updating its form data, and navigating back to the product list after saving.

Create and integrate orders by building an order component and an order service, defining interfaces for order and order item, and enabling pagination and a view link for orders.

Show order items within the same table by clicking a view button, using a nested table and for loops to reveal product title, quantity, and price with a simple animation.

Export a csv from the orders data by implementing an export function in the order service that returns a blob via an observable, then download it.

Install and import the C3 library, then bind a bar chart to the dashboard and load time-series data of dates and sales via the order service.