Z Score,T Score, Percential Rank and Box Plot Graph
Play with Angular JS
1. AngularJs with Play FrameworkAngularJs with Play Framework
Girish Chandra Bharti
Trainee Software Consultant
Knoldus Software LLP
Girish Chandra Bharti
Trainee Software Consultant
Knoldus Software LLP
2. Topics CoveredTopics Covered
1. What is AngularJs?
2. Working with AngularJs.
3. What is Play Framework?
4. Working with Play Framework.
5. Comparison between Play and AngularJs.
6. Combining Play and AngularJs.
7. Demo.
1. What is AngularJs?
2. Working with AngularJs.
3. What is Play Framework?
4. Working with Play Framework.
5. Comparison between Play and AngularJs.
6. Combining Play and AngularJs.
7. Demo.
3. What is AngularJs?
● AngularJS is a structural framework for dynamic web
applications
● Its data binding and dependency injection eliminate much
of the code you currently have to write.
● It was originally developed in 2009 by Misko Hevery and
Adam Abrons. It is now maintained by Google.
4. General Features of AngularJs
● AngularJS provides developers an options to write client
side applications using JavaScript in a clean Model View
Controller (MVC or MVVM) way.
● Applications written in AngularJS are cross-browser
compliant.
● AngularJS is open source, completely free, and used by
thousands of developers around the world.
5. Core features of AngularJs
● Data-binding
● Scope
● Controller
● Services
● Filters
6. Core features of AngularJs
● Templates
● Routing
● MVVM (Model-View-ViewModel)
● Dependency Injection
7. Advantages of AngularJs
● It provides the capability to create Single Page Application in a very
clean and maintainable way.
● It provides data binding capability to HTML. Thus, it gives 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, the developers can achieve more functionality with
short code.
● In AngularJS, views are pure html pages, and controllers written in
JavaScript do the business processing.
8. Disadvantages of AngularJS
● Not secure : Being JavaScript only framework,
application written in AngularJS are not safe.
Server side authentication and authorization is
must to keep an application secure.
● Not degradable: If the user of your application
disables JavaScript, then nothing would be
visible, except the basic page.
10. Example(Java Script)
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
11. What is Play Framework
● Open source web application framework.
● Lightweight, stateless, web-friendly
architecture.
● Built on Akka.
● Fully asynchronous model.
12. Features of Play
● Stateless Web Tier
● Non-blocking I/O
● Built on Akka
● Real-time enabled
● Code is compiled
● Runs on the JVM
● JSON is a first class citizen
13. Basic components of Play
● Controllers
● Simple results
● Action
● HTTP routing
● Session and Flash scopes
● XML, Json, Web Services.
● Ajax.
14. Example
● Routes:
GET /clients/:id controllers.Client.show(id: Long)
● Controller:
public class Clients extends Controller {
public static void show(Long id) {
Client client = Client.findById(id);
Ok(“Client” + client);
}
}
● Template:
@(customer: Customer, orders: Seq[Order])
<h1>Welcome @customer.name!</h1>
<ul>
@orders.map { order =>
<li>@order.title</li>
}
</ul>
15. AngularJs & Play Comparison
● Category : JavaScript Web application
Framework Framework
● Preference: 39% votes 61% votes
●
Design pattern: MVVM MVC
●
Horizontal scalable No Yes
●
Template language HTML5 Scala template engine
● Target audience Cloud computing Enterprise
Web Development
Media and publishing
iOS Development
Entreprise
●
Application startup time 0.5ms 1ms
●
Database Connection Pooling No Yes
●
Compiled language No Yes
http://vschart.com/compare/angularjs/vs/play-framework
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 bound to a particular scope.
Services: AngularJS comes with several built-in services such as $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 such as ngBind, ngModel, etc.
Templates:These are the rendered view with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.
Routing: It is concept of switching views.
Model View Whatever: MVW 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.
Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.
Play is an open source web application framework, written in Scala and Java, which follows the model–view–controller (MVC) architectural pattern.
Play is based on a lightweight, stateless, web-friendly architecture.
Built on Akka, Play provides predictable and minimal resource consumption (CPU, memory, threads) for highly-scalable applications.
Play uses a fully asynchronous model built on top of Akka. Combined with being stateless, Play scales simply and predictably.
Controllers: A Controller is nothing more than a singleton object that generates Action values.
Simple results: An HTTP result with a status code, a set of HTTP headers and a body to be sent to the web client.
Result(
header = ResponseHeader(200, Map(CONTENT_TYPE -&gt; &quot;text/plain&quot;)),
body = Enumerator(&quot;Hello world!&quot;.getBytes())
)
There are several helpers available to create common results such as the Ok, NotFound, BadRequest, InternalServerError etc.
Action: A play.api.mvc.Action is basically a (play.api.mvc.Request =&gt; play.api.mvc.Result) function that handles a request and generates a result to be sent to the client.
HTTP routing: The router is the component in charge of translating each incoming HTTP request to an Action.
The HTTP method can be any of the valid methods supported by HTTP (GET, POST, PUT, DELETE, HEAD).
Session and Flash scopes
XML, Json, Web Services.
Ajax.
Both are complete packages.
Both provide synchronous results.
Both provide web services.
Both provide ajax.
Processing
-Play support server side processing.
-AngularJs Support client side processing.
Performance
-If Server side interactions are important then play is better.
-If client side interactions are important angularJs is better.
Services
-Ajax
-Web Services
-Json Xml support.
-Multi language support.
Asynchronous Properties.
Ajax Calling.
Use cases:
- Games Application
- Profile application with github data.