1. Single Page Application
Single Page Applicationalso called SPA – is creating a
huge impact of web application development.This brings in lot of benefitto
web application development – since it brings in lot of features like
1. Componentbased development
2. Stateful development.
3. MVC creation using JavaScript tightly coupled.
4. Encapsulated with State data.
5. Operations/methodsare tightly bound to class.
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
In an SPA,either all necessary code – HTML, JavaScript, and CSS –
is retrieved with a single page load, or partial changes are performed
loading new code on demand from the web server, usually driven by
user actions. The page does not automatically reload during user
interaction with the application, nor does control transfer to another
page. Updates to the displayed page may or may not involve
interaction with a server.

2. As shown above in the picture one single web page which assembles the
components and it maintains the state. The current web sites switches between
different sites.
Write-only DOM. No state / data is read from the DOM. The application outputs
HTML and operations on elements, but nothing is ever read from the DOM. Storing

3. state in the DOM gets hard to manage very quickly: it is much better to have one
place where the data lives and to render the UI from the data, particularly when the
same data has to be shown in multiple places in the UI.
Models as the single source of truth. Instead of storing data in the DOM or in
random objects, there is a set of in-memory models which represent all of the
state/data in the application.
Views observe model changes. We want the views to reflect the content of the
models. When multiple views depend on a single model (e.g. when a model changes,
redraw these views), we don't want to manually keep track of each dependent view.
Instead of manually tracking things, there is a change event system through which
views receive change notifications from models and handle redrawing themselves.
Decoupled modules that expose small external surfaces. Instead of making
things global, we should try to create small subsystems that are not interdependent.
Dependencies make code hard to set up for testing. Small external surfaces make
refactoring internals easy, since most things can changes as long as the external
interface remains the same.
Minimizing DOM dependent-code. Why? Any code that depends on the DOM
needs to be tested for cross-browser compatibility. By writing code in a way that
isolates those nasty parts, a much more limited surface area needs to be tested for
cross-browser compatibility. Cross-browser incompatibilities are a lot more
manageable this way. Incompatibilities are in the DOM implementations, not in the
Javascript implementations, so it makes sense to minimize and isolate DOM -
dependent code
On a Single Page Application, the server-side will be responsible for:
 Handling CRUD (Create, Read, Update and Delete) operations

4.  Executing different operations and workflows (these may include changing states
of entities, updating database records)
 Authentication and Authorization (this should always be done on the server side
to ensure that the requests are legitimate)
 Validation of web requests
 Providing an interface for the client application to perform operations (typically
done via a REST API)
The client side will be responsible for:
 Populating and rendering the UI with proper data
 Access the server via AJAX
 Perform client side routing
 Perform client side validation
Angular JS this is one tool which helps in creating SPA application

5.  Data-binding: It is the automatic synchronization of data between model and view
components.
 Scope: These are objects that refer to the model. They act as a glue between controller
and view.
 Controller: These are Javascript functions that are bound to a particular scope.
 Services: AngularJS come with several built-in services for example $http to make a
XMLHttpRequests. These are singleton objects which are instantiated only once in app.
 Filters: These select a subset of items from an array and returns a new array.
 Directives: Directives are markers on DOM elements (such as elements, attributes, css,
and more). These can be used to create custom HTML tags that serve as new, custom
widgets. AngularJS has built-in directives (ngBind, ngModel...)

6.  Templates:These are the rendered view with information from the controller and model.
These can be a single file (like index.html) or multiple views in one page using "partials".
 Routing: It is concept of switching views.
 Model View Whatever: MVC is a design pattern for dividing an application into different
parts (called Model, View and Controller), each with distinct responsibilities. AngularJS
does not implement MVC in the traditional sense, but rather something closer to MVVM
(Model-View-ViewModel). The Angular JS team refers it humorously as Model View
Whatever.
 Deep Linking: Deep linking allows you to encode the state of application in the URL so
that it can be bookmarked. The application can then be restored from the URL to the same
state.
 Dependency Injection: AngularJS has a built-in dependency injection subsystem that
helps the developer by making the application easier to develop, understand, and test.
Advantages of AngularJS
 AngularJS provides capability to create Single Page Application in a very clean and
maintainable way.
 AngularJS provides data binding capability to HTML thus giving user a rich and responsive
experience
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of separation of concerns.
 AngularJS provides reusable components.
 With AngularJS, developer write less code and get more functionality.
 In AngularJS, views are pure html pages, and controllers written in javascript do the
business processing.
On top of everything, AngularJS applications can run on all major browsers and smart phones
including Android and iOS based phones/tablets.

7. Sample Loading Stack on how the modules are getting loaded
All the specific functionalities are defined as modules in the system which
mostly representobjects – Apps.js
This does the routing part on click of what which module should be routed
will be handled by - States.js
The Screen representationwhich is Html definition of the screens will be
mentioned here.
Every html will be supported by one controller this controller provides the
supportive functionality for the screens.
The Associated data which is populated from the Mongo DB is essentially
pulled from Service.js this makes a remote call in pulling the data