Ecommerce App with Angular from scratch

If you’re a beginner looking to build an ecommerce app using Angular, you’re in the right place! In this tutorial, we will guide you through the process of creating an ecommerce app from scratch using Angular.

What is Angular?

Angular is a popular JavaScript framework that is used to build large-scale, high-performance web applications. It is backed by Google and offers excellent tools and features for developing web applications. Angular follows the component-based architecture, allowing developers to build modular and reusable code.

Setting up the Project

To get started, make sure you have Node.js installed on your machine. Node.js comes bundled with npm, a package manager that we will use to install Angular CLI (Command Line Interface).

1. Open your command prompt or terminal
2. Run the following command to install Angular CLI globally:
   npm install -g @angular/cli
3. Once the installation is complete, create a new Angular project using the following command:
   ng new ecommerce-app
4. Navigate to the project folder:
   cd ecommerce-app
5. Finally, start the development server:
   ng serve

Creating Components

Now that we have our Angular project set up, let’s start creating the necessary components for our ecommerce app.

1. Open your project in a text editor
2. Create a new folder called “components” inside the “src” folder
3. Inside the “components” folder, create a new component called “product-list” using the following command:
   ng generate component product-list
4. Similarly, create another component called “product-details”:
   ng generate component product-details

Routing

Next, we need to set up routing for our Angular app. Open the “app-routing.module.ts” file located inside the “src” folder and add the following code:

“`typescript
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { ProductListComponent } from ‘./components/product-list/product-list.component’;
import { ProductDetailsComponent } from ‘./components/product-details/product-details.component’;

const routes: Routes = [
{ path: ”, redirectTo: ‘products’, pathMatch: ‘full’ },
{ path: ‘products’, component: ProductListComponent },
{ path: ‘products/:id’, component: ProductDetailsComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
“`

This code sets up the routes for our app. We have defined two routes: one for the product list page and another for the product details page. The `redirectTo` route will redirect the user to the product list page when they visit the root URL of our app.

Creating Services

Services are used to handle data and perform business logic in Angular. Let’s create a service to fetch product data from a server.

1. Inside the “src” folder, create a new folder called “services”
2. Inside the “services” folder, create a new file called “product.service.ts”
3. Add the following code to the “product.service.ts” file:

“`typescript
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;

@Injectable({
providedIn: ‘root’
})
export class ProductService {
private apiUrl = ‘https://api.example.com/products’;

constructor(private http: HttpClient) { }

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

getProductById(productId: string) {
return this.http.get(`${this.apiUrl}/${productId}`);
}
}
“`

This service uses Angular’s `HttpClient` to make HTTP requests to the server. Modify the `apiUrl` variable with the actual URL of your API that provides product data.

Rendering Data in Components

Now, let’s render the product data in our components.

1. Open the “product-list.component.html” file located inside the “src/app/components/product-list” folder
2. Replace the existing code with the following:

“`html

“`

This code uses Angular’s `ngFor` directive to loop over the `products` array and display each product’s name and price. The `goToProductDetails` function is invoked when the user clicks the “View Details” button.

Fetching Data from the Server

To fetch product data from the server, we need to make use of the `ProductService` we created earlier. Let’s modify the “product-list.component.ts” file located inside the “src/app/components/product-list” folder:

“`typescript
import { Component, OnInit } from ‘@angular/core’;
import { ProductService } from ‘../../services/product.service’;

@Component({
selector: ‘app-product-list’,
templateUrl: ‘./product-list.component.html’,
styleUrls: [‘./product-list.component.css’]
})
export class ProductListComponent implements OnInit {
products: any[];

constructor(private productService: ProductService) { }

ngOnInit(): void {
this.productService.getProducts().subscribe(
(data: any[]) => {
this.products = data;
},
(error) => {
console.error(error);
}
);
}

goToProductDetails(productId: string) {
// Logic to navigate to the product details page goes here
}
}
“`

This code calls the `getProducts` function of the `ProductService` and subscribes to the returned Observable. When the data is received from the server, it is assigned to the `products` array.

Conclusion

We have successfully created an ecommerce app with Angular from scratch. In this tutorial, we covered the basics of Angular, set up a new project, created components, set up routing, created services to fetch data from the server, and rendered the data in our components. This is just the beginning, and you can continue building more features and functionality for your app.

Happy coding!