Angular and NodeJS: A Practical Guide with Typescript

Set up a node.js project by installing node.js, creating a directory, initializing package.json, and building an index.js logging hello; run npm start to see output. Proceed to install TypeScript next.

Convert a JavaScript project to TypeScript by installing TypeScript as a dev dependency and globally, create tsconfig, rename index.js to index.ts, and run with nodemon.

Learn to set up express with TypeScript, install types, create an app, enable json handling, add a simple get route returning hello world, and run on port 8000.

Build and test express routes in TypeScript, wiring a router and a register controller, and validate requests against the api register endpoint using Postman.

Install express validation, build a register validation for names, email, and password confirm, and apply it in the controller to return 400 on errors.

Set up a MySchool database and user table, configure a TypeORM connection with entities, and enable automatic schema synchronization for the app.

Learn to create a user entity in TypeScript, decorate it as a database table with id, name, email, and password, enforce unique email, and implement register workflow that hashes passwords.

Implement login by verifying a user's email and hashed password, returning a uniform invalid credentials message and issuing a JWT upon successful authentication.

Generate and secure a jwt using the jsonwebtoken package, sign a payload with the user id and secret, and store it in an http-only cookie for backend-only access.

retrieve the authenticated user from a JWT cookie by verifying the payload with a secret and returning the user data without the password.

Learn to implement logout by posting to a logout route, removing the JWT cookie by overwriting it with an empty value and zero expiry, and returning a success message.

Store secret keys in an environment file and load them at startup with a package, enabling different development and production values via process.env.secretKey.

Implement a middleware to verify JWTs and authenticate users before protected routes, attach the user to the request via request.user, and streamline the logout flow in TypeScript.

update user information via a put request to api/users/info, update password with api/users/password, validate authentication and password confirmation, perform repository updates, and return updated data without the password.

this lecture demonstrates building a users controller for admins versus authenticated users, implementing crud endpoints (get all, create, get by id, update, delete) with password hashing and sanitized responses.

Create a role entity and connect it to users via a one-to-many relationship, using a foreign key and nested objects to manage assignments and fetch role data.

Create a permission entity with an id, number, and name, and connect it to roles via a many-to-many relation using a join table called URL permissions.

Seed permissions and roles in the database by creating one-time seed scripts, populating admin, editor, and viewer roles with view and edit permissions.

Create permission and role controllers to enable CRUD for roles and permissions. Fetch permissions, fetch a role with its permissions, and update roles by adjusting permissions through a many-to-many relationship.

Create and manage a product entity with crud in angular and nodejs using typescript, including repository access, a product controller, and api endpoints for get, create, update, and delete.

Implement pagination in a TypeScript Angular and NodeJS app using find and count with take and skip, compute total and last page, and seed fake product data with faker.

Implement image uploading using multer: create an image controller, configure disk storage to uploads, generate random file names, authenticate the route, and return the uploaded file URL and name.

Configure a static route with express.static to expose the uploads folder as a static directory. Each request to this path serves the uploaded image directly.

Create the order entity and order items to model a one-to-many relationship, including id, first name, last name, email, and create date, then seed with items.

Create an order controller in TypeScript, implement a name getter that concatenates first and last names, and compute a total for order items using reduce, with paginated API /orders responses.

Create a post /export endpoint that fetches all orders and order items, converts them to csv with a csv parsing library, and returns a downloadable csv file via text/csv headers.

Learn to extract and visualize sales data with sql by joining orders with order items, aggregating totals by date, and exposing a chart api for the frontend.

Develop a permission middleware for role-based access control in an Angular and NodeJS app with Typescript, wiring authentication, roles, and permissions to guard routes like view and edit products.

Install angular with the official installer, create a new angular project named angular admin, and run ng serve to view the app in your browser, then make further changes.

Build a Bootstrap-based dashboard email template inside an Angular project by adapting HTML and copying Bootstrap HTML body. Generate navigation and menu components with the up prefix to render dashboard.

Organize the app with Angular schematics by creating and moving components into the public and secure models, updating modules and the main up model. Next, learn routing.

Configure routes in an angular app by creating public and secure components, using router outlets, and defining child routes for login and register under a parent public component.

