AngularJS 1-Restful Web Services-JAX-RS

1. e-Commerce Systems
Zainab KHALLOUF, Ph.D.
Lecture 6: Implementing Multi-tiered e-Commerce Systems using AngularJS and Java EE
7 (Introduction).

2. Lecture References
The Java EE 7 Tutorial.
http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf
How-to: HTML5 Front-End Applications with a Java EE Back End.
http://www.youtube.com/watch?v=qSbHiake3aE
Simple Example angularJS and JavaEE, by Lisa Spitzl.
http://www.youtube.com/watch?v=qSbHiake3aE
AngularJS in 60 Minutes, by Dan Wahlin.
http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
E-Commerce Systems 2

3. Outline
1 Introduction to AngularJS framework.
2 Representational State Transfer (RESTful) Web Services.
3 Using AngularJS to view data exposed by Java EE 7 RESTful
Web Services.
E-Commerce Systems 3

4. Introduction to AngularJS

5. What is AngularJS?
AngularJS is an open-source MVC JavaScript framework,
maintained by Google, for building Single Page Applications
(SPA) that run in a browser.
E-Commerce Systems 5

6. What is AngularJS?
E-Commerce Systems 6

7. Single Page Application (SPA)
A single page application (SPA) is one in which we have a shell
page and we can load multiple views into this shell page.
AngularJS in 60 Minutes, by Dan Wahlin.
E-Commerce Systems 7

8. AngularJS Application Parts
E-Commerce Systems 8

9. AngularJS Application Parts (cont.)
E-Commerce Systems 9

10. AngularJS Application Parts (cont.)
AngularJS application contains:
Module.
A container for the different parts of your app : controllers,
services, filters, directives, etc.
Routes.
In the SPA world we need a way to be able to track what
route we’re on and what view that’s associated with and
then what controller goes with that view
Views/Partials.
Views also called partials in AngularJS, they are defined in
plain HTML and extended with dynamics (JavaScript logic)
using so-called directives.
E-Commerce Systems 10

11. AngularJS Application Parts (cont.)
Controllers.
Controllers contain only business logic.
Services.
You can use services to organize and share code (or data)
across your app.
Filters.
A filter formats the value of an expression for display to the
user.
E-Commerce Systems 11

12. AngularJS Application: Views, Controllers and Scope
The glue between the View and the Controller is the Scope.
$scope represents the scope object.
AngularJS in 60 Minutes, by Dan Wahlin.
E-Commerce Systems 12

13. Developing AngularJS Application in Netbeans
E-Commerce Systems 13

14. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 14

15. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 15

16. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 16

17. Developing AngularJS Application in Netbeans (cont.)
Use Bower to manage dependencies.
E-Commerce Systems 17

18. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 18

19. Developing AngularJS Application in Netbeans (cont.)
index.html
ng-app is a built-in directive to initialize the Angular app.
ng-model is also a is a built-in directive, it adds a property
name into the scope. To write the value of the name property
we add a data binding expression.
E-Commerce Systems 19

20. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 20

21. Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 21

22. Representational State Transfer (RESTful) Web Services

23. What Are Web Services?
Web services are client and server applications that
communicate over HTTP using messages.
Web services provide a standard means of interoperating
between software applications running on a variety of
platforms and frameworks.
E-Commerce Systems 23

24. Types of Web Services
Big Web Services: use XML messages that follow the
Simple Object Access Protocol (SOAP) standard
RESTful Web Services: lightweight web services
suitable for basic, adhoc integration scenarios. (The topic
of this lecture)
E-Commerce Systems 24

25. RESTful Web Services
The REST architectural style is designed to use a
stateless communication protocol, typically HTTP.
Data and functionality are considered resources and are
accessed using Uniform Resource Identifiers (URIs).
The resources are represented by an XML document, or an
image file, or an HTML page, and are acted upon by
HTTP operations: GET, PUT, POST and DELETE.
A client might retrieve a particular representation, modify
the resource by updating its data, or delete the resource
entirely.
E-Commerce Systems 25

26. RESTful Web Services (cont.)
In Java EE 7, the Java API for RESTful Web Services
(JAX-RS) provides the functionality for REST web
services.
The JAX-RS API uses annotations to simplify the
development of RESTful web services.
Developers decorate Java programming language class files
with JAX-RS annotations to define resources and the
actions that can be performed on those resources.
Jersey is its official reference implementation of JAX-RS
and the one that is most widely used in development and
production.
The JAX-RS runtime will return a Web Application
Definition Language (WADL) document describing the
resource; see http://www.w3.org/Submission/wadl/ for
more information.
E-Commerce Systems 26

27. Web Application Definition Language (WADL) :
Example
E-Commerce Systems 27

28. Creating a RESTful Root Resource Class
Root resource classes are ”plain old Java objects” (POJOs)
that are annotated with @Path. The methods in the class
can be annotated with @Path or a request method
designator, such as @GET, @PUT, @POST, or @DELETE.
E-Commerce Systems 28

29. First RESTful Web Service
The following example demonstrates how to create a RESTful
web service that simply displays an HTML.
E-Commerce Systems 29

