How to create a single page application in Angular - 1. Single Page Architecture 2. Types of Client Side Framework 3. Benefits of learning Angular? 4. Angular Vs other client side frameworks 5. Who can learn Angular? 6. Career and opportunities in Angular To know more: +91 9884412301 / 9600112302 Website: www.credosystemz.com

1. SINGLE PAGE ARCHITECTURE
Presented & Co Presented By
Srinivasan R
Senior Software Engineer
Group10 Technologies
Ragu NS
Product Manager
Group10 Technologies

2. Objectives
What is Single Page Architecture ?
What are the benefits of SPA
Types of Client-Side Framework
Benefits of learning Angular?
Angular Vs other client-side frameworks
Who can learn Angular ?
Career and opportunities in Angular

3. What is Single Page Application ?
A single-page application (SPA) is a website design approach where each new page's content is served not
from loading new HTML pages but generated dynamically through JavaScript's ability to manipulate the DOM
elements on the existing page itself.
In a more traditional web page architecture, an index.html page might link to other HTML pages on the server
that the browser will download and display from scratch
A SPA approach allows the user to continue consuming and interacting with the page while new elements are
being updated or fetched results in much faster interaction manner and even faster content reloading.
In addition, the HTML5 History API allows us to alter the page's URL without reloading the page, allowing us
to create separate URLs for different views.

4. Advantages of the Single Page Application
SPA is fast, as most resources (HTML + CSS + Scripts) are only loaded once throughout the lifespan of
application. Only data is transmitted back and forth.
The development is simplified and streamlined. There is no need to write code to render pages on the server. It is
much easier to get started because you can usually kick off development from a file file://URI, without using any
server at all.
SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data
associated with it.
It’s easier to make a mobile application because the developer can reuse the same backend code for web
application and native mobile application.
SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use
this data and works even offline.

6. Popular Apps that uses SPA

7. CLIENT-SIDE
FRAMEWORK TYPE

9. Popular Frameworks
Developed
Developed

11. MVC is like regular website flow
MVC Flow diagram Website flow diagram

12. MVC
M - Model
V - View
C – Controller
Designed at 1979
Software architecture type widely used in web
development
Usage Of MVC

13. Model
Represents domain specific data and
business logic
Responsible for communicating with
database
Responsible for CRUD operation
Can communicate with controller only

14. View
View listens to the controller always
It consists of templates and data form
It packages data received from controller
and presents it to the browser for display.
It does not know about source of data

15. Controller
It exists between view and model. Acts like
middleman
Responsible for controlling the flow of the
application execution
Process data from model and instructs view
to display
It can perform one or more action

16. Things to know
Forms
Pipes
HTTP Client
Authentication
Optimization and Ng Modules
Deployment
Animation and Testing
Getting Started
Basics
Components and Databinding's
Directives
Services and Dependency Injections
Routing
Observables

17. Components
Reusable HTML custom tag
Selector, templateURL, template,
styleURL,styles
Constructor and lifecycle of components
Databinding

18. Routing
Default Routing mechanism
Lazy Loading
Router State
Guard Service

19. Services
Services
Dependency Injection
Custom Service adoption

20. Career and opportunities in Angular