Learn to build an Angular register form with a bootstrap template and submit via regular and reactive forms for first name, last name, email, password, and password confirm.

Send user data to the server using an http client post request, configure api urls via environment variables, log the response, and navigate to login after registration.

Implement a login form with reactive forms, featuring email and password fields. Post credentials to the backend, handle the JWT, and enable cookies with withCredentials to navigate to the dashboard.

Create and use Angular services to manage authenticated HTTP requests with login and register methods. Leverage the injectable decorator provided in root to centralize authentication endpoints for cleaner, reusable code.

Retrieve the authenticated user via cookie and credentials, display the first name and last name in the navigation, and enable redirects to profile or logging.

Define a user interface and a role interface in TypeScript, specifying id, first name, last name, email, and URL. Import the role interface and ensure observables return a user.

Implement a logout feature by posting to logout with an empty object, handling an observable void, and ensuring credentials are sent, with a guard redirecting to login when unauthenticated.

Obtain the authenticated user from the health service and redirect unauthenticated users to login. Pass the user as an input to the nav component to avoid duplicate calls.

Angular interceptors automatically attach credentials to every request by cloning the request with credentials enabled, and are provided via HTTP_INTERCEPTORS with multi: true to ensure authenticated data flows across services.

Build a profile page in a secure Angular app using a form builder and reactive forms to update user info and password, via a health service and live data updates.

Learn to share the authenticated user across secure, nav, and profile components with an event emitter, subscribe to updates, and patch a reactive form to reflect changes.

Redirect and highlight navigation between dashboard and users by creating a users component, wiring router links, applying routerLinkActive, and configuring an empty path redirect to the dashboard.

Explore fetching and displaying users in an Angular app using a user service, endpoint configuration, and observable streams with subscribe for a paginated user list.

Implement pagination for a user list with next and previous buttons, page state, and last page checks. Update the endpoint with a page query to fetch the corresponding users.

Click the delete button to remove a user, confirm the action, call the user service delete endpoint with the user id, and filter the list to exclude the deleted user.

Create a new users create form component, add an add button, route to the page, and build a reactive form with first name, last name, email, and role.

Create users by building a user creation flow in the Angular app: fetch roles, bind them to a select, post new user data, and navigate to the users page.

Create and wire a user edit component, pre-fill the form with the selected user data, and update the user through the service before returning to the users list.

Define an abstract base rest service with five methods and a protected endpoint, then extend it for specific services like user and risk services, supporting optional page handling.

Create a new roles component, wire it to the menu, fetch and display roles via a service, loop through roles, and implement delete with confirmation.

Build a roles create form by generating the role create component, wiring permissions from a permission service, and exposing the URLs create route in the Angular and NodeJS app.

Create a reactive form with a permissions form array and form groups, defaulting to false, then submit to filter true permissions and send ids via the roll service, then navigate.

Update roles by editing an existing role, loading its data via the role service and route id, and adjusting permissions through a form.

Create and manage products in an Angular and NodeJS app by building a product component, defining a product interface, and implementing image, price, get all, delete, and pagination.

Create a reusable paginated component in Angular to replace duplicated code, wiring an input for the last page and an output event pageChanged to load products on page changes.

Create a product form in Angular using a form group and form builder for title, description, image, and price, then submit via the product service and navigate to products.

Build an upload component in Angular that handles input type file, posts image data as form data to the server, and displays the uploaded image URL with a reactive form.

Update a product by editing its details with a generated component engine, fetch the product, modify the price to 24, and submit updates via the product service to save changes.

Create an orders component, add a navigation item, and implement a paginated orders view using an order service and interfaces for order and order item.

Learn to implement nested tables in Angular by displaying order items in-line with a view button, using dynamic selection, containers, and simple animations to toggle visibility.

Apply angular animations to reveal and hide elements with state-driven transitions, using triggers, show and hide states, and style changes like max height to create smooth UI motion.

Learn how to export a CSV from the orders service using a blob response, create a download link, set the file name, and trigger the download in Angular and TypeScript.

Install the C3 charting library via npm, import it, and bind a time-series X and sales data set to a bar chart in the dashboard component.