Search Tutorials


Ecommerce Website - Online Book Store - Create Menu Module | JavaInUse
     
 

   
   

Ecommerce Website - Online Book Store - Create Menu Module

In this tutorial series we will be developing an ecommerce website for buying books. We will be making use of Spring Boot + Angular 8 + MySql. In a previous tutorial we had a walk through of the Ecommerce website that we will be developing. In this tutorial we will be creating  the angular 8 project and adding the menu component. 
Ecommerce Website - Online Book Store using Angular 8 + Spring Boot

Ecommerce Website - Online Book Store using Angular 8 + Spring Boot Introduction
Ecommerce Website - Online Book Store - Create Menu Module
Ecommerce Website - Online Book Store - Create User Admin Module - Part 1
Ecommerce Website - Online Book Store - Create User Admin Module - Part 2
Ecommerce Website - Online Book Store - Create User Admin Module - Part 3
Ecommerce Website - Online Book Store - Create Book Admin Module - Part 1
Ecommerce Website - Online Book Store - Create Book Admin Module - Part 2
Ecommerce Website - Online Book Store - Create Book Admin Module - Part 3
Ecommerce Website - Online Book Store - Create Book Admin Module - Part 4
Ecommerce Website - Online Book Store - Create Book Shopping Module

Video

This tutorial is explained in the below Youtube Video.

Angular 8 Setup

We will be installing npm and angular cli 8
  • Install node js by downloading the installable from Install NodeJS
  • install angular cli using the following command.It wll get us the latest version of angular cli. 
    	npm install -g @angular/cli


     
  • We can check the angular cli version - 
    	ng version


  • Next we will create a new angular project using the angular cli as follows- 
    	ng new book-store
   
       

       
    •    
  •     To get the angular cli project started use the following command. We must go inside the BookStore folder and then use it.     
        ng serve
   
     
Go to localhost:4200

 
I will be using the Miscrosoft Visual Studio Code IDE for angular. So import the project we developed earlier in Miscrosoft Visual Studio Code IDE.
Our final angular project will be as follows-

   

Installing Bootstrap, jquery, popper.js and font awesome

In the index.html file we will be specifying the required libraries - 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BookStore</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

 
</head>
<body>
  <app-root></app-root>
</body>
</html>
If we now go to localhost:4200 and check the page headers the required libraries will be present.




 

Create the Menu Component

 We will first be creating the menu component which will show the different operations that the user can perform.  So the different tabs will be displayed using the menu component.


   Create a new Component named menu as follows- 
ng generate component menu


Modify the menu.html to  create a navbar to show the different pages a user can navigate to.    
   <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div><a href="https://www.javainuse.com" class="navbar-brand">JavaInUse</a></div>

        <ul class="navbar-nav">
        </ul>
    </nav>
</header>
Finally in the app component html file add  the menu selector tag. 
<app-menu></app-menu>
  <router-outlet></router-outlet>
Go to localhost:4200

       

Download Source Code

Download it -
Angular 8 + Spring Boot Full Stack Book Store Menu Component

  
See Also

Spring Boot Hello World Application- Create simple controller and jsp view using Maven
Spring Boot Tutorial-Spring Data JPA
Spring Boot + Simple Security Configuration
Pagination using Spring Boot Simple Example
Spring Boot + ActiveMQ Hello world Example
Spring Boot + Swagger Example Hello World Example
Spring Boot + Swagger- Understanding the various Swagger Annotations
Spring Boot Main Menu
Spring Boot Interview Questions

Popular Posts





See Also