A white paper on Fundamentals and Implementations of Angular JS

Angular JS, Super-Heroic JavaScript
MVW Framework
A white paper on Fundamentals and Implementations of Angular JS with
renowned Technology Platforms

Angular JS with MVC Frameworks | Page 2
Contents
Abstract...................................................................................................................................................3
Overview on Angular JS ..........................................................................................................................4
Core Concepts of Angular JS ...............................................................................................................4
Why Angular JS?..................................................................................................................................5
MEAN Stack Concept ..............................................................................................................................5
Angular JS with MVC Frameworks and Technologies.............................................................................7
PHP Technology ..................................................................................................................................7
ROR Technology..................................................................................................................................8
.Net Technology..................................................................................................................................9
Java Technology................................................................................................................................10
Summary...............................................................................................................................................11
©2014 Optisol Business Solutions Private Limited. All rights reserved.
No part of this document may be reproduced or transmitted in any form or by any means, electronic or
mechanical, for any purpose without the written permission of Optisol Business Solutions. Any hard copies
of this document are to be regarded as temporary reference copies only.

Abstract
This white paper gives a brief overview of the web development using Angular JS through Single Page
Applications (SPA) technologies. The document also illustrates at high level on how to use Angular JS
with legacy technologies such as PHP, .Net, Ruby on Rails (ROR) and Java.
The major driving factor for client side script is the complexity to maintain the business logic in the
browser and trade off with a thin loading. As more and more logic ends up being executed in the
browser, front-end code bases grow larger and more difficult to maintain. To solve this issue, developers
have been turning to client-side MVC frameworks, which promise increased productivity and
maintainable code.
Before moving on to the detailed elaboration of the Angular JS frameworks, it is worth mentioning that
JavaScript has become the language of choice for development, especially for client-side development
due to following advantages:
Instant result with no
compile step
Rapid Development and great
User Interface
AJAX - Every web developer
knows and adores
Angular JS will act as the toolset based on extending the HTML vocabulary for our application. Based
on our experience of working on 200+ web application UIs, OptiSol strongly feels that Angular JS stand
out in terms of adoption readiness and value proposition. OptiSol is happy to work on this white paper
that summarizes the advantages of Angular.JS and how to make it work with other legacy programing
languages.
The document also shares a high level overview about MEAN stack
This whitepaper is intended for beginners and business level users and will be informative for advanced
users.

Overview on Angular JS
Angular JS – a Super Heroic JavaScript Framework which provides
Complete Client-Side Solution.
Angular JS is the Client Side Browser App framework supported and maintained by Google
The emergence of Angular JS coincides with the need for single page application development. The
single page web applications provides more fluid user experience as Desktop Application
Increase the browser based application with MVC (Model, View and Controller) which makes the
development and testing process simple and quick
The static HTML pages are transformed to process the dynamic content through 2-way binding for
automatic synchronization of models and views.
Provides robust, testable and flexible application with Professional Programming Practice and
browser compactible.
Implements the MVC pattern i.e., Model Object Oriented Design on the client side for uniquely
conceptualizing the core factors of presentation, data and logic components.
Provides structure for building application starting from UI Design, Business Logic till testing
Process.
 Everything you need to build a CRUD app in a cohesive set: data-binding, basic templates,
directives, form validation, routing, deep-linking, reusable components, dependency injection.
 Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
 Seed application with directory layout and test scripts as a starting point.
Core Concepts of Angular JS
Templates
Module BasedBootstrapping
2-way Data
Binding
Dependency
Injection
Routing Directives
Unit Test

Why Angular JS?
Address Some Problems in Software Architecture
 Angular JS has ng-resource to create services that hook up to REST APIs and return back
that object in JSON and fully functional object.
 Angular JS encourages to also deal with models on client side just like on the server side.
Enable to Create Software quickly with Less Effort
 Angular JS provide ng-model and ng-class directives to cover common operations and
allows 2-way data binding and saving to the server.
 Reduces the code
Result in Software is more Maintainable
 Angular JS encourages using the model object oriented design on the client-side
 Object oriented design principle ensure software is more maintainable compared to
procedural.
Improve Testability of Software
 Angular JS provides dependency injection at its core making flexible testing
Encourage Good Programming Practices
 Features like Model, dependency injection and ability to create directives lends to
reusable and shareable components
 REST API connection to server and benefits through Angular JS usage
(From AngularJS.org)

MEAN Stack
Client Request or Display
results for end users
Handle Client or
Server request
Make request to Database
and return response
1. Make Request 2. Parse Request
3. Get Database
4. Return Database
5. Return Request6. Display Request
Retrieve Data
MEAN Stack is full-stack JavaScript Solution for developing fast, robust and maintainable web
applications using Mongo DB, Express, Angular JS and Node JS.
MEAN Stack enables building of organized application, maintain simple and readable open-source
solution.

Angular JS with MVC Frameworks and Technologies
PHP Technology
In many Angular JS web applications, each web page is really a single-page application (SPA), so the
role of the server-side is really an API consisting of a set of web services to interact with the server-side
databases. The web application created with Angular JS will have master detail structure consisting of
two pages such as Master (list of items) and Detail (item).
Database
Media or Image
Folder
CSS
Angular JS
Framework
Frontend Apache Server
MVC Framework
(Yii, CakePHP, etc.)
Items can be edited and saved in the details screen. Limited editing of items can be done in the master
screen. The application structure was built starting from the Angular-seed project with two pages at the
root as list.html and index.html. Each page was a SPA with separate services for interacting with server-
side for the pages respectively.

ROR Technology
Angular JS is the client side Java Script Framework whereas Ruby on Rails is server side application
framework but both the framework works based on MVC design pattern. The main key aspect of Angular
JS is that all client side data manipulations used for various User Interface Use Cases such as Lists, Refine
Search, and Graphical Data Representation etc. were provided to the user as Single Page Application.
Building the Single-Page Applications (SPA) using Angular JS and Ruby on Rail is a two-step process:
first we need to create a JSON API in Rails and then use that API in the JavaScript application.
HTML
CSS
VIEW MODEL
CONTROLLER
Javascript
Angular JS API
USER
Model (M) Controller (C)
View (V)
API Request (AJAX)
Database
JSON Data
The Angular JS Controllers interact with RAILS Controllers. The object data from the RAILS Model (M) is
passed to the Angular JS Controllers via Rails Controller(C) using Restful API services. The view part of
the application is the Angular JS framework in MVC design pattern, dropping the View in Rails.
This way the true potential of Angular JS is utilized for building the Single Page Application and Rails is
capitalized for its server side implementation using its Models and Controllers. The layers interact using
Restful JSON API services.

.Net Technology
In Single-Page Applications (SPAs), entire page is loaded in browser after initial request but subsequent
interactions take place through AJAX requests. This means that browser has to update only the portion
of the page that has changed; there is no need to reload the entire page. The SPA approach reduces
the time taken by the application to respond to user actions, resulting in more fluid experience.
The architecture of a SPA involves certain challenges that are not present in traditional web applications.
However, emerging technologies like ASP.NET Web API, JavaScript frameworks like Angular JS and new
styling features provided by CSS3 make it really easy to design and build SPAs through:
Create an ASP.NET Web API service to send and receive JSON data
Create a responsive UI using Angular JS
Enhance the UI experience with CSS3 transformations
HTML Rendering
jQuery + AJAX
ASP.Net MVC
HTML Rendering
Templating
(ng-view, directives, interpolation)
ASP.Net MVC + Angular JS
Routing
($route)
Client
View Request
(Dynamic View)
API Request
(AJAX)
Routing Engine Media Type Formatters
Response
(JSON)
View Engine
HTML Content
Controller
Controller
Dispatch
Model Data
Server

Java Technology
View Layer
Controller Layer
Manager Layer
Service Layer
Data Access object Layer
Database
Struts Action Layer
Angular JS is Modern, Sophisticated JavaScript Framework for building rich HTML applications. Here we
demonstrates how to test client-side code and integrate front-end logic with Spring-powered REST
controllers. Angular JS allows developer to specify custom and reusable HTML tags that moderate
behavior of certain elements these attributes are called ‘Directives’. Example: ng-app, ng-model etc.
Through Angular JS with Java (Springs/Struts/Hibernate), Application can be divided into five sub-tasks:
Application-util (Simple Java Classes)
Application-services (Hibernate + Springs)
Application-commons (POJO classes)
Application-apis (Spring Controllers)
Application-app (Angular JS + Struts + Spring)

Summary
The Angular JS which is deviated from the classical Java-script development, uses or introduces a new
paradigms for the development methodologies. Angular JS is the wise choose for those who need
comprehensive all-in-one solution with 2-way data binding and in-built directives or filters which will
allow teams to develop applications rapidly. This allows users to write less code, but note that Angular
requires significant effort and time to learn. It has good test integration, which is really useful.
Template
View
Model
Compile
Continuous updates model in
single source of truth
Change to view
updates model
Change to Model
updates View
Maturity: Angular JS have a stable API and it’s in application development for more than 2 decades.
Also provides support through good documentation and examples and huge community.
Size: Angular JS deployment scope is huge and makes the application fully functional and suitable for
mobile applications by limiting the size.
Out of the box solution: Angular JS is packed with lot of features so that a user has enough tools to
get going. It comes with Directives and Filters (custom and in-built). It has good support for module
dependencies and injections, along with services and factories which become reusable parts for apps.
Two-way data binding: Angular JS provides two way data binding upfront and reduces the complexity
to a large extent. User has to write less code which helps it make less error-prone.
Opinionated Development: Angular JS is strongly opinionated-implementation which are to be done
in the "Angular way", for example, angular.fromJSON
Interoperability: Angular JS work well with different technologies. Also Angular JS encourage
developers not to use libraries such as JQuery, but provides a subset jqLite.
Templating using HTML: Angular JS uses HTML to define the app's UI. Angular JS has an advantage
because HTML is intuitive and less convoluted compared to JavaScript for defining UI, but it forces the
UI developer to understand both HTML and Angular JS well to be productive.
Data Storage: Angular JS uses a manual method which accommodate different servers and can be
adapted to different server-side technologies.

About Optisol Business SolutionsAbout Optisol Business Solutions
Optisol is proficient service provider for Social, Mobile, Analytics and Cloud solutions and focusing on
building innovation for our clients in more than 20 countries. With 90+ smart employees, we act as the
reliable outsourcing services partner, providing optimized business solutions with delivery excellence to both
small and medium enterprises worldwide. Through our services on Consulting, Solutions, Mobility, Cloud
Computing and Big Data, we assist our clients to transform and thrive in a changing world.
We are equipped with creative engagement models and operations framework that suits outsourcing needs
from all gamut of customers – startup, Independent Software Vendor (ISV), small or mid-size companies and
Enterprises. It has been serving its customer base across breadth and width of technology outsourcing needs
that spans across
#87/4, Arcot Road, Vadapalani,
Chennai - 600026, Tamilnadu, India
Communicate with us…
Phone: +91 44 42136061 (India)
+1415-233-4737 | +1908-838-0191 (USA)
info@optisolbusiness.com | www.optisolbusiness.com

A white paper on Fundamentals and Implementations of Angular JS

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to A white paper on Fundamentals and Implementations of Angular JS (20)

Recently uploaded (20)

A white paper on Fundamentals and Implementations of Angular JS