Name: Urwa Sarfraz

Roll No: bsf2103147

ANGULAR FRAMEWORK
WHAT IS ANGULAR?

 Angular is an open-source, JavaScript

framework written in TypeScript.
 Google maintains it, and its primary purpose
is to develop single-page applications. As a
framework, Angular has clear advantages
while also providing a standard structure for
developers to work with.
 It enables users to create large applications
in a maintainable manner.
WHAT IS ANGULAR JS

 Angular JS is a structural framework for

dynamic web apps. It can be added to an
HTML page with a <script> Tag.
 It lets you use HTML as your template
language
 It lets you extends HTML’s syntax to
express you application’s components
clearly and succinctly.
 Angular’s data binding and dependency
injection eliminate much of the code you
currently have to write. And it all happens
within the browser, making it an ideal partner
with any server Technology.
ANGULAR VS ANGULARJS

 AngularJS is the most primitive version

of Angular that was developed by
Google and is one of the oldest front-end
frameworks for building SPAs.
However, Google recently dropped
support for AngularJS which makes
Angular the obviously better choice out
of the two.
WHY DO YOU NEED A
FRAMEWORK?
 Frameworks in general boost web
development efficiency and
performance by providing a consistent
structure so that developers don’t have
to keep rebuilding code from scratch.
 Frameworks are time savers that offer
developers a host of extra features that
can be added to software without
requiring extra effort.
WHY ANGULAR?
 JavaScript is the most commonly used client-
side scripting language.
 It is written into HTML documents to enable
interactions with web pages in many unique
ways. As a relatively easy-to-learn language
with pervasive support, it is well-suited to
develop modern applications.
WHAT IS SPA (SINGLE PAGE
APPLICATION) IN ANGULARJS ?

 Traditionally, applications were Multi-Page

Applications (MPA) where with every click a new
page would be loaded from the server. This was not
only time-consuming but also increased the server load
and made the website slower.
 AngularJS is a JavaScript-based front-end web
framework based on bidirectional UI data binding and
is used to design Single Page Applications. Single Page
Applications are web applications that load a single
HTML page and only a part of the page instead of the
entire page gets updated with every click of the mouse.
 The page does not reload or transfer
control to another page during the process.
 This ensures high performance and loading
pages faster.
 Most modern applications use the concept of
SPA. In the SPA, the whole data is sent to the
client from the server at the beginning.
 As the client clicks certain parts on the
webpage, only the required part of the
information is fetched from the server and
the page is rewritten dynamically.
WHEN TO USE SPA?

 SPAs are good when the volume of data is

small and the website needs a dynamic
platform. It is also a good option for
mobile applications. But businesses that
depend largely on search engine
optimizations such as e-commerce
applications must avoid single-page
applications and opt for MPAs.
ADVANTAGES OF SINGLE
PAGE APPLICATION:
 Team collaboration: Single-page applications are
excellent when more than one developer is working
on the same project. It allows backend developers
to focus on the API, while frontend developers can
focus on creating the user interface based on the
backend API.
 Fast and responsive: As only parts of the pages
are loaded dynamically, it improves the website’s
speed.
 Linear user experience: Browsing or navigating
through the website is easy.
DISADVANTAGES OF SINGLE
PAGE APPLICATION:
 SEO optimization: SPAs provide poor SEO
optimization. This is because single-page
applications operate on JavaScript and load data at
once server. The URL does not change and
different pages do not have a unique URL. Hence it
is hard for the search engines to index the SPA
website as opposed to traditional server-rendered
pages.
 Security issues: Single-page apps are less immune
to cross-site scripting (XSS) and since no new
pages are loaded, hackers can easily gain access to
the website and inject new scripts on the client-
side.
 Browser history: A SPA does not save the users’ transition
of states within the website. A browser saves the previous
pages only, not the state transition. Thus when users click
the back button, they are not redirected to the previous
state of the website. To solve this problem, developers can
equip their SPA frameworks with the HTML5 History
API.
FEATURES OF ANGULAR
 MVC Architecture:
Angular has been built on what is called a
Model-Vie-Controller architecture. The
application data gets controlled by the Model,
whereas the data display is handles by View
component.
Two-Way Data Binding:
 The process is automatic data synchronization
between Model and View elements.
 Routing:

It is an Angular JS concept for switching views.

 Typescript:

Typescript has been the top choice of developers

when it comes to frontend
development. It is fast, concise, highly efficient at
identifying bugs, and offering a
seamless experience to developers. TypeScript
automatically populates the root file
configuration, making compilation easier. Angular’s
use of Typescript gives
developers unmatched ease of use and functionality.
ANGULAR ARCHITECTURE
 Angular is a framework for building client
applications in HTML and either JavaScript or a
language like Type Script that compiles to
JavaScript.
 The framework consists of several libraries,
some of them core and some optional.
 You write Angular applications by composing
HTML templates, writing component classes to
manage those templates, adding application
logic in services, and boxing components and
services in modules.
 Then you launch the app by bootstrapping the
root module. Angular presenting your
application content in a browser and responding
to user interactions according to the instructions
you’ve provided.