B.Sainath et.

al, Distributor Management System

8(11): pp: 192-197,November-2021.

Imports: This is used to import other modules to use

in the existing module. That can be anything.
By Google, is an open-source web application
Providers: These are used to create service and they
framework that is designed to make both front end
can be associable to any part of the application.
development and testing easier for web developers. The main
goal of AngularJS is to elongate web applications that only Bootstrap: The root module has to set this property
require JavaScript, CSS, and HTML on the client-side with which is going to host all other modules.
MVC (Model view controller) capability. It is a client-side
JavaScript MVC/MVVM framework that is fully extensible, 2.2 Component
runs with no library dependencies, and also works great with The component is a class that contains the core of
other libraries. Even, you can also modify or replace its every business logic for the application.
feature to fit your specific needs.
2.3 Template
template is the HTML that we want to display. It is
a simple HTML page that will show the data to the user.

2.4 Metadata
In angular, we can define metadata by using a
decorator. For example, if we make any component in
angular but how will angular identity it as a component? We
Figure 1. Angular architecture need to tell it by using the annotation @Component.
There are basically eight main things involved in angular
architecture: 2.5 Data Binding
Module Data binding is the main block of angular
Component architecture. It allows us to have communication between a
Template component and a template which is very much necessary to
Metadata render our business logic to the user in the form of data.
Service
There are four types of data binding provided by angular 2.
Data Binding
Interpolation: It is used to display a component property to a
Directive
Dependency Injection template or view. For this, we use double curly braces. We
can display anything using this i.e. str
2.1 Module Property Binding: Property binding allows us to directly
It is basically a block or piece of code that is access the element property of HTML. We can directly
responsible to perform a single task, it is an independent task. assign our variable to an HTML element. number, array, etc.
Angular applications can have any number of the module in Event Binding: This binding uses the event to bind value.
it. We can also export these modules in the form of a class. We have various events available for instance click.
The angular application should have at least one module. A Two-Way Binding: This is basically a combination of
module class must be decorated with the following property binding and event binding. In which we can
annotations i.e. @NgModule it takes a metadata object. simultaneously call our method and bind value to the element
property.
It has many properties which describe below.
Declarations: It is used to declare the view class 2.6 Service
that belongs to the current module. There are three It is an injectable class which is used to share data
types of classes provided by my angular i.e. among various class or application. It is also responsible to
component, pipes, and directive. In this, we define make the server call and get data to display. Any class
our custom component. annotated with @Injectable and making server calls can be
considered as service.

© 2021, IJCERT All Rights Reserved 193

B.Sainath et.al, Distributor Management System
8(11): pp: 192-197,November-2021.

2.7 Directive things such as mobiles, books, apparel, jewelry, infant care,
They provide a special behavior to the DOM gifts, tools, etc. can be dispatched using online shopping
element. They are extended HTML attributes. system and of course you will get your requested ordered
Decorator Directive: There are many built-in directives like items at your doorstep.
ngModel, ngFor, ngIF, etc. many build-in directives provided
by angular. 3.4 Objectives
Component Directive: It is extended of @Directive decorates The objectives of the Project are
with template-oriented features. Promoting a service or product online
Template Directive: It is also known as Structural directive. Selling a service or product
It converts HTML into a reusable template Providing product support or customer service.

2.8 Metadata 3.5 System Architecture

In angular, we can define metadata by using a The system architecture of the proposed work
decorator. For example, if we make any component in represents number of components that are using as part of
angular but how will angular identity it as a component? We our project and the flow of request processing i.e. what
need to tell it by using the annotation @Component. components in procession the request and in which order. An
architecture description is a formal description and
representation of the system, organized in a way that
supports reasoning about the structure of the system.
3.1 Existing System
By understanding and searching the web sites
related to web-mart, we have seen there are many web-mart
such as Amazon, Flipkart etc. In the proposed system
customers need not go to the shops for purchasing the
products. He/she can order the product he/she wishes to buy
using this system. The shop owner can be the admin of the
system. The shop owner can appoint officials particularly to
handle this, who will help the owner in managing the
customers and product orders. The system also endorses a
home delivery system for delivering the purchased products.

Figure 2. System Architecture

3.2 Limitations of Existing System: -
Frauds in online shopping
The MVC pattern first took hold in the server-side
Delay in the delivery
end of web development, through toolkits like Ruby on Rails
We can't touch the product
and the ASP.NET MVC Framework. In recent years, the
We cannot bargain MVC pattern has been seen as a way to manage the growing
Returning the product. richness and complexity of client-side web development as
well, and it is in this environment that Angular has emerged.
3.3 Proposed System: The three main building blocks are the model, the controller,
This project aims to develop an online shopping for and the view. In the following figure 3., you can see the
customers with the goal so that it is very easy to shop your traditional exposition of the MVC pattern as it applies to
loved things from our web-mart sites available on the web. server-side development.
With the help of this you can carry out an online shopping
from your home. Here is no compelling reason to go to the
crowed stores or shopping centers during pandemic year.
You simply require a PC or a laptop or a mobile and one Figure 3. MVC pattern at Server Side development
important payment sending option to shop online. Upon You can see that the expectation is that the model is
successful login the customers can purchase a wide range of obtained from a database and that the goal of the application

© 2021, IJCERT All Rights Reserved 194

