In this article we are going to build shopping cart frontend with Angular 10 for our application.
You can check our backend part built in Nodejs, which we already have published.
Note that you need to have the angular CLI installed on your local machine. To upgrade to Angular 10 you can follow up this tutorial.
To start up we need to setup our application directory. Create an angular-cart directory in your desktop and run this command to setup a new angular project:
cd desktop
mkdir angular-cart && cd angular-cart
ng new angular-cart
Running the ng new command will prompt some questions for the project scaffolding. Type y to add Angular routing to that project and select css as the default stylesheet.
Selecting this two things will create a new Angular 10 project. You can move into the project directory and then use the code . command to open up our project in VS Code.
To serve our application we can run ng serve which will open up our application on port 4200.
We will continue by setting up our user interface for the application. You can get all our UI components from WrapPixel’s UI Kit.
WrapPixel for Best Angular Resources
WrapPixel is an online template store where you could get great Angular Dashboard Template and Angular Material Themes.
We will create our components for listing of products and cart details. We will also define a navbar component for page navigation.
To create a component run this on your terminal:
ng g c components/cart
ng g c components/navbar
ng g c components/products
This will create a components directory and create a cart modules where we will define our markup and styles.
We need to configure Bootstrap into our application by adding the CDN into the src/dex.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularCart</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
#javascript #nodejs #beginner #web-development #angular
