gordon daniels 9 Years Ago thank you for sharing this. I personally like node.js but its a close call :-) Many javascript developers like Angular because of Google being behind it. I learned a couple of interesting things from this blog. I've recently considered writing portlets in node.js but was concerned with how difficult it might be. Your article helped me to understand that effort better.thanks again Please sign in to reply. Reply as... Cancel Jan Eerdekens gordon daniels 9 Years Ago Thank you for the kind comments... node.js in Liferay... sounds like a nice new challenge for a future blog post! Please sign in to reply. Reply as... Cancel
Jan Eerdekens gordon daniels 9 Years Ago Thank you for the kind comments... node.js in Liferay... sounds like a nice new challenge for a future blog post! Please sign in to reply. Reply as... Cancel
Jeffrey Paul Handa 9 Years Ago Great information, thanks for sharing! Please sign in to reply. Reply as... Cancel
Gregory Amerson 9 Years Ago Hey Jan,Regarding your comment:> the IDE support (code colouring, code completion, debugging, ...) isn't up to what I'm used toLiferay IDE 2.2 will be released next week and if you install it along with Angularjs-eclipse plugin you can get all of that support you are used to... see here:http://i.imgur.com/9wSrLaE.pnghttp://i.imgur.com/1ekMNvd.pnghttp://i.imgur.com/GWxUVae.pnghttp://i.imgur.com/2qxB1Ri.pnghttp://i.imgur.com/y9vgoJm.pngOnce Liferay IDE 2.2 I'll post more details in a new blog post. Please sign in to reply. Reply as... Cancel Jan Eerdekens Gregory Amerson 9 Years Ago Hi Greg, That looks sweet. Might have to give Eclipse/Liferay IDE another chance (bene working in IntelliJ most of the time during the last couple of years). Please sign in to reply. Reply as... Cancel Gregory Amerson Jan Eerdekens 9 Years Ago Drop me a line if you want to try it out... gregory.amerson@liferay.comAlso you can checkout my changes to your angular project here that make things work well in Liferay IDE here: https://github.com/gamerson/angular-portlet/tree/ide Please sign in to reply. Reply as... Cancel
Jan Eerdekens Gregory Amerson 9 Years Ago Hi Greg, That looks sweet. Might have to give Eclipse/Liferay IDE another chance (bene working in IntelliJ most of the time during the last couple of years). Please sign in to reply. Reply as... Cancel Gregory Amerson Jan Eerdekens 9 Years Ago Drop me a line if you want to try it out... gregory.amerson@liferay.comAlso you can checkout my changes to your angular project here that make things work well in Liferay IDE here: https://github.com/gamerson/angular-portlet/tree/ide Please sign in to reply. Reply as... Cancel
Gregory Amerson Jan Eerdekens 9 Years Ago Drop me a line if you want to try it out... gregory.amerson@liferay.comAlso you can checkout my changes to your angular project here that make things work well in Liferay IDE here: https://github.com/gamerson/angular-portlet/tree/ide Please sign in to reply. Reply as... Cancel
Terrence Watson 9 Years Ago Very nice! Thank you for this. I'm an Angular developer new to Liferay, so I was looking to combine my old knowledge with the new Liferay stuff. Please sign in to reply. Reply as... Cancel
Ashok Kumar 9 Years Ago Thank you very much. I am exactly working on the same with IBM websphere PortletsI am using ng-include directive to include partial views in IBM websphere Portlet.The code snippet is below1.Defining render URL <portlet:defineObjects /> <portlet:renderURL var="resourceURL" windowState="MINIMIZED" portletMode="view"> <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:renderURL>2.Main.js <script> var myApp = angular.module("App", []); myApp.controller("myCtrl", function ($scope ) { $scope.page='<%=resourceURL%>'; });</script>3.Home.jsp<div id="<portlet:namespace />main" data-ng-app="App" data-ng-controller="myCtrl" > <div ng-include src="'page'"></div><div>But the partials are not included. Can anyone suggest me how to fix this?Am i missing anything? Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago Two things that might cause this could be that your renderURL doesn't have a portletID param set and in my tests I used the windowState 'exclusive'. Also the src attribute on your ng-include div seems to have single quotes inside of double quotes and I think only one of those is needed. The combination might cause the src to be wrongly interpreted. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.Windowstate exclusive is not defined in portlet2.0 APIhttps://portals.apache.org/pluto/portlet-2.0-apidocs/javax/portlet/WindowState.htmlSo relavent window state "MINIMIZED" is used.2.I checked with removing single quotes inside double quotes of ng-include div, but still no luck3.<portlet:renderURL is generating ID and adding to URL. The output of resourceURL is ..............dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/ren/m=view/s=minimized/p=jspPage=QCPpartialsQCPlist.html/=/#Z7_01H8HCS0JOVV80AI5APA2G10K0 Any other clues? Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago The windowState might be Liferay specific, but in my case that make sure that I only get the content of my partial without any other portlet chrome around it, but regardless of the windowState you should always get something.The URL generation is portal specific and I'm not really familiar with Websphere's behavior in that respect. Something you might try is to actually make a real resourceURL instead of a renderURL. In that way you should be able to get into Java portlet code of your own where you could fetch the partial from the classpath. It isn't a real solution, but could work as a workaround.One possible cause of your problem could also be the location of your partial in your WAR. They should be accessible starting from the root. So your list.html should be located in a directory named partials that is located in the root of the WAR. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.I tried with resourceURL , <portlet:resourceURL var="myResourceURL" > <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:resourceURL>the output of this myResourceURL is ...........dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/res/c=cacheLevelPage/p=jspPage=QCPpartialsQCPlist.html/=/ 2. my directory structure is MyWAR WEB-INF views home.jsp partials list.htmli tried with both "/partials/list.html" and "/WEB-INF/partials/list.html", but not included Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Ashok Kumar 9 Years Ago Two things that might cause this could be that your renderURL doesn't have a portletID param set and in my tests I used the windowState 'exclusive'. Also the src attribute on your ng-include div seems to have single quotes inside of double quotes and I think only one of those is needed. The combination might cause the src to be wrongly interpreted. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.Windowstate exclusive is not defined in portlet2.0 APIhttps://portals.apache.org/pluto/portlet-2.0-apidocs/javax/portlet/WindowState.htmlSo relavent window state "MINIMIZED" is used.2.I checked with removing single quotes inside double quotes of ng-include div, but still no luck3.<portlet:renderURL is generating ID and adding to URL. The output of resourceURL is ..............dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/ren/m=view/s=minimized/p=jspPage=QCPpartialsQCPlist.html/=/#Z7_01H8HCS0JOVV80AI5APA2G10K0 Any other clues? Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago The windowState might be Liferay specific, but in my case that make sure that I only get the content of my partial without any other portlet chrome around it, but regardless of the windowState you should always get something.The URL generation is portal specific and I'm not really familiar with Websphere's behavior in that respect. Something you might try is to actually make a real resourceURL instead of a renderURL. In that way you should be able to get into Java portlet code of your own where you could fetch the partial from the classpath. It isn't a real solution, but could work as a workaround.One possible cause of your problem could also be the location of your partial in your WAR. They should be accessible starting from the root. So your list.html should be located in a directory named partials that is located in the root of the WAR. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.I tried with resourceURL , <portlet:resourceURL var="myResourceURL" > <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:resourceURL>the output of this myResourceURL is ...........dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/res/c=cacheLevelPage/p=jspPage=QCPpartialsQCPlist.html/=/ 2. my directory structure is MyWAR WEB-INF views home.jsp partials list.htmli tried with both "/partials/list.html" and "/WEB-INF/partials/list.html", but not included Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Ashok Kumar Jan Eerdekens 9 Years Ago 1.Windowstate exclusive is not defined in portlet2.0 APIhttps://portals.apache.org/pluto/portlet-2.0-apidocs/javax/portlet/WindowState.htmlSo relavent window state "MINIMIZED" is used.2.I checked with removing single quotes inside double quotes of ng-include div, but still no luck3.<portlet:renderURL is generating ID and adding to URL. The output of resourceURL is ..............dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/ren/m=view/s=minimized/p=jspPage=QCPpartialsQCPlist.html/=/#Z7_01H8HCS0JOVV80AI5APA2G10K0 Any other clues? Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago The windowState might be Liferay specific, but in my case that make sure that I only get the content of my partial without any other portlet chrome around it, but regardless of the windowState you should always get something.The URL generation is portal specific and I'm not really familiar with Websphere's behavior in that respect. Something you might try is to actually make a real resourceURL instead of a renderURL. In that way you should be able to get into Java portlet code of your own where you could fetch the partial from the classpath. It isn't a real solution, but could work as a workaround.One possible cause of your problem could also be the location of your partial in your WAR. They should be accessible starting from the root. So your list.html should be located in a directory named partials that is located in the root of the WAR. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.I tried with resourceURL , <portlet:resourceURL var="myResourceURL" > <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:resourceURL>the output of this myResourceURL is ...........dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/res/c=cacheLevelPage/p=jspPage=QCPpartialsQCPlist.html/=/ 2. my directory structure is MyWAR WEB-INF views home.jsp partials list.htmli tried with both "/partials/list.html" and "/WEB-INF/partials/list.html", but not included Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Ashok Kumar 9 Years Ago The windowState might be Liferay specific, but in my case that make sure that I only get the content of my partial without any other portlet chrome around it, but regardless of the windowState you should always get something.The URL generation is portal specific and I'm not really familiar with Websphere's behavior in that respect. Something you might try is to actually make a real resourceURL instead of a renderURL. In that way you should be able to get into Java portlet code of your own where you could fetch the partial from the classpath. It isn't a real solution, but could work as a workaround.One possible cause of your problem could also be the location of your partial in your WAR. They should be accessible starting from the root. So your list.html should be located in a directory named partials that is located in the root of the WAR. Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago 1.I tried with resourceURL , <portlet:resourceURL var="myResourceURL" > <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:resourceURL>the output of this myResourceURL is ...........dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/res/c=cacheLevelPage/p=jspPage=QCPpartialsQCPlist.html/=/ 2. my directory structure is MyWAR WEB-INF views home.jsp partials list.htmli tried with both "/partials/list.html" and "/WEB-INF/partials/list.html", but not included Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Ashok Kumar Jan Eerdekens 9 Years Ago 1.I tried with resourceURL , <portlet:resourceURL var="myResourceURL" > <portlet:param name="jspPage" value="/partials/list.html" /> </portlet:resourceURL>the output of this myResourceURL is ...........dl5/d5/L2dBISEvZ0FBIS9nQSEh/pw/Z7_01H8HCS0JOVV80AI5APA2G10K0/res/c=cacheLevelPage/p=jspPage=QCPpartialsQCPlist.html/=/ 2. my directory structure is MyWAR WEB-INF views home.jsp partials list.htmli tried with both "/partials/list.html" and "/WEB-INF/partials/list.html", but not included Please sign in to reply. Reply as... Cancel Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Ashok Kumar 9 Years Ago For a correct resourceURL you'll need to do a bit more. You'll have to provide a resource ID (see the releaseFactory code in https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/webapp/js/service.js) and you'll have to implement a serveResource method where you retrieve your partial and return its contents (see https://github.com/planetsizebrain/angular-portlet/blob/master/src/main/java/be/aca/liferay/angular/portlet/BasePortlet.java).One strange thing about the URL results you are getting is that they seem incomplete aka without host, port, context... Please sign in to reply. Reply as... Cancel Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
Ashok Kumar Jan Eerdekens 9 Years Ago Thank you very much Jan.i will look work in those lines....Your help is very much appreciated. Please sign in to reply. Reply as... Cancel
(You) 8 Years Ago [...] AngularJS is a great framework for Single Page Applications (SPAs) – it’s easy to learn and use. There’s no reason not to (and actually every reason to) create your Liferay portlets as AngularJS... [...] Read More Please sign in to reply. Reply as... Cancel
Joseph Toman 8 Years Ago Nice article. I have to wonder though, after all the hoops you had to jump through to get Angular.js to run in a portal environment, where's the benefit, other than using the new Google backed hotness? It does not appear to do anything that other front-end frameworks don't do, some of which are a lot more portal friendly. Please sign in to reply. Reply as... Cancel Jan Eerdekens Joseph Toman 8 Years Ago Hi Joseph,There's indeed only a real benefit for people that are already using/know AngularJS from making normal non-portal applications. For people, like myself, that are already using an established framework (JSF in our case), there are no real reasons to switch except for the 'new (Google) hotness' one. This is also my conclusion: while I was able to get it to work (certainly after some more research: see my second Angular post) I didn't find any reason to switch from our current JSF 2.0 + Primefaces 5 toolset (which nicely keeps us away from most Javascript weirdness). Please sign in to reply. Reply as... Cancel
Jan Eerdekens Joseph Toman 8 Years Ago Hi Joseph,There's indeed only a real benefit for people that are already using/know AngularJS from making normal non-portal applications. For people, like myself, that are already using an established framework (JSF in our case), there are no real reasons to switch except for the 'new (Google) hotness' one. This is also my conclusion: while I was able to get it to work (certainly after some more research: see my second Angular post) I didn't find any reason to switch from our current JSF 2.0 + Primefaces 5 toolset (which nicely keeps us away from most Javascript weirdness). Please sign in to reply. Reply as... Cancel
Paco Alías 8 Years Ago First of all, I'd like to thank you for this post. I found it very usefull. I have a question about the use of Liferay.Language.get in your directive.As it is a synchronous service, it will be retarding the page load. How can we make this call asynchronous for a better UX ?Thank you,Paco Please sign in to reply. Reply as... Cancel Jan Eerdekens Paco Alías 8 Years Ago Hi Paco, I got the same remark from Pier Paolo Ramon and tried to address it in my follow up post, More Angular Adventures in Liferay Land: https://www.liferay.com/web/fimez/blog/-/blogs/more-angular-adventures-in-liferay-land. In this 2nd post I used the Angular Translate module and some Java code that generates JSONs for the Liferay Language bundles to hopefully work around this synchronous problem. Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you. What about hooking Liferay.Language.get function to be asynchronous or using a promise in your directive? Is it a crazy idea? Please sign in to reply. Reply as... Cancel Jan Eerdekens Paco Alías 8 Years Ago That would definitely be an option, but except for overwriting the actual Liferay.Language JS file I don't think there's an easy way to hook that part of Liferay. Adding a promise might be an option, but when I took my 2nd shot at the i18n part (and also validation) I decided to try and use some readily available and widely used Angular libraries and the one I ended up with for i18n didn't have an easy way to hook back in to Liferay.Language.get and so I went a completely different way.So if you want to try something else I'd try the promise option. Let me know what your results are! Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you for your response. I'll take a look at your second post. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Paco Alías 8 Years Ago Hi Paco, I got the same remark from Pier Paolo Ramon and tried to address it in my follow up post, More Angular Adventures in Liferay Land: https://www.liferay.com/web/fimez/blog/-/blogs/more-angular-adventures-in-liferay-land. In this 2nd post I used the Angular Translate module and some Java code that generates JSONs for the Liferay Language bundles to hopefully work around this synchronous problem. Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you. What about hooking Liferay.Language.get function to be asynchronous or using a promise in your directive? Is it a crazy idea? Please sign in to reply. Reply as... Cancel Jan Eerdekens Paco Alías 8 Years Ago That would definitely be an option, but except for overwriting the actual Liferay.Language JS file I don't think there's an easy way to hook that part of Liferay. Adding a promise might be an option, but when I took my 2nd shot at the i18n part (and also validation) I decided to try and use some readily available and widely used Angular libraries and the one I ended up with for i18n didn't have an easy way to hook back in to Liferay.Language.get and so I went a completely different way.So if you want to try something else I'd try the promise option. Let me know what your results are! Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you for your response. I'll take a look at your second post. Please sign in to reply. Reply as... Cancel
Paco Alías Jan Eerdekens 8 Years Ago Thank you. What about hooking Liferay.Language.get function to be asynchronous or using a promise in your directive? Is it a crazy idea? Please sign in to reply. Reply as... Cancel Jan Eerdekens Paco Alías 8 Years Ago That would definitely be an option, but except for overwriting the actual Liferay.Language JS file I don't think there's an easy way to hook that part of Liferay. Adding a promise might be an option, but when I took my 2nd shot at the i18n part (and also validation) I decided to try and use some readily available and widely used Angular libraries and the one I ended up with for i18n didn't have an easy way to hook back in to Liferay.Language.get and so I went a completely different way.So if you want to try something else I'd try the promise option. Let me know what your results are! Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you for your response. I'll take a look at your second post. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Paco Alías 8 Years Ago That would definitely be an option, but except for overwriting the actual Liferay.Language JS file I don't think there's an easy way to hook that part of Liferay. Adding a promise might be an option, but when I took my 2nd shot at the i18n part (and also validation) I decided to try and use some readily available and widely used Angular libraries and the one I ended up with for i18n didn't have an easy way to hook back in to Liferay.Language.get and so I went a completely different way.So if you want to try something else I'd try the promise option. Let me know what your results are! Please sign in to reply. Reply as... Cancel Paco Alías Jan Eerdekens 8 Years Ago Thank you for your response. I'll take a look at your second post. Please sign in to reply. Reply as... Cancel
Paco Alías Jan Eerdekens 8 Years Ago Thank you for your response. I'll take a look at your second post. Please sign in to reply. Reply as... Cancel
Peter Bogun 8 Years Ago Hello Jan,Your article was very helpful. I am trying to get the current logged in user screen name in a liferay project that is using angular in portlets.Specifically I am getting the user ID with ThemeDisplay.getUserId(); and then trying to use Liferay.Service.Portal.User.getUserById as shown in an AUI script example here: https://gwofu.wordpress.com/2013/05/27/liferay-javascript-get-user-object/My issue is that 'liferay-service' does not include Service.Portal and there doesn't seem to be anyone else with a similar issue and no documentation anywhere. Do you have any insight/thoughts on this issue? Please sign in to reply. Reply as... Cancel alejandro soto Peter Bogun 8 Years Ago Hi Peter i think you should try that with Liferay.Service instead:Liferay.Service( '/user/get-user-by-id', { userId: 1000 }, function(obj) { console.log(obj); }); Please sign in to reply. Reply as... Cancel Peter Bogun alejandro soto 8 Years Ago Alejandro, thank you for such a fast reply. Your solution worked. I appreciate your help very much! Please sign in to reply. Reply as... Cancel
alejandro soto Peter Bogun 8 Years Ago Hi Peter i think you should try that with Liferay.Service instead:Liferay.Service( '/user/get-user-by-id', { userId: 1000 }, function(obj) { console.log(obj); }); Please sign in to reply. Reply as... Cancel Peter Bogun alejandro soto 8 Years Ago Alejandro, thank you for such a fast reply. Your solution worked. I appreciate your help very much! Please sign in to reply. Reply as... Cancel
Peter Bogun alejandro soto 8 Years Ago Alejandro, thank you for such a fast reply. Your solution worked. I appreciate your help very much! Please sign in to reply. Reply as... Cancel
Gyle Fernandez 8 Years Ago Hi this is great but unfortunately it isn't working for me. Followed the instructions up to the simple hello world but angular throws the no module error: Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.3.9/$injector/nomod?What I'm trying to do is to output a sample .json file within the portlet but no luck. Please sign in to reply. Reply as... Cancel Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I haven't encountered that error myself (yet), but have noticed that different versions of Liferay + Angular behave differently. What version of Liferay are you using? If you can provide me your code I'd be happy to take a look at it and try it out myself? Please sign in to reply. Reply as... Cancel Gyle Fernandez Jan Eerdekens 8 Years Ago Hi Jan! Thanks for the response.I'm using liferay 6.2 ee sp13 and angularjs 1.3.9. Tried loading the js files via liferay-portlet.xml and as plain <script src> inside the jsp but to no avail. Here are my codes:----main.js---function bootstrap(id, portletId) { var app = angular.module(id); /* services */ app.factory("services", ['$http', function($http) { var serviceBase = '/data/local.json'; var obj = {}; obj.getData = function(){ return $http.get(serviceBase) } }]); /*controllers*/ app.controller('listCtrl', function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; }); }); angular.bootstrap(document.getElementById(id),[id]);}----view.jsp----<div id="<portlet:namespace />app" class="co-app"><table ng-controller="listCtrl" id="listCtrl"> <thead> <tr> <th>Date</th> </tr> </thead> <tbody> <tr ng-repeat="data in alldata"> <td>{{data.effectiveDateTime}}</td> </tr> </tbody> </table></div><script>bootstrap('<portlet:namespace />app', '<portlet:namespace />'); </script> Please sign in to reply. Reply as... Cancel alejandro soto Gyle Fernandez 8 Years Ago Hi, i see you have like this,app.controller('listCtrl', function ($scope, services) {services.getData ().then(function(data){$scope.alldata = data.data;});});can you try something like app.controller('listCtrl', ['$scope', 'services' function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; });}]);probably you have the liferay js minifier turned ON, so the injection gets messed up Please sign in to reply. Reply as... Cancel alejandro soto alejandro soto 8 Years Ago sorry i missed comma after 'services' Please sign in to reply. Reply as... Cancel Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I added your code (and Angular version) to my Hello World sample and tested it Liferay 6.2 EE SP13, but got a different error: must return a value from $get factory method.When I add a return to the factory and change the URL for the JSON file so it points to something inside my portlet I can get the code to work (you'll also need to turn off the Liferay minifier in your portal-ext.properties: minifier.enabled=false). Because I tested it quickly I just put all the code inside my view.jsp: https://gist.github.com/planetsizebrain/eb222c689d2dd188a34d (my portlet's name is 'angular-hello-world-portlet' and I created a directory 'data' inside my Maven project's webapp directory and created a simple local.json file that had an array of objects with an 'effectiveDateTime' field). Please sign in to reply. Reply as... Cancel alejandro soto Jan Eerdekens 8 Years Ago cool i still see in your gist, [ .. ] missing in your controller, so that will be broken when minifier on Please sign in to reply. Reply as... Cancel Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel
Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I haven't encountered that error myself (yet), but have noticed that different versions of Liferay + Angular behave differently. What version of Liferay are you using? If you can provide me your code I'd be happy to take a look at it and try it out myself? Please sign in to reply. Reply as... Cancel Gyle Fernandez Jan Eerdekens 8 Years Ago Hi Jan! Thanks for the response.I'm using liferay 6.2 ee sp13 and angularjs 1.3.9. Tried loading the js files via liferay-portlet.xml and as plain <script src> inside the jsp but to no avail. Here are my codes:----main.js---function bootstrap(id, portletId) { var app = angular.module(id); /* services */ app.factory("services", ['$http', function($http) { var serviceBase = '/data/local.json'; var obj = {}; obj.getData = function(){ return $http.get(serviceBase) } }]); /*controllers*/ app.controller('listCtrl', function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; }); }); angular.bootstrap(document.getElementById(id),[id]);}----view.jsp----<div id="<portlet:namespace />app" class="co-app"><table ng-controller="listCtrl" id="listCtrl"> <thead> <tr> <th>Date</th> </tr> </thead> <tbody> <tr ng-repeat="data in alldata"> <td>{{data.effectiveDateTime}}</td> </tr> </tbody> </table></div><script>bootstrap('<portlet:namespace />app', '<portlet:namespace />'); </script> Please sign in to reply. Reply as... Cancel alejandro soto Gyle Fernandez 8 Years Ago Hi, i see you have like this,app.controller('listCtrl', function ($scope, services) {services.getData ().then(function(data){$scope.alldata = data.data;});});can you try something like app.controller('listCtrl', ['$scope', 'services' function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; });}]);probably you have the liferay js minifier turned ON, so the injection gets messed up Please sign in to reply. Reply as... Cancel alejandro soto alejandro soto 8 Years Ago sorry i missed comma after 'services' Please sign in to reply. Reply as... Cancel Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I added your code (and Angular version) to my Hello World sample and tested it Liferay 6.2 EE SP13, but got a different error: must return a value from $get factory method.When I add a return to the factory and change the URL for the JSON file so it points to something inside my portlet I can get the code to work (you'll also need to turn off the Liferay minifier in your portal-ext.properties: minifier.enabled=false). Because I tested it quickly I just put all the code inside my view.jsp: https://gist.github.com/planetsizebrain/eb222c689d2dd188a34d (my portlet's name is 'angular-hello-world-portlet' and I created a directory 'data' inside my Maven project's webapp directory and created a simple local.json file that had an array of objects with an 'effectiveDateTime' field). Please sign in to reply. Reply as... Cancel alejandro soto Jan Eerdekens 8 Years Ago cool i still see in your gist, [ .. ] missing in your controller, so that will be broken when minifier on Please sign in to reply. Reply as... Cancel Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel
Gyle Fernandez Jan Eerdekens 8 Years Ago Hi Jan! Thanks for the response.I'm using liferay 6.2 ee sp13 and angularjs 1.3.9. Tried loading the js files via liferay-portlet.xml and as plain <script src> inside the jsp but to no avail. Here are my codes:----main.js---function bootstrap(id, portletId) { var app = angular.module(id); /* services */ app.factory("services", ['$http', function($http) { var serviceBase = '/data/local.json'; var obj = {}; obj.getData = function(){ return $http.get(serviceBase) } }]); /*controllers*/ app.controller('listCtrl', function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; }); }); angular.bootstrap(document.getElementById(id),[id]);}----view.jsp----<div id="<portlet:namespace />app" class="co-app"><table ng-controller="listCtrl" id="listCtrl"> <thead> <tr> <th>Date</th> </tr> </thead> <tbody> <tr ng-repeat="data in alldata"> <td>{{data.effectiveDateTime}}</td> </tr> </tbody> </table></div><script>bootstrap('<portlet:namespace />app', '<portlet:namespace />'); </script> Please sign in to reply. Reply as... Cancel alejandro soto Gyle Fernandez 8 Years Ago Hi, i see you have like this,app.controller('listCtrl', function ($scope, services) {services.getData ().then(function(data){$scope.alldata = data.data;});});can you try something like app.controller('listCtrl', ['$scope', 'services' function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; });}]);probably you have the liferay js minifier turned ON, so the injection gets messed up Please sign in to reply. Reply as... Cancel alejandro soto alejandro soto 8 Years Ago sorry i missed comma after 'services' Please sign in to reply. Reply as... Cancel Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I added your code (and Angular version) to my Hello World sample and tested it Liferay 6.2 EE SP13, but got a different error: must return a value from $get factory method.When I add a return to the factory and change the URL for the JSON file so it points to something inside my portlet I can get the code to work (you'll also need to turn off the Liferay minifier in your portal-ext.properties: minifier.enabled=false). Because I tested it quickly I just put all the code inside my view.jsp: https://gist.github.com/planetsizebrain/eb222c689d2dd188a34d (my portlet's name is 'angular-hello-world-portlet' and I created a directory 'data' inside my Maven project's webapp directory and created a simple local.json file that had an array of objects with an 'effectiveDateTime' field). Please sign in to reply. Reply as... Cancel alejandro soto Jan Eerdekens 8 Years Ago cool i still see in your gist, [ .. ] missing in your controller, so that will be broken when minifier on Please sign in to reply. Reply as... Cancel Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel
alejandro soto Gyle Fernandez 8 Years Ago Hi, i see you have like this,app.controller('listCtrl', function ($scope, services) {services.getData ().then(function(data){$scope.alldata = data.data;});});can you try something like app.controller('listCtrl', ['$scope', 'services' function ($scope, services) { services.getData ().then(function(data){ $scope.alldata = data.data; });}]);probably you have the liferay js minifier turned ON, so the injection gets messed up Please sign in to reply. Reply as... Cancel alejandro soto alejandro soto 8 Years Ago sorry i missed comma after 'services' Please sign in to reply. Reply as... Cancel
alejandro soto alejandro soto 8 Years Ago sorry i missed comma after 'services' Please sign in to reply. Reply as... Cancel
Jan Eerdekens Gyle Fernandez 8 Years Ago Hi Gyle,I added your code (and Angular version) to my Hello World sample and tested it Liferay 6.2 EE SP13, but got a different error: must return a value from $get factory method.When I add a return to the factory and change the URL for the JSON file so it points to something inside my portlet I can get the code to work (you'll also need to turn off the Liferay minifier in your portal-ext.properties: minifier.enabled=false). Because I tested it quickly I just put all the code inside my view.jsp: https://gist.github.com/planetsizebrain/eb222c689d2dd188a34d (my portlet's name is 'angular-hello-world-portlet' and I created a directory 'data' inside my Maven project's webapp directory and created a simple local.json file that had an array of objects with an 'effectiveDateTime' field). Please sign in to reply. Reply as... Cancel alejandro soto Jan Eerdekens 8 Years Ago cool i still see in your gist, [ .. ] missing in your controller, so that will be broken when minifier on Please sign in to reply. Reply as... Cancel Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel
alejandro soto Jan Eerdekens 8 Years Ago cool i still see in your gist, [ .. ] missing in your controller, so that will be broken when minifier on Please sign in to reply. Reply as... Cancel Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel
Jan Eerdekens alejandro soto 8 Years Ago indeed, but I wanted to stay as close to his example as possible, but indeed with the minifier on it would need to be changed. Strangely enough I couldn't reproduce the exact error, but got a different one, which was easily fixed after which the code worked for me with the minifier off. Please sign in to reply. Reply as... Cancel