B.Sainath et.al, Distributor Management System
8(11): pp: 192-197,November-2021.

is to service HTTP requests from the browser. This is the Contain the logic for creating, managing, and
basis for round-trip web apps Of course, Angular exists in modifying the domain data (even if that means
the browser, which leads to a twist on the MVC theme, as executing remote logic via web services)
illustrated in the following figure 4.. Provide a clean API that exposes the model data and
operations on it.

Understanding Controllers/Components
Figure 4. HTTP requests from the browser Controllers, which are known as components in
Angular, are the connective tissue in an Angular web app,
The client-side implementation of the MVC pattern acting as conduits between the data model and views.
gets its data from server-side components, usually via a Components add business domain logic required to present
RESTful web service. The goal of the controller and the view some aspects of the model and perform operations on it. A
is to operate on the data in the model to perform DOM component that follows the MVC pattern should
manipulation so as to create and manage HTML elements Contain the logic required to set up the initial state
that the user can interact with. Those interactions are fed of the template
back to the controller, closing the loop to form an interactive Contain the logic/behaviors required by the template
application. to present data from the model
Angular uses slightly different terminology for its building Contain the logic/behaviors required to update the
blocks, which means that the MVC model implemented model based on user interaction
using Angular looks more like in the figure 5.
Understanding View Data

application. Components can create view data (also known as

view model data or view models) to simplify templates and
their interactions with the component.

Understanding Views/Templates
Figure 5. Basic mapping of Angular building blocks to the Views, which are known as templates in Angular, are
MVC pattern defined using HTML elements that are enhanced by data
The figure 5. shows the basic mapping of Angular bindings. It is the data bindings that make Angular so
building blocks to the MVC pattern. To support the MVC flexible, and they transform HTML elements into the
pattern, Angular provides a broad set of additional features, foundation for dynamic web applications. I explain the
which I describe throughout the website. different types of data bindings that Angular provides in
detail in Part 2. Templates should
Understanding Models Contain the logic and markup required to present
Models the M in MVC contain the data that users work data to the user.
with. There are two broad types of model: view models,
which represent just data passed from the component to the
template, and domain models, which contain the data in a
business domain, along with the operations, transformations, The goal is to provide a user friendly platform
and rules for creating, storing, and manipulating that data, where the customers can easily shop their loved things from
collectively referred to as the model logic. our web-mart sites available on the web. With the help of this
Many Angular models will effectively push the logic to the they can carry out an online shopping from their home. Upon
server-side and invoke it via a RESTful web service because successful login the customers can purchase a wide range of
there is little support for data persistence within the browser, things such as mobiles, books, apparel, jewelry, infant care,
and it is simply easier to get the data you require over Ajax. gifts, tools, etc. can be dispatched using online shopping
system and of course you will get your requested ordered
Contain the domain data
items at your doorstep.

© 2021, IJCERT All Rights Reserved 195

B.Sainath et.al, Distributor Management System
8(11): pp: 192-197,November-2021.

credit/debit card details for easy payment for future

reference.

Figure 6. New Product arrival page

Figure 6. Shows the updated product in the server, which
shows at client side as new product arrival page , where
Figure 9.Product page Testing
customers can select and purchase from the new product
This page shows the product filtering form the main menu
arrival page .
where user can search and filters as per the requirements

Figure 7. Profile page

name , last name , mobile no, Gender etc..

Figure 10. Shopping cart page

Figure 10 shows the shopping cart page for select the items
to purchase where user can select the product with quantity
depends on selected quantity , amount will be paid .

Technology has made significant progress over the

years to provide consumers a better online shopping
experience and will continue to do so for years to come. With
the rapid growth of products and brands, people have
speculated that online shopping will overtake in-store
shopping. However, the availability of online shopping has
Figure 8. Credit /Debit Card Saving page produced a more educated consumer that can shop around
Figure 8 shows the details if credit/Debit card saving page with relative ease without having to spend a large amount of
for to manage the account sections which stores the time. In exchange, online shopping has opened up doors to
many small retailers that would never be in business if they

© 2021, IJCERT All Rights Reserved 196

B.Sainath et.al, Distributor Management System
8(11): pp: 192-197,November-2021.

had to incur the high cost of owning a brick and mortar store.
At the end, it has been a win-win situation for both consumer
and sellers
Future Scope: Our designed online shopping system
provides a 24×7 service that is customers can surf the
website, place orders anytime they wish to. Also, the delivery
system works 24×7 hours a week. Some of the features that
can be modified and added to this system in the future
involve its implementation by local shopkeepers, where
shops will be providing an online interface to customers for
shopping and placing orders. Then some delivery persons
can perform their work. This will be adding on benefit for the
customers as it will save their time, plus it adds on for the
shopkeepers also, as people will continue to shop from local
shops rather than preferring to supermarkets every time.

Website References: - https://angularjs.org/

https://www.tutorialspoint.com/angularjs/index.htm
https://www.guru99.com/angularjs-tutorial.html
https://www.youtube.com/playlist?list=PL7BTNHMTJY6jA
H4-5X6vyD-qPqcMu2Q0u
https://www.w3schools.com/angular/

Textbooks References: -
written by Krishna Rungta

Dayley

© 2021, IJCERT All Rights Reserved 197