30. Summary of JAX-RS Annotations
@Path The @Path annotation’s value is a relative URI path
indicating where the Java class will be hosted: for
example, /hellors. You can also embed variables in
the URIs to make a URI path template (i.e. URI
path templates are URIs with variables embedded
within the URI syntax.). For example, you could ask
for the name of a user and pass it to the application
as a variable in the URI: /hellors/{username}.
@GET The Java method annotated with this request
method designator will process HTTP GET requests.
@POST The Java method annotated with this request
method designator will process HTTP POST re-
quests.
E-Commerce Systems 30

31. Summary of JAX-RS Annotations (cont.)
@PUT The Java method annotated with this request
method designator will process HTTP PUT requests.
@DELETE The Java method annotated with this request
method designator will process HTTP DELETE re-
quests.
@HEAD The Java method annotated with this request
method designator will process HTTP HEAD re-
quests.
@Consumes The @Consumes annotation is used to specify the
Multipurpose Internet Mail Extensions (MIME) me-
dia types of representations a resource can consume
that were sent by the client.
@Produces The @Produces annotation is used to specify the
MIME media types of representations a resource can
produce and send back to the client: for example,
”text/plain”.
E-Commerce Systems 31

32. Summary of JAX-RS Annotations (cont.)
@PathParam
The @PathParam annotation is a type
of parameter that you can extract from
the request URI for use in your resource
class.
The parameter names correspond to the
URI path template variable names
specified in the @Path class-level (or
method-level) annotation.
E-Commerce Systems 32

33. Summary of JAX-RS Annotations (cont.)
@PathParam
(cont.) For example, in the following @Path
annotation:@Path(”/users/{user}”), if the
user types the user name ”Bob,” the web
service responds to the following URL:
http://example.com/users/Bob, To obtain the
value of the user name, the @PathParam
annotation may be used on the method
parameter of a request method, as shown in
the following code example:
E-Commerce Systems 33

34. Summary of JAX-RS Annotations (cont.)
@QueryParam The @QueryParam annotation is a type
of parameter that you can extract for use
in your resource class. Query parame-
ters are extracted from the request URI
query parameters. (e.g. GET /employ-
ees?maxyear=2009&minyear=1999)
E-Commerce Systems 34

35. Developing a RESTful Web Service in Netbeans
Create a new project by choosing New → Project from the File
menu to open the New Project Wizard dialog. In the dialog,
choose Web from the category list on the left and choose Web
Application from the Project list on the right. Click the Next
button to continue.
E-Commerce Systems 35

36. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 36

37. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 37

38. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 38

39. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 39

40. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 40

41. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 41

42. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 42

43. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 43

44. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 44

45. Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 45

46. Generating RESTful Web Services from Entity Classes
E-Commerce Systems 46

47. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 47

48. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 48

49. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 49

50. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 50

51. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 51

52. AccountFacadeREST.java
package service;
import entities.Account;
import java.util.List;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
@Stateless
@Path("accounts")
public class AccountFacadeREST extends AbstractFacade<Account> {
@PersistenceContext(unitName = "AccountJSFExamplePU")
private EntityManager em;
public AccountFacadeREST() {
super(Account.class);
}
@POST
@Override
@Consumes({"application/xml", "application/json"})
public void create(Account entity) {
super.create(entity);
}
E-Commerce Systems 52

53. AccountFacadeREST.java (cont.)
@PUT
@Path("{id}")
@Consumes({"application/xml", "application/json"})
public void edit(@PathParam("id") Long id, Account entity) {
super.edit(entity);
}
@POST
@Path("{id}")
@Consumes({"application/xml", "application/json"})
public void editPost(@PathParam("id") Long id, Account entity) {
super.edit(entity);
}
@DELETE
@Path("{id}")
public void remove(@PathParam("id") Long id) {
super.remove(super.find(id));
}
@GET
@Path("{id}")
@Produces({"application/xml", "application/json"})
public Account find(@PathParam("id") Long id) {
return super.find(id);
}
E-Commerce Systems 53

54. AccountFacadeREST.java (cont.)
@GET
@Override
@Produces({"application/xml", "application/json"})
public List<Account> findAll() {
return super.findAll();
}
@GET
@Path("{from}/{to}")
@Produces({"application/xml", "application/json"})
public List<Account> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) {
return super.findRange(new int[]{from, to});
}
@GET
@Path("count")
@Produces("text/plain")
public String countREST() {
return String.valueOf(super.count());
}
@Override
protected EntityManager getEntityManager() {
return em;
}
E-Commerce Systems 54

55. Generating RESTful Web Services from Entity Classes
(cont.)
Cross-origin resource sharing
E-Commerce Systems 55

56. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 56

57. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 57

58. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 58

59. Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 59

60. Creating AngularJS Application with RESTful Web
Services Backend
Acknowledgment:
Simple Example angularJS and JavaEE, by Lisa Spitzl.
http://www.youtube.com/watch?v=qSbHiake3aE
E-Commerce Systems 60

61. services.js
Create a factory object: Accounts, then define the method
findAll to returns all the accounts.
E-Commerce Systems 61

62. controllers.js
E-Commerce Systems 62

63. partial1.html
E-Commerce Systems 63

64. Result
E-Commerce Systems 64

65. The Affable Bean application with HTML5 front-end
The Affable Bean application with HTML5 front-end.
https://bitbucket.org/dkonecny/affable-bean

66. The Affable Bean application with HTML5 front-end
E-Commerce Systems 66

67. Questions?