{"id":28363,"date":"2014-07-30T10:00:14","date_gmt":"2014-07-30T07:00:14","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=28363"},"modified":"2014-12-11T12:02:39","modified_gmt":"2014-12-11T10:02:39","slug":"java-ee-7-with-angular-js-part-1","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html","title":{"rendered":"Java EE 7 with Angular JS \u2013 Part 1"},"content":{"rendered":"<p>Today\u2019s post will show you how to build a very simple application using <a href=\"https:\/\/docs.oracle.com\/javaee\/7\/tutorial\/index.html\">Java EE 7<\/a> and <a href=\"http:\/\/angularjs.org\/\">Angular JS<\/a>. Before going there let me tell you a brief story:<\/p>\n<p>I have to confess that I was never a big fan of Javascript, but I still remember the first time I have used it. I don\u2019t remember the year exactly, but probably around mid 90\u2032s. I had a page with 3 frames (yes frames! remember those? very popular around that time) and I wanted to reload 2 frames when I clicked a link on the 3rd frame. At the time, Javascript was used to do some fancy stuff on webpages, not every browser have Javascript support and some even required you to turn it on. Fast forwarding to today the landscaped changed dramatically. Javascript is a full development stack now and you can develop entire applications written only in Javascript. Unfortunately for me, sometimes I still think I\u2019m back in the 90\u2032s and don\u2019t give enough credit to Javascript, so this is my attempt to get to know Javascript better.<\/p>\n<h4>Why Java EE 7?<\/h4>\n<p>Well, I like Java and the new Java EE version is pretty good. Less verbose and very fast using <a href=\"http:\/\/www.wildfly.org\/\">Wildfly<\/a> or <a href=\"https:\/\/glassfish.java.net\/\">Glassfish<\/a>. It provides you with a large set of specifications to suit your needs and it\u2019s a standard in the Java world.<\/p>\n<h4>Why Angular JS?<\/h4>\n<p>I\u2019m probably following the big hype around Angular here. Since I don\u2019t have much experience with Javascript I don\u2019t know the offers very well, so I\u2019m just following advice of some friends and I have also noticed a big acceptance of Angular in the last Devoxx. Every room with an Angular talk was full, so I wanted to give it a try and found out for myself.<\/p>\n<h2>The Application<\/h2>\n<p>For the application, it\u2019s a simple list with pagination and a REST service that feeds the list data. Every time I start a new enterprise project it\u2019s usually the first thing we code: create a table, store some data and list some random data, so I think it\u2019s appropriate.<\/p>\n<h2>The Setup<\/h2>\n<ul>\n<li><a href=\"http:\/\/docs.oracle.com\/javaee\/7\/tutorial\/doc\/home.htm\">Java EE 7<\/a><\/li>\n<li><a href=\"http:\/\/angularjs.org\/\">Angular JS<\/a><\/li>\n<li><a href=\"http:\/\/angular-ui.github.io\/ng-grid\/\">ng-grid<\/a><\/li>\n<li><a href=\"http:\/\/angular-ui.github.io\/bootstrap\/\">UI Bootstrap<\/a><\/li>\n<li><a href=\"http:\/\/www.wildfly.org\/\">Wildfly<\/a><\/li>\n<\/ul>\n<h2>The Code (finally!)<\/h2>\n<h3>Backend \u2013 Java EE 7<\/h3>\n<p>Starting with the backend, let\u2019s define a very simple Entity class (some code is omitted for simplicity):<\/p>\n<p><em>Person.java<\/em><\/p>\n<pre class=\"brush:java\">@Entity\r\npublic class Person {\r\n    @Id\r\n    private Long id;\r\n\r\n    private String name;\r\n\r\n    private String description;\r\n\r\n}<\/pre>\n<p>If you\u2019re not familiar with Java EE JPA specification, this will allow to model an object class into a database table by using the annotation <code>@Entity<\/code> to connect to the database table with the same name and the annotation <code>@Id<\/code> to identify the table primary key.<\/p>\n<p>Following by a <code>persistence.xml<\/code>:<\/p>\n<p><em>persistence.xml<\/em><\/p>\n<pre class=\"brush:xml;wrap-lines:false\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n&lt;persistence version=\"2.1\"\r\n             xmlns=\"http:\/\/xmlns.jcp.org\/xml\/ns\/persistence\"\r\n             xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\r\n             xsi:schemaLocation=\"http:\/\/xmlns.jcp.org\/xml\/ns\/persistence http:\/\/xmlns.jcp.org\/xml\/ns\/persistence\/persistence_2_1.xsd\">\r\n    &lt;persistence-unit name=\"myPU\" transaction-type=\"JTA\">\r\n        &lt;properties>\r\n            &lt;property name=\"javax.persistence.schema-generation.database.action\" value=\"drop-and-create\"\/>\r\n            &lt;property name=\"javax.persistence.schema-generation.create-source\" value=\"script\"\/>\r\n            &lt;property name=\"javax.persistence.schema-generation.drop-source\" value=\"script\"\/>\r\n            &lt;property name=\"javax.persistence.schema-generation.create-script-source\" value=\"sql\/create.sql\"\/>\r\n            &lt;property name=\"javax.persistence.schema-generation.drop-script-source\" value=\"sql\/drop.sql\"\/>\r\n            &lt;property name=\"javax.persistence.sql-load-script-source\" value=\"sql\/load.sql\"\/>\r\n        &lt;\/properties>\r\n    &lt;\/persistence-unit>\r\n&lt;\/persistence><\/pre>\n<p>Two of my favourite new features on Java EE 7: now you can run sql in a standard way by using the properties <code>javax.persistence.schema-generation.*<\/code> and it also binds you to a default datasource if you don\u2019t provide one. So for this case, it\u2019s going to use the internal Wildfly H2 database for our application.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p>Finally, to provide the list data we need to query the database and expose it as a REST service:<\/p>\n<p><em>PersonResource.java<\/em><\/p>\n<pre class=\"brush:java;wrap-lines:false\">@Stateless\r\n@ApplicationPath(\"\/resources\")\r\n@Path(\"persons\")\r\npublic class PersonResource extends Application {\r\n    @PersistenceContext\r\n    private EntityManager entityManager;\r\n\r\n    private Integer countPersons() {\r\n        Query query = entityManager.createQuery(\"SELECT COUNT(p.id) FROM Person p\");\r\n        return ((Long) query.getSingleResult()).intValue();\r\n    }\r\n\r\n    @SuppressWarnings(\"unchecked\")\r\n    private List&lt;Person&gt; findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {\r\n        Query query = entityManager.createQuery(\"SELECT p FROM Person p ORDER BY \" + sortFields + \" \" + sortDirections);\r\n        query.setFirstResult(startPosition);\r\n        query.setMaxResults(maxResults);\r\n        return query.getResultList();\r\n    }\r\n\r\n    public PaginatedListWrapper&lt;Person&gt; findPersons(PaginatedListWrapper&lt;Person&gt; wrapper) {\r\n        wrapper.setTotalResults(countPersons());\r\n        int start = (wrapper.getCurrentPage() - 1) * wrapper.getPageSize();\r\n        wrapper.setList(findPersons(start,\r\n                                    wrapper.getPageSize(),\r\n                                    wrapper.getSortFields(),\r\n                                    wrapper.getSortDirections()));\r\n        return wrapper;\r\n    }\r\n\r\n    @GET\r\n    @Produces(MediaType.APPLICATION_JSON)\r\n    public PaginatedListWrapper&lt;Person&gt; listPersons(@DefaultValue(\"1\")\r\n                                                    @QueryParam(\"page\")\r\n                                                    Integer page,\r\n                                                    @DefaultValue(\"id\")\r\n                                                    @QueryParam(\"sortFields\")\r\n                                                    String sortFields,\r\n                                                    @DefaultValue(\"asc\")\r\n                                                    @QueryParam(\"sortDirections\")\r\n                                                    String sortDirections) {\r\n        PaginatedListWrapper&lt;Person&gt; paginatedListWrapper = new PaginatedListWrapper&lt;&gt;();\r\n        paginatedListWrapper.setCurrentPage(page);\r\n        paginatedListWrapper.setSortFields(sortFields);\r\n        paginatedListWrapper.setSortDirections(sortDirections);\r\n        paginatedListWrapper.setPageSize(5);\r\n        return findPersons(paginatedListWrapper);\r\n    }\r\n}<\/pre>\n<p>The code is exactly as a normal Java POJO, but using the Java EE annotations to enhance the behaviour. <code>@ApplicationPath(\"\/resources\")<\/code> and <code>@Path(\"persons\")<\/code> will expose the REST service at the url <code>yourdomain\/resources\/persons<\/code>, <code>@GET<\/code> marks the logic to be called by the http GET method and <code>@Produces(MediaType.APPLICATION_JSON)<\/code> formats the REST response as JSON format. Pretty cool with only a few annotations.<\/p>\n<p>To make it a little easier to exchange the needed information for the paginated list, I have also created the following wrapper class:<\/p>\n<p><em>PaginatedListWrapper.java<\/em><\/p>\n<pre class=\"brush:java\">public class PaginatedListWrapper&lt;T&gt; {\r\n    private Integer currentPage;\r\n    private Integer pageSize;\r\n    private Integer totalResults;\r\n\r\n    private String sortFields;\r\n    private String sortDirections;\r\n    private List&lt;T&gt; list;\r\n}<\/pre>\n<p>And we are done with the backend stuff.<\/p>\n<h3>UI \u2013 Angular JS<\/h3>\n<p>To display the data we are going to use Angular JS. Angular extends the traditional HTML with additional custom tag attributes to bind data represented in Javascript variables by following a MVC approach. So, lets look to our html page:<\/p>\n<p><em>index.html<\/em><\/p>\n<pre class=\"brush:xml;wrap-lines:false\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- Declares the root element that allows behaviour to be modified through Angular custom HTML tags. --&gt;\r\n&lt;html ng-app=\"persons\"&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;&lt;\/title&gt;\r\n    &lt;script src=\"lib\/angular.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"lib\/jquery-1.9.1.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"lib\/ui-bootstrap-0.10.0.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"lib\/ng-grid.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;script src=\"script\/person.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/bootstrap.min.css\"\/&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/ng-grid.min.css\"\/&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"\/&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;br&gt;\r\n\r\n&lt;div class=\"grid\"&gt;\r\n    &lt;!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.--&gt;\r\n    &lt;div ng-controller=\"personsList\"&gt;\r\n        &lt;!-- Binds the grid component to be displayed. --&gt;\r\n        &lt;div class=\"gridStyle\" ng-grid=\"gridOptions\"&gt;&lt;\/div&gt;\r\n\r\n        &lt;!--  Bind the pagination component to be displayed. --&gt;\r\n        &lt;pagination direction-links=\"true\" boundary-links=\"true\"\r\n                    total-items=\"persons.totalResults\" page=\"persons.currentPage\" items-per-page=\"persons.pageSize\"\r\n                    on-select-page=\"refreshGrid(page)\"&gt;\r\n        &lt;\/pagination&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Apart from the Javascript and CSS declarations there is very little code in there. Very impressive. Angular also have a wide range of ready to use components, so I\u2019m using the <a href=\"http:\/\/angular-ui.github.io\/ng-grid\/\">ng-grid<\/a> to display the data and <a href=\"http:\/\/angular-ui.github.io\/bootstrap\/\">UI Bootstrap<\/a> that provides a pagination component. The ng-grid also have a pagination component, but I liked the UI Bootstrap pagination component more.<\/p>\n<p>There is something still missing. The Javascript file where everything happens:<\/p>\n<p><em>person.js<\/em><\/p>\n<pre class=\"brush:java;wrap-lines:false\">var app = angular.module('persons', ['ngGrid', 'ui.bootstrap']);\r\n\/\/ Create a controller with name personsList to bind to the html page.\r\napp.controller('personsList', function ($scope, $http) {\r\n    \/\/ Makes the REST request to get the data to populate the grid.\r\n    $scope.refreshGrid = function (page) {\r\n        $http({\r\n            url: 'resources\/persons',\r\n            method: 'GET',\r\n            params: {\r\n                page: page,\r\n                sortFields: $scope.sortInfo.fields[0],\r\n                sortDirections: $scope.sortInfo.directions[0]\r\n            }\r\n        }).success(function (data) {\r\n            $scope.persons = data;\r\n        });\r\n    };\r\n\r\n    \/\/ Do something when the grid is sorted.\r\n    \/\/ The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.\r\n    \/\/ This will allow to watch the sortInfo in the scope for changed and refresh the grid.\r\n    $scope.$on('ngGridEventSorted', function (event, sortInfo) {\r\n        $scope.sortInfo = sortInfo;\r\n    });\r\n\r\n    \/\/ Watch the sortInfo variable. If changes are detected than we need to refresh the grid.\r\n    \/\/ This also works for the first page access, since we assign the initial sorting in the initialize section.\r\n    $scope.$watch('sortInfo', function () {\r\n        $scope.refreshGrid($scope.persons.currentPage);\r\n    }, true);\r\n\r\n    \/\/ Initialize required information: sorting, the first page to show and the grid options.\r\n    $scope.sortInfo = {fields: ['id'], directions: ['asc']};\r\n    $scope.persons = {currentPage : 1};\r\n    $scope.gridOptions = {\r\n        data: 'persons.list',\r\n        useExternalSorting: true,\r\n        sortInfo: $scope.sortInfo\r\n    };\r\n});<\/pre>\n<p>The Javascript code is very clean and organised. Notice how everything gets added to an app controller, allowing you to have multiple separation of concerns on your business logic. To implement the required behaviour we just need to add a few functions to refresh the list by calling our REST service and monitor the grid data to refresh the view. This is the end result:<\/p>\n<p><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/07\/javaee7-angular-list.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-28465\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/07\/javaee7-angular-list.png\" alt=\"javaee7-angular-list\" width=\"630\" height=\"221\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/07\/javaee7-angular-list.png 740w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/07\/javaee7-angular-list-300x105.png 300w\" sizes=\"(max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<h2>Next Steps:<\/h2>\n<p>For the following posts related with these series, I\u2019m planning to:<\/p>\n<ul>\n<li>Implement filtering<\/li>\n<li><a href=\"http:\/\/www.radcortez.com\/java-ee-7-with-angular-js-crud-rest-validations-part-2\/\">Implement detail view<\/a><\/li>\n<li>Implement next \/ prev browsing<\/li>\n<li>Deploy in the cloud<\/li>\n<li><a href=\"http:\/\/www.radcortez.com\/javascript-package-management-npm-bower-grunt\/\">Manage Javascript dependencies<\/a><\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<p>You can clone a full working copy from my github repository and deploy it to Wildfly. You can find instructions there to deploy it. Should also work on Glassfish.<\/p>\n<p><a href=\"https:\/\/github.com\/radcortez\/javaee7-angular\">Java EE \u2013 Angular JS Source<\/a><\/p>\n<h4>Update<\/h4>\n<p>In the meanwhile I have updated the original code with the post about <a href=\"http:\/\/www.radcortez.com\/javascript-package-management-npm-bower-grunt\/\">Manage Javascript dependencies<\/a>. Please, download the original source of this post from the <a href=\"https:\/\/github.com\/radcortez\/javaee7-angular\/releases\/tag\/1.0\">release 1.0<\/a>. You can also clone the repo, and checkout the tag from release 1.0 with the following command: <code>git checkout 1.0<\/code>.<\/p>\n<p>I hope you enjoyed the post! Let me know if you have any comments about this.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/www.radcortez.com\/java-ee-7-with-angular-js-part-1\/\">Java EE 7 with Angular JS \u2013 Part 1<\/a> from our <a href=\"http:\/\/www.javacodegeeks.com\/jcg\">JCG partner<\/a> Roberto Cortez at the <a href=\"http:\/\/www.radcortez.com\/\">Roberto Cortez Java Blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have to confess that I was never a big fan of Javascript, but I still remember the first time I have used it. I don\u2019t &hellip;<\/p>\n","protected":false},"author":592,"featured_media":20900,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[742,803],"class_list":["post-28363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-enterprise-java","tag-angularjs","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Java EE 7 with Angular JS \u2013 Part 1<\/title>\n<meta name=\"description\" content=\"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Java EE 7 with Angular JS \u2013 Part 1\" \/>\n<meta property=\"og:description\" content=\"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/radcortez\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-30T07:00:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-11T10:02:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Roberto Cortez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/radcortez\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto Cortez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html\"},\"author\":{\"name\":\"Roberto Cortez\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/d8791115988e922dbffae8d09223a72e\"},\"headline\":\"Java EE 7 with Angular JS \u2013 Part 1\",\"datePublished\":\"2014-07-30T07:00:14+00:00\",\"dateModified\":\"2014-12-11T10:02:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html\"},\"wordCount\":938,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/javascript-logo.jpg\",\"keywords\":[\"AngularJS\",\"JavaScript\"],\"articleSection\":[\"Enterprise Java\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html\",\"name\":\"Java EE 7 with Angular JS \u2013 Part 1\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/javascript-logo.jpg\",\"datePublished\":\"2014-07-30T07:00:14+00:00\",\"dateModified\":\"2014-12-11T10:02:39+00:00\",\"description\":\"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/javascript-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/javascript-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2014\\\/07\\\/java-ee-7-with-angular-js-part-1.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Enterprise Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\\\/enterprise-java\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Java EE 7 with Angular JS \u2013 Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/d8791115988e922dbffae8d09223a72e\",\"name\":\"Roberto Cortez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g\",\"caption\":\"Roberto Cortez\"},\"description\":\"My name is Roberto Cortez and I was born in Venezuela, but I have spent most of my life in Coimbra \u2013 Portugal, where I currently live. I am a professional Java Developer working in the software development industry, with more than 8 years of experience in business areas like Finance, Insurance and Government. I work with many Java based technologies like JavaEE, Spring, Hibernate, GWT, JBoss AS and Maven just to name a few, always relying on my favorite IDE: IntelliJ IDEA. Most recently, I became a Freelancer \\\/ Independent Contractor. My new position is making me travel around the world (an old dream) to customers, but also to attend Java conferences. The direct contact with the Java community made me want to become an active member in the community itself. For that reason, I have created the Coimbra Java User Group, started to contribute to Open Source on Github and launched my own blog (www.radcortez.com), so I can share some of the knowledge that I gained over the years.\",\"sameAs\":[\"http:\\\/\\\/www.radcortez.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/radcortez\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/radcortez\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/radcortez\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/roberto-cortez\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Java EE 7 with Angular JS \u2013 Part 1","description":"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html","og_locale":"en_US","og_type":"article","og_title":"Java EE 7 with Angular JS \u2013 Part 1","og_description":"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have","og_url":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_author":"https:\/\/www.facebook.com\/radcortez","article_published_time":"2014-07-30T07:00:14+00:00","article_modified_time":"2014-12-11T10:02:39+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg","type":"image\/jpeg"}],"author":"Roberto Cortez","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/radcortez","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Roberto Cortez","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html"},"author":{"name":"Roberto Cortez","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/d8791115988e922dbffae8d09223a72e"},"headline":"Java EE 7 with Angular JS \u2013 Part 1","datePublished":"2014-07-30T07:00:14+00:00","dateModified":"2014-12-11T10:02:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html"},"wordCount":938,"commentCount":6,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg","keywords":["AngularJS","JavaScript"],"articleSection":["Enterprise Java"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html","url":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html","name":"Java EE 7 with Angular JS \u2013 Part 1","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg","datePublished":"2014-07-30T07:00:14+00:00","dateModified":"2014-12-11T10:02:39+00:00","description":"Today\u2019s post will show you how to build a very simple application using Java EE 7 and Angular JS. Before going there let me tell you a brief story: I have","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2014\/01\/javascript-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2014\/07\/java-ee-7-with-angular-js-part-1.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Java","item":"https:\/\/www.javacodegeeks.com\/category\/java"},{"@type":"ListItem","position":3,"name":"Enterprise Java","item":"https:\/\/www.javacodegeeks.com\/category\/java\/enterprise-java"},{"@type":"ListItem","position":4,"name":"Java EE 7 with Angular JS \u2013 Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/d8791115988e922dbffae8d09223a72e","name":"Roberto Cortez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b40fa2b3df6cfc7ad81ed1509ed2a17fe6a200e409fb0aa8d9e2ab72b64b684?s=96&d=mm&r=g","caption":"Roberto Cortez"},"description":"My name is Roberto Cortez and I was born in Venezuela, but I have spent most of my life in Coimbra \u2013 Portugal, where I currently live. I am a professional Java Developer working in the software development industry, with more than 8 years of experience in business areas like Finance, Insurance and Government. I work with many Java based technologies like JavaEE, Spring, Hibernate, GWT, JBoss AS and Maven just to name a few, always relying on my favorite IDE: IntelliJ IDEA. Most recently, I became a Freelancer \/ Independent Contractor. My new position is making me travel around the world (an old dream) to customers, but also to attend Java conferences. The direct contact with the Java community made me want to become an active member in the community itself. For that reason, I have created the Coimbra Java User Group, started to contribute to Open Source on Github and launched my own blog (www.radcortez.com), so I can share some of the knowledge that I gained over the years.","sameAs":["http:\/\/www.radcortez.com\/","https:\/\/www.facebook.com\/radcortez","https:\/\/www.linkedin.com\/in\/radcortez","https:\/\/x.com\/https:\/\/twitter.com\/radcortez"],"url":"https:\/\/www.javacodegeeks.com\/author\/roberto-cortez"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/28363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/592"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=28363"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/28363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/20900"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=28363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=28363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=28363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}