Journal of Informatics

Electrical and Electronics Engineering, 2020,

Vol. 01, Iss. 02, S. No. 005, pp. 1-7
ISSN (Online): 2582-7006

Web Development Using Angular: A Case

Study
Amarpreet Kaur Sahani1, Pawan Singh2, VijiPriya Jeyamani3
1,2Department of Computer Science and Engineering, Amity University Uttar Pradesh, Lucknow Campus, India
3College
of Computer Science and Engineering, University of Hail, Hail, Kingdom of Saudi Arabia
[email protected], [email protected]

How to cite this paper: A. K. Sahani and P. Abstract

Singh (2020) Web Development Using
Angular: A Case Study. Journal of Informatics Web development is same as building a house. Just like we require a plan, a building
Electrical and Electronics Engineering, Vol.
01, Iss. 02, S. No. 5, pp. 1-7, 2020.
permit and license from city, web development also requires documentation,
appropriate server, designing and a programming language. Since the standards of
http://doi.org/10.54060/JIEEE/001.02.005 web de- signing are always increasing and so does the complexity of the technology
required, frameworks have now become a crucial part of developing websites or web
Received: 28/10/2020
Accepted: 13/11/2020
applications. It is absolutely unreasonable to reinvent the wheel, thus for designing
Published: 25/11/2020 rich and attractive websites, it is very much sensible to use frameworks endorsed by
developers all over the world. Django, Angular, Spring, React, Vue, Express are some of
Copyright © 2020 The Author(s). the well-known web development frameworks. In my project I have used Angular.
This work is licensed under the Creative
Commons Attribution International License
(CC BY 4.0). Keywords
http://creativecommons.org/licenses/by/4.0
/ Angular, components, typescript, Styling, mongo DB
Open Access

1. Introduction
Angular can be understood as an open source framework used for front end web development. It is a Typescript based
framework. Front end web development means Angular can be used to develop front end of the websites. Saying that
Angular is Typescript based, tells that Typescript is the primary language used in Angular. Typescript is a superset of
JavaScript which means that any valid JavaScript code is also valid Typescript code. Since the browsers used currently do
not recognize the Typescript, therefore at the time of compilation, typescript is transpiled or converted to plain old
JavaScript. Typescript is used since it offers many more features as compared to regular JavaScript. It not only supports
class based object oriented programming features but also static typing. This means that unlike regular JavaScript,
Typescript permits the developers to use the features of object-oriented programming in Angular projects. The errors and
bugs can be detected and corrected during the development time. Angular is also known to be an opinionated framework,
which signifies that it imposes a specific criterion for project development. The developers who work with Angular are
required to follow a specific style for organizing their projects. The first version of Angular called AngularJS or Angular 1.X.
Journal of Informatics Electrical and Electronics
ISSN (Online) : 2582-7006 1 Engineering (JIEEE)
A2Z Journals
A. K. Sahani et al.

came into existence as a JavaScript based front end development framework, in order to overcome the challenges in the
development of single page web application.

2. Technology Used
There are various technologies used as mentioned below: Angular 9, Firebase, Bootstrap, firebase firestore, firebase auth
Firebase.
2.1. Firebase
Firebase can be defined as a backend platform for developing not only web applications but also ios and android
applications. It provides a real time database experience, offers different application program interfaces or APIs, supports
multiple types of hosting and authentication platforms. All firebase users receive live updates after every alteration just
like a real time database [7]. For the authentication purpose, users can apply anonymous passwords or other social
authentications can also be used. The hosting involves the deployment of the applications over a secure connection to the
Firebase servers. The limitation of Firebase is that it can support 50 connections and 100MB storage.
2.2. Firestore
Firestore is a more flexible and scalable no SQL database. It can be used for storing and syncing the data for client as well
as server side development. Just like the Firebase, Firestore provides a real time database experience by syncing the data
through the real time listeners to the client app. Not only this, it also has a provision for offline support for both web and
mobile in order to enable the developers to build responsive applications irrespective of the network availability.

