Angular Crash Course 2024 (for Beginners)

Introduction

This tutorial is designed to guide you through building a storefront application using Angular 17+ integrated with a Node.js backend. You will learn about Angular's architecture, core features, and how to manage data effectively with a mock database. By the end of this course, you will have hands-on experience with both frontend and backend development, making it a practical project for beginners and intermediate developers alike.

Step 1: Install Node.js

To start, you need to install Node.js, which is essential for running Angular and the backend server.

1. Go to the Node.js official website.
2. Download the LTS version suitable for your operating system.
3. Follow the installation prompts to complete the setup.

Step 2: Install Angular CLI

After Node.js is installed, you need to install the Angular CLI (Command Line Interface) to help scaffold your Angular applications.

1. Open your terminal or command prompt.
2. Run the following command:

   npm install -g @angular/cli
   

Step 3: Choose a Code Editor

Selecting the right code editor is crucial for your development workflow. Visual Studio Code is highly recommended.

1. Download Visual Studio Code from the official website.
2. Install it and explore useful extensions such as:
   • Angular Language Service
   • Prettier
   • ESLint

Step 4: Understand How Web Apps Work

Familiarize yourself with the basic architecture of web applications, including the client-server model. This foundational knowledge will help you grasp the concepts you’ll encounter throughout the course.

Step 5: Generate the Angular Project

Create a new Angular project using the Angular CLI.

1. In your terminal, navigate to your desired directory.
2. Run the following command to generate a new project:

   ng new storefront
   

3. Navigate into the project folder:

   cd storefront
   

Step 6: Set Up Project Structure

Take some time to understand the project structure that Angular creates. Key directories include:

• src: Contains your application's source code.
• app: Where your application’s components, services, and modules are stored.

Step 7: Set Up a Node.js Server

You will need a backend server for handling RESTful APIs and data management.

1. Clone the server repository:

   git clone https://github.com/thecodedeck/angular-cc-1-server.git
   

2. Navigate to the server directory and install dependencies:

   cd angular-cc-1-server
   npm install
   

3. Start the server:

   npm start
   

Step 8: Import Media Assets

To make your application visually appealing, import media assets like images and icons into your Angular project.

1. Create an assets folder within the src directory.
2. Place your media files in this folder and reference them in your components.

Step 9: Run the Angular Project

Now that everything is set up, you can run your Angular application.

1. In your project directory, execute:

   ng serve
   

2. Open a web browser and navigate to http://localhost:4200 to view your application.

Step 10: Fetch Data from the Server

To connect your Angular app with the Node.js backend, set up services to fetch data.

1. Generate a service using Angular CLI:

   ng generate service product
   

2. Use the HttpClient module to make API calls to your Node.js server.

Example code for fetching products:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = 'http://localhost:3000/products';

  constructor(private http: HttpClient) { }

  getProducts() {
    return this.http.get(this.apiUrl);
  }
}

Step 11: Create the Product Component

Create a component for displaying products.

1. Generate a component for products:

   ng generate component product
   

2. Implement the template to display data from the service.

Step 12: Implement Pagination

To improve user experience, add pagination to the product list.

1. Use Angular Material or a similar library to implement pagination.
2. Ensure that the pagination updates correctly when the product list changes.

Step 13: Set Up CRUD Functionality

To manage products, implement Create, Read, Update, and Delete (CRUD) operations.

1. Create API endpoints in your Node.js server for handling these operations.
2. In your Angular service, create methods to call these endpoints.

Example for creating a product:

addProduct(product: Product) {
  return this.http.post(this.apiUrl, product);
}

Conclusion

This tutorial has provided a step-by-step guide to getting started with Angular and Node.js by building a practical storefront application. Key takeaways include setting up your environment, creating a project structure, and implementing core functionalities like data fetching, CRUD operations, and pagination. As a next step, consider diving deeper into Angular features like routing and forms, or explore deploying your application to a cloud service. Happy coding!