Intro

Installing NodeJs

Installing Angular

Selecting a Code Editor

How Web Apps Work

Generating The Project

Project Structure & Set Up

Setting Up a NodeJs Server for Testing

VS Code Extensions

Importing Media Assets

Running The Project

Fetching Project From Server (Services & Endpoints)

Creating the Layout

Introduction Into PrimeNG

Making the Product component

Pagination

Adding Delete, Edit & Create products Endpoints

Adding the Delete, Edit & Create functions

Adding edit, create and delete buttons to the UI

Update the paginator when updating the products list

Modules

Header Menu

Recap

Favicons / Logos

Looking at the changed UI

Pipes

Form Groups

Outro

Code Deck

🚀 Angular 17+ Crash Course: Building a Storefront with Node.js Backend

In this comprehensive Crash Course, I will guide you through mastering Angular while building a practical storefront application. We'll focus on integrating a Node.js backend using Express and a mock database to emulate real world integration scenarios.

🛠️ Course Highlights:

Angular Foundations: Gain a solid understanding of Angular architecture, components, directives, and services.

Core Angular Features: Standalone components, Modules, Routing, Pipes & Services.

Node.js Backend with Express: Learn to set up a robust backend for handling RESTful APIs, authentication, and more using Node.js and Express.

Mock Database Integration: Understand the importance of data management by integrating a mock database into your application.

Building a Storefront: Step-by-step guidance on developing a fully functional storefront application, including product management, user authentication, and shopping cart functionality.

Responsive Design and UI/UX: Explore best practices for creating a responsive user interface using Angular Material and other UI libraries.

👨‍💻 Target Audience:

Beginners with some experience in web development.

Developers seeking to upgrade their Angular skills to version 17 and beyond.

Web developers interested in building scalable applications with Angular and Node.js.

Those looking to understand the intersection of frontend and backend development in a practical project.

🎓 Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript (and preferably TypeScript).

#AngularCrashCourse #NodeJS #WebDevelopment #Angular17 #Angular #crashcourse #angular2024

Repos: 

Client: https://github.com/thecodedeck/angular-cc-1-client
Server: https://github.com/thecodedeck/angular-cc-1-server

CHAPTERS
00:00 - Intro
00:36 - Installing NodeJs
04:55 - Installing Angular
09:06 - Selecting a Code Editor
09:35 - How Web Apps Work
20:57 - Generating The Project
24:14 - Project Structure & Set Up
53:00 - Setting Up a NodeJs Server for Testing
01:01:43 - VS Code Extensions
01:03:14 - Importing Media Assets
01:05:14 - Running The Project
01:06:30 - Fetching Project From Server (Services & Endpoints)
01:32:18 - Creating the Layout
01:46:57 - Introduction Into PrimeNG
01:49:40 - Making the Product component
02:13:48 - Pagination
02:21:11 - Adding Delete, Edit & Create products Endpoints
02:33:50 - Adding the Delete, Edit & Create functions
02:39:44 - Adding edit, create and delete  buttons to the UI
03:10:57 - Update the paginator when updating the products list
03:13:00 - Modules
03:29:35 - Header Menu
03:33:13 - Recap
03:35:20 - Favicons / Logos
03:38:00 - Looking at the changed UI
03:40:37 - Pipes
03:47:37 - Form Groups
04:03:26 - Outro

Angular Crash Course 2024 (for Beginners)

Angular Crash Course 2024 (for Beginners)

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path