3. Software Required
3.1. NodeJS
NodeJS is a JavaScript based run-time environment which is needed by the Angular Command line interface or CLI to
execute. Just time java virtual machine is needed for java applications to work, nodeJS is required for the Angular
command line to run. It is a server-side platform which is built on JavaScript Engine (version 8) of Google chrome. It is a
cross platform open source runtime environment which is used for building networking and server side applications. It can
be executed within Node.js runtime on various operating systems like Microsoft Windows, Macintosh, Linux etc.
3.2. Visual Studio
Visual Studio Code is a light weight and a well-built integrated development environment. It runs on the desktop and
works with Windows, Linux and macOS. Visual Studio Code supports JavaScript, Typescript as well as Node.js. This source
code editor is enriched with not only an ecosystem of many extensions for various languages like PHP, C++, Go, Java,
Python and C# but also many runtimes such as Unity and .NET. VS code assists the developers with its instant syntax
highlighting, auto indentation, bracket matching, box selection, snippets and much more.
3.3. Angular CLI
Angular command line interface makes the beginning of an Angular project quite easy. Angular CLI consists of commands
that help the developers to develop and begin on their project in no time. The installation should be done globally else it
will get downloaded in the current directory. Usage of Angular CLI for developing Angular applications is recommended
since it saves the time as installation and configuration of all needed dependencies and wiring everything up is not
required in case of CLI.

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 2 Engineering (JIEEE)
A2Z Journals
 A. K. Sahani et al.

4. Libraries Used
4.1. Font Awesome
Font Awesome icons can be placed just anywhere by simply using a style prefix and the name of the icon. The icons of
Font Awesome are made in such a way that they adopt the properties and naturally appear alongside the text. These icons
are made to be used with the inline HTML elements like, or. The libraries present in font awesome come with
approximately 519 free vector icons which are scalable too. These icons are easily customized and can be used for
commercial as well as personal purposes.
4.2. Bootstrap
Bootstrap is a well built, instinctive and a strongly powered front end framework. It makes web development easier by
simply using HTML, CSS and JavaScript. The responsive CSS of Bootstrap fits to all screen sizes from desktops to mobile.
Bootstrap has some properties of global CSS, basic HTML elements upgraded with the use of extensible classes and an
improved grid sys- tem. It consists of many components which are reusable in order to provide drop-downs, alters, pop
overs, icons and much more. Bootstrap comes with various customized jQuery plugins which can easily be included and
used.
4.3. jQuery
jQuery is a cross platform, enriched with features, small but fast JavaScript based library. It was built for the simplification
of HTML client-side scripting. jQuery makes animation, event handling, document traversal very easy and simple to use on
various types of web browsers. 10 The most vital functionality of jQuery is to make the usage of JavaScript easy, so that
the web- sites are made more attractive as well as interactive without much difficulty. It works on the principle of “Write
less, do more” because a lot of common tasks which consume many JavaScript code lines are taken up by the jQuery
which binds those lines of code into functions which can be invoked whenever needed by just a single line of code.
4.4. Pixabay
Pixabay is an international, free to use website used for sharing pictures, vector images, illustrations, video clips as well as
audio clips. Currently Pixabay offers approximately 1188454 photos, vector graphic images, videos and audio clips free of
cost. All the image and video files available on the website can be utilized for both personal and commercial purposes
with- out any attribution requirement [5].

5. About the project

Angular can be understood as an open source framework used for front end web development. It is a Typescript based
framework. Front end web development means Angular can be used to develop front end of the websites. Saying that
Angular is Typescript based, tells that Typescript is the primary language used in Angular. Typescript is a superset of
JavaScript which means that any valid JavaScript code is also valid Typescript code. Since the browsers used currently do
not recognize the Typescript, therefore at the time of compilation, typescript is transpiled or converted to plain old
JavaScript. Typescript is used since it offers many more features as compared to regular JavaScript. It not only supports
class-based object-oriented programming features but also static typing.
Most portion of the development using Angular involves the usage of components. Components can be understood as
the classes which interact with the HTML files which finally get displayed on the web browser. The structure of file consists
of application component which has the following files. There are 9 components which together constitute this project.

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 3 Engineering (JIEEE)
A2Z Journals
A. K. Sahani et al.

• app-root.component
• home.component
• login.component
• myblogs.component
• menu.component
• post.component
• profile.component
• comments.component
These files get created automatically when the project is made using the Angular command line interface. The whole
Angular application is developed using various components. The main idea behind Angular using the components to build
an application is to reduce the complicated application to a number of parts which can be reused when required.
5.1. menu.component
Menu component is responsible for generating the navigation bar of this website. It uses standard bootstrap navigation
with some custom CSS styling to achieve so. menu component once loaded, stays there throughout the life cycle of this
website. Property Binding While developing Angular applications, developers come across a couple of methods for
displaying data on the view. First is property binding and the other is interpolation.
They are used to transfer data from component to template. Property binding can be defined as a one-way technique
that allows to set the attribute of the view element. Property binding involves updating the property value present in
component and then bind it with an element present in the view tem- plate. Attributes which are bound to an element are
always placed within square brackets [6].
5.2. app.root
app-root component serves as a container for entire application, in other words it is parent component of all other
components. All the fonts and other styling resources are loaded by app-root component so that they are accessible
throughout the application. The other important aspect of app-root component is to load navigation panel, and to load
other components via router module as and when requested by user. This configuration ensures that menu component
stays on top and the rest of the components are dynamically loaded via the router module [7].
5.3. home.component
This is the first component or the landing component which is displayed to user as he or she visits it. It follows the design
concept of Facebook to merge sign up page into the landing page. This page offers user to sign up and to navigate to any
other page if already logged in, displays some information describing the purpose of this website and the contact details
at the bottom. The sign up is carried out using Firebase auth module, and the data validation is handled by custom angular
validators like myguard.guard . Lastly, it uses Reactive Forms Module to handle forms.
5.4. login.component
Again, the login component follows the same design approach and offers a very clean experience. It uses a custom service
(auth.service) which uses firebase auth module to handle the login process of user. This service is responsible make basic
user information (like uid, displayName) accessible to all other components in this project. The concept used is Angular’s
interpolation which is required to display the property of the component in the view template along with the double curly
braces. All kinds of properties can be displayed in the view for example number, string, array, date, map or list. The

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 2 Engineering (JIEEE)
A2Z Journals
 A. K. Sahani et al.

attribute name which is to be displayed in the view template should be present between double curly braces also called as
moustache syn- tax. Angular by default extracts from the component the value of propertyName as well as
object.propertyName and puts those extracted values in the web browser. Angular keeps on updating the display when
the properties change. Data binding in angular is of two types, one way and two way.

5.5. profile.component
Profile component is responsible for displaying profiles of users along with ability to modify or update it. It also allows
users to change profile picture and change password of their account. The profile component uses a different approach
for dis- playing information. Instead of displaying it in some sort of div or tabular format and providing a edit button for
each value, it just assigns the stored value to each respective filed. So, the user can edit whichever field he wants and hit
submit and the information will be updated.
5.6. myblogs.component
The myblogs component serves quite a few purposes:
• It allows user to create new blog
• It allows user to view his/her blogs
• It allows user to delete his/her existing blog
This component has mainly two sections, one to create Blog and the other one containing existing blogs of current
user. The blogs are displayed only with title and first 30 characters, selecting it open that particular blog in a new
component called view component. The Create Blog is hidden by default using ng directives and is displayed when the user
click create post button. This is done to save space on this page, and again, making it look clean. The blogs are stored in
firebase firestore database. Each blog is liked to its owner with uid which allows granting permissions to modify and delete
it. The formatting is done using html directives [10].
5.7. views.component
view component is responsible to display the blog and the comments associated with it. view component is designed to
dis- play blog to anyone, irrespective of whether he has logged in or not. view component also provides option to
comment on the blog, though for commenting, one must be logged in. Again, Firebase firestore database is used to store
comments and are retrieved and rendered using comments component.
5.8. comments.component
Comments component is responsible to retrieve comments for respective blog and render it. This component pulls all the
comments from firestore database, render it and then is applied by view component. Data binding is a very essential and
vital aspect of the software development process. Data binding involves the communication between the component and
its corresponding view. Data binding permits for interactivity as well as dynamism in the applications. Two way data
binding is a technique which involves data flow in both ways from component to view and from view to component. The
components and the view are always synchronized, which means that the alterations made on one end are immediately
reflected on the other side. Two-way binding is generally used while dealing with forms which involves input given by user
to update the state of the component and vice versa [9].

5.9. app routing module

After building all those components, we need to somehow relate them to enable navigation between them. Some of

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 5 Engineering (JIEEE)
A2Z Journals
A. K. Sahani et al.

these events driven navigation is directly controlled in respective typescript files while the static ones are handled using
routing module. For e.g.: A invalid path results in 404 error, this is handled by redirecting any such requests to home
component.

5.10. auth.service
This is a custom service designed to handle authentication with firebase auth, thereby simplifying this process and
reducing repetition of code. Making a custom service enables us to change authentication method in future, without
struggling too much as now all the authentication code is at one place and not scattered among several files.

5.11. myguard.guard
This is a custom guard designed to validate email address, password etc before it is pushed to database. Similar to auth
ser- vice, we define it as a guard to reduce repeating of code and gives us flexibility to 20 tune these criteria with a lot
more ease. This guard is used in login, signup and profile component to validate the information given by the user. Guards
are implemented to impose constraint’s on information provided by user, such as password, email id, name etc.

6. Conclusion
The evolution occurring in the technology sector, it has become necessary for all of us to become used to these new
advancements if we want to get groomed up and do not want to get stale or neglected in the market. These new
technologies also assist us in obtaining more users, increasing the user involvement, and will also help in making better
revolutions and conversions. Some of these technologies and advancements have already been implemented while others
are looking forward to being implemented in near future. Angular’s revolutionary perspective for widening HTML will
make very much sense to those who are web developers in soul. With Google behind it and the support of a big
community, Angular is here to stay and grow. Angular works quite well with both large scale productions as well as quick
prototyping projects.

Acknowledgements
I would like to thank my university for giving me this golden opportunity to research on such an interesting topic. I would
also like to thank Dr. Anil Kumar, Assistant Pro Vice Chancellor & Director, ASET and Dr. Deepak Arora, Professor & Head,
Dept of CSE & IT, ASET for encouraging students to indulge in valuable research activities to enhance their technical skills.
Next, I want to thank my faculty guide Dr. Pawan Singh for guiding me throughout the course of this project. I would also
like to thank the internet, books and the institute for the knowledge I acquired with their help.

References
[1] Sachar, K. S., & Suneja, S. (2017) Review Paper on Mean Stack for Web Development. International Journal for Scientific Research &
Development, 5(1), 497-498.
[2] Ninan, B. A., Sooraj, S. R., Ananthakrishnan Baji, M. C., Anoop, M. S., Ratheesh, S., & Jooby, E. (2016) Literature Review Web
Application Designed for Schools and Colleges. Imperial Journal of Interdisciplinary Research (IJIR), 2(4), 350-356.
[3] Taylor M.J., McWilliam J., Wade S., Anacoura W. (2002) A User Centred Website Development Approach. In: Traunmüller R. (eds)
Information Systems. The International Federation for Information Processing, Vol 95. Springer, Boston, MA.
https://doi.org/10.1007/978-0-387-35604-4_13
[4] Doğan, S., Betin-Can, A., & Garousi, V. (2014) Web application testing: A systematic literature review. Journal of Systems and

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 2 Engineering (JIEEE)
A2Z Journals
 A. K. Sahani et al.

Software, 91, 174-201.

[5] Bozzon, A., Comai, S., Fraternali, P., & Carughi, G. T. (2006) Conceptual modeling and code generation for rich internet applications.
In Proceedings of the 6th international conference on Web engineering, Palo Alto, California, USA, July 11-14, 2006, pp. 353-360.
https://doi.org/10.1145/1145581.1145649
[6] Taylor, M. J., McWilliam, J., Forsyth, H., & Wade, S. (2002) Methodologies and website development: a survey of
practice. Information and software technology, 44(6), 381-391.
[7] Gustafson, J. M. (2013) HTML5 Web Application Development by Example Beginner's guide. Packt Publishing Ltd.
[8] Conallen, J. (1999) Modeling Web application architectures with UML. Communications of the ACM, 42(10), 63-70.
[9] Lerner, A. (2013) ng-book - The Complete Book on AngularJS. Fullstack. Io, Portland, ME, U.S.A.
[10] Shaked, U. (2014) AngularJS vs. Backbone. js vs. Ember. js.
URL: http://www. airpair. com/js/javascript-framework-comparison

Journal of Informatics Electrical and Electronics

ISSN (Online) : 2582-7006 7 Engineering (JIEEE)
A2Z Journals