Architecture of a Web Application
 The core of a Web application is its server-side
logic. The Web application layer itself can be
comprised of many distinct layers. The typical
example is a three-layered architecture
comprised of presentation, business, and data
layers.
Design Considerations
When designing a Web application, the goals of a
software architect are to minimize the complexity by
separating tasks into different areas of concern while
designing a secure and high performance application.
 Partition your application logically.
 Use abstraction to implement loose coupling
between layers.
 Understand how components will communicate
with each other.
 Reduce round trips.
 Consider using caching.
 Consider using logging and instrumentation.
 Avoid blocking during long-running tasks.
 Consider authenticating users across trust
boundaries.
 Do not pass sensitive data in plain text across
network.
 Design to run your Web application using a
least-privilege account.
Angular Architecture
 Angular is an open-source JavaScript MVC
framework for the web applications. It extends
the HTML and makes it dynamic. Angular is
used to create Single Page Applications.
What is Angular?
 Angular is a JavaScript framework that uses
HTML and TypeScript to create single-page
client apps. Its primary functionality is
implemented as a series of TypeScript libraries
that you load into your projects. It is primarily
built in TypeScript.
Few of Angular's most notable features:
Custom Components
 Angular enables users to build their
components that can pack functionality along
with rendering logic into reusable pieces.
Data Binding
 Angular enables users to effortlessly move data
from JavaScript code to the view, and react to
user events without having to write any code
manually.
Dependency Injection
 Angular enables users to write modular services
and inject them wherever they are needed. This
improves the testability and reusability of the
same services.
Testing
 Tests are first-class tools, and Angular has been
built from the ground up with testability in
mind. You will have the ability to test every part
of your application—which is highly
recommended.
Comprehensive
 Angular is a full-fledged JavaScript framework
and provides out-of-the-box solutions for server
communication, routing within your application,
and more.
Browser Compatibility
 Angular works cross-platform and compatible
with multiple browsers. An Angular application
can typically run on all browsers (Eg: Chrome,
Firefox) and operating systems, such as
Windows, macOS, and Linux.
UNDERSTAND THE ARCHITECTURE
Angular
 is a platform and framework for building single-
page client applications using HTML and
TypeScript. Angular is written in TypeScript. It
implements core and optional functionality as a
set of TypeScript libraries that you import into
your applications.
 The architecture of an Angular application relies
on certain fundamental concepts. The basic
building blocks of the Angular framework are
Angular components that are organized into
NgModules. NgModules collect related code
into functional sets; an Angular application is
defined by a set of NgModules. An application
always has at least a root module that enables
bootstrapping, and typically has many more
feature modules.
 Components define views, which are
sets of screen elements that Angular
can choose among and modify
 according to your program logic and  Event binding lets your application
data. respond to user input in the target
 Components use services, which environment by updating your
provide specific functionality not application data.
directly related to views. Service  Property binding lets you interpolate
providers can be injected into values that are computed from your
components as dependencies, making application data into the HTML.
your code modular, reusable, and
This part of the lesson will demonstrate from creation
efficient.
to deployment of an Angular Web App.
MODULES
 Angular NgModules differ from and Step 1. Building the first application
complement JavaScript (ES2015) modules. An
NgModule declares a compilation context for a
set of components that is dedicated to an
application domain, a workflow, or a closely
related set of capabilities. An NgModule can
associate its components with related code,
such as services, to form functional units.
 Every Angular application has a root module,
conventionally named AppModule, which
provides the bootstrap mechanism that
launches the application. An application Step 2. Visual Studio Code Angular file structure.
typically contains many functional modules.
When the command above is executed, VSC will display
 Just like JavaScript modules, NgModules can
a welcome screen with the folder structure of budget-
import functionality from other NgModules,
app. The figure below presents the components and
and allow their own functionality to be
features of the Angular App recently created.
exported and used by other NgModules. We
will take this further on Routing.

COMPONENTS
 Every Angular application has at least one
component, the root component that connects
a component hierarchy with the page document
object model (DOM). Each component defines a
class that contains application data and logic,
and is associated with an HTML template that
defines a view to be displayed in a target
environment.
 The @Component decorator identifies the class
immediately below it as a component, and
provides the template and related component-
specific metadata.

Templates, directives, and data binding

 A template combines HTML with Angular
markup that can modify HTML elements before
they are displayed. Template directives provide Step 3. Deploying the localhost using ng serve
program logic, and binding markup connects command.
your application data and the DOM. There are
two types of data binding: Open a web browser and go to http://localhost:4200/
  is a way how a component is called in a
template. It is a unique identifier for a
component.

component
 is a directive with a template that allows
building blocks of a UI in an Angular application.
Components will always have a template, a
selector, and may or may not have a separate
style. Components are declared using
@Component.
 Generally speaking, each and every Angular
application has at least one component by
default—the root component. From there, it is
up to us, how to design our application. Usually,
you would create a component for separate
pages, and then each page would hold a list of
separate components. As a rule of thumb, a
component must fulfill the following criteria:
 Must have a class defined, which holds
data and logic; and
 Must be associated with an HTML
template that displays information for
the end user.

selector