Play with Angular JS
Download as ODP, PDF•1 like•2,802 views
This document discusses AngularJS and the Play Framework. It provides an overview of each technology, including their core features and advantages/disadvantages. It also compares AngularJS and Play, noting differences in design patterns, scalability, templates used, and target audiences. The document describes how AngularJS and Play can be combined, with AngularJS handling the front-end and Play providing backend services via Ajax calls. It aims to explain why and how these two technologies can be used together.
![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.'}
];
});](https://image.slidesharecdn.com/playwithangulay-150727060222-lva1-app6892/85/Play-with-Angular-JS-10-320.jpg)
![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>](https://image.slidesharecdn.com/playwithangulay-150727060222-lva1-app6892/85/Play-with-Angular-JS-14-320.jpg)
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.
- 9. Example(HTML) <html data-ng-app="phonecatApp"> <head> ... <script src="/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body data-ng-controller="PhoneListCtrl"> <ul> <li data-ng-repeat="phone in phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body> </html>
- 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
- 16. Use of AngularJs with Play Why and how..??
- 17. Areas of interest ● Processing ● Performance ● Services ● Asynchronous Properties. ● Ajax Calling.
- 18. Thank You
Editor's Notes
- #6: 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.
- #7: 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.
- #12: 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.
- #14: 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.
- #17: Both are complete packages. Both provide synchronous results. Both provide web services. Both provide ajax.
- #18: 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.