Wolfgang Kubens Il y a 10 années This is great stuff and I hope that more people will get in and share their experience here too. By the way your github link isn't correct: https://github.com/sammso/poc-angular-portlet Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Wolfgang Kubens Il y a 10 années Thanks, I did fix the link. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman Wolfgang Kubens Il y a 10 années Thanks, I did fix the link. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Jan Eerdekens Il y a 10 années Did you also try navigation inside portlets? I got to the same point as you, instanciable portlets, with custom bootstrapping, but can get the default Angular routing stuff to work correctly as it modifies the URL. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Jan Eerdekens Il y a 10 années No I have not. I'm pretty new with AngularJS. I have not tried routes yet, but to make them work properly state should be save somehow if some other portlet is rendering the page, so it is more than just replacing render area with new html. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman Jan Eerdekens Il y a 10 années No I have not. I'm pretty new with AngularJS. I have not tried routes yet, but to make them work properly state should be save somehow if some other portlet is rendering the page, so it is more than just replacing render area with new html. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Alessandro Aglietti Il y a 10 années Hi Sampsa,last month my colleague show me the follow github project that integrate angular and liferay with a fancy strategy.Take a look!https://github.com/dmitri-carpov/angularjs-portlet Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Alessandro Aglietti Il y a 10 années Hi Alessandro,I actually saw this implementation, when I was looking AngluarJS and the idea of that seems to be all the portlet's would share same module8s) and there would be controller per portlet. I felt that it was intrusive to portal. I wanted to also know if I could create instantiable portlets with AngularJS. One of things I have not checked, what if there two angularjs.js references on page, by two portlet plugins which are introducing those? Can AngularJS handle that nicely and take only first one to use and ignore second one. Should the Angular to be integrated somehow AlloyUI's dynamic component loading and is it possible? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman Alessandro Aglietti Il y a 10 années Hi Alessandro,I actually saw this implementation, when I was looking AngluarJS and the idea of that seems to be all the portlet's would share same module8s) and there would be controller per portlet. I felt that it was intrusive to portal. I wanted to also know if I could create instantiable portlets with AngularJS. One of things I have not checked, what if there two angularjs.js references on page, by two portlet plugins which are introducing those? Can AngularJS handle that nicely and take only first one to use and ignore second one. Should the Angular to be integrated somehow AlloyUI's dynamic component loading and is it possible? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Bart Simpson Il y a 10 années I actually tried it months back and I was able to get the routes working. However I did it with 6.1 (when Angular was quite new), will update and check if the same works with 6.2 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Jan Eerdekens Bart Simpson Il y a 10 années I was able to get routes working partially. I made a simple, instanceable, master/detail portlet and placed it 2 times on a page. I was able to navigate separately to a detail page in both portlets, but when I wanted to go back, this only worked in one of the portlets and the second portlet wouldn't return to the main page. Even when I made the routes unique by adding the portlet instance id to it, the navigation still didn't work correctly in some cases.I'm also working on 6.1, so I would be very interested in trying out your code if it is available somewhere? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Jan Eerdekens Bart Simpson Il y a 10 années I was able to get routes working partially. I made a simple, instanceable, master/detail portlet and placed it 2 times on a page. I was able to navigate separately to a detail page in both portlets, but when I wanted to go back, this only worked in one of the portlets and the second portlet wouldn't return to the main page. Even when I made the routes unique by adding the portlet instance id to it, the navigation still didn't work correctly in some cases.I'm also working on 6.1, so I would be very interested in trying out your code if it is available somewhere? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
sanket upadhyay Il y a 10 années Hi,I tried your solution but getting "ReferenceError: angular is not defined" in firebug.Please check this out.Thanks Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman sanket upadhyay Il y a 10 années Hi Sanket,Did you tried the WAR file or the version from github. I just tried the WAR file with 6.2.10 and it did work and also with Firefox 26 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler sanket upadhyay Sampsa Sohlman Il y a 10 années No I tried the github version on lifray 6.0.6. And now I am getting the following error TypeError: g.getDOMNode is not a function both in war version and github version. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman sanket upadhyay Il y a 10 années I have not tried that on this on 6.0.6 at all. So it seems that node does not have that method and that is difference between 6.0.6 and 6.2 API. I think you can still solve this by putting break point to https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19 and see how to get node.and could try change.https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19-L20to following:var domNode = document.getElementById(portletInstanceId);angular.bootstrap(domNode, angularPortlets[portletId]( portletInstanceId, domNode));.. if that does not work change also closure definition:(function(Liferay, angular, document) {..})(Liferay, angular, document); Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman sanket upadhyay Il y a 10 années Hi Sanket,Did you tried the WAR file or the version from github. I just tried the WAR file with 6.2.10 and it did work and also with Firefox 26 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler sanket upadhyay Sampsa Sohlman Il y a 10 années No I tried the github version on lifray 6.0.6. And now I am getting the following error TypeError: g.getDOMNode is not a function both in war version and github version. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman sanket upadhyay Il y a 10 années I have not tried that on this on 6.0.6 at all. So it seems that node does not have that method and that is difference between 6.0.6 and 6.2 API. I think you can still solve this by putting break point to https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19 and see how to get node.and could try change.https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19-L20to following:var domNode = document.getElementById(portletInstanceId);angular.bootstrap(domNode, angularPortlets[portletId]( portletInstanceId, domNode));.. if that does not work change also closure definition:(function(Liferay, angular, document) {..})(Liferay, angular, document); Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
sanket upadhyay Sampsa Sohlman Il y a 10 années No I tried the github version on lifray 6.0.6. And now I am getting the following error TypeError: g.getDOMNode is not a function both in war version and github version. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman sanket upadhyay Il y a 10 années I have not tried that on this on 6.0.6 at all. So it seems that node does not have that method and that is difference between 6.0.6 and 6.2 API. I think you can still solve this by putting break point to https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19 and see how to get node.and could try change.https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19-L20to following:var domNode = document.getElementById(portletInstanceId);angular.bootstrap(domNode, angularPortlets[portletId]( portletInstanceId, domNode));.. if that does not work change also closure definition:(function(Liferay, angular, document) {..})(Liferay, angular, document); Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman sanket upadhyay Il y a 10 années I have not tried that on this on 6.0.6 at all. So it seems that node does not have that method and that is difference between 6.0.6 and 6.2 API. I think you can still solve this by putting break point to https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19 and see how to get node.and could try change.https://github.com/sammso/poc-angular-portlet/blob/master/src/main/webapp/js/angular-portlet.js#L19-L20to following:var domNode = document.getElementById(portletInstanceId);angular.bootstrap(domNode, angularPortlets[portletId]( portletInstanceId, domNode));.. if that does not work change also closure definition:(function(Liferay, angular, document) {..})(Liferay, angular, document); Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Moayad Abu Jaber Il y a 10 années Its a good starter and I like how you integrate angular with liferay stuff. there is some question come to my mind when I think about angularJS in portlet beside what you mention it above. as what we see the structure for angularJS app is seperated with multiple javascript file, in your case put all of them in one file which also cause to the same thing when you need to used generated tags (portlet:actionURL , portlet:resourceURL ...etc) and these tags will not be available in javascript file since the javascript loading first. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Moayad Abu Jaber Il y a 10 années Actually, the Angular portlet callback is initiated after portlet is ready not earlier and Liferay has JavaScript API which you can use for creating portlet URL'sExample:var resourceURL = Liferay.PortletURL.createResourceURL();resourceURL.setParameter("param-one", "param-value");resourceURL.setPortletId(portletInstanceId); var resourceURLLink = resourceURL.toString();But the Liferay.PortletURL is not initialized by default so if you add:AUI().use('liferay-portlet-url', function(A) {});just after function(Liferay, angular) {portletInstanceId you can get by changingangular.portlet.add("poc-angular-portlet", "poc-angular-portlet", function()..toangular.portlet.add("poc-angular-portlet", "poc-angular-portlet", function(portletInstanceId)As this is just example.BTW portletInstanceId is also namespace. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Moayad Abu Jaber Sampsa Sohlman Il y a 10 années Thanks you very much for hint me some good points. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman Moayad Abu Jaber Il y a 10 années Actually, the Angular portlet callback is initiated after portlet is ready not earlier and Liferay has JavaScript API which you can use for creating portlet URL'sExample:var resourceURL = Liferay.PortletURL.createResourceURL();resourceURL.setParameter("param-one", "param-value");resourceURL.setPortletId(portletInstanceId); var resourceURLLink = resourceURL.toString();But the Liferay.PortletURL is not initialized by default so if you add:AUI().use('liferay-portlet-url', function(A) {});just after function(Liferay, angular) {portletInstanceId you can get by changingangular.portlet.add("poc-angular-portlet", "poc-angular-portlet", function()..toangular.portlet.add("poc-angular-portlet", "poc-angular-portlet", function(portletInstanceId)As this is just example.BTW portletInstanceId is also namespace. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Moayad Abu Jaber Sampsa Sohlman Il y a 10 années Thanks you very much for hint me some good points. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Moayad Abu Jaber Sampsa Sohlman Il y a 10 années Thanks you very much for hint me some good points. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
(Vous) Il y a 8 années [...] Using the webservices These are pretty simple in principle; Liferay still uses the dated Axis implementation of SOAP. A list of the services available from Liferay portal can be found at Download... [...] Read More Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Robert Chen Il y a 8 années Hi, Sampsa,Thank you for this blog!I have a question: I created a second portlet in the same package, which is a clone of your portlet -- I just changed the portlet name. I also changed the portlet name in the main.js file. But the second portlet does not display the AngularJS related content. Did I do something wrong?Best regards,Xinsheng Chen Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Jan Eerdekens Robert Chen Il y a 8 années Hi Robert,It is probably some sort of naming issue where something in one Angular portlet inadvertently overwrites something in another. I ran into similar issues while working on my Angular Adventures in Liferay Land posts and while preparing for my Devcon talk. The example portlets for the talk, https://github.com/planetsizebrain/angular-adventures, might be able to help you as you can put multiple of those, different ones + instances of the same, on 1 page and they should keep working. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Jan Eerdekens Il y a 8 années @Robert I don't know .. This was a PoC and I have not done since anything with Angular. @Jan your great DevCon presentation did fill nicely gaps of this blog post. Only thing you did use scriptlets instead of separate script file that I had here. I wanted to you about it, during DevCon, but I some reason I was too distributed Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Jan Eerdekens Sampsa Sohlman Il y a 8 années @Sampsa: thx! Never been so nervous before, glad you liked the presentation. As I mentioned in the presentation: I'm in no way, shape or form a Javascript/AngularJS expert... I just managed to get it working in a way that works, but isn't necessarily the best way. I'm sure there is room for improvement or better ways to do things.I did indeed use scriptlets as it was an easy way to also make sure some Liferay stuff was initialized, but it does cause a little duplication and you need to use differently named bootstrap methods.We'll have a nice chat about it the next time we see each other, which for me sadly won't be Devoxx... but there's always the next DevCon! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Jan Eerdekens Robert Chen Il y a 8 années Hi Robert,It is probably some sort of naming issue where something in one Angular portlet inadvertently overwrites something in another. I ran into similar issues while working on my Angular Adventures in Liferay Land posts and while preparing for my Devcon talk. The example portlets for the talk, https://github.com/planetsizebrain/angular-adventures, might be able to help you as you can put multiple of those, different ones + instances of the same, on 1 page and they should keep working. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Sampsa Sohlman Jan Eerdekens Il y a 8 années @Robert I don't know .. This was a PoC and I have not done since anything with Angular. @Jan your great DevCon presentation did fill nicely gaps of this blog post. Only thing you did use scriptlets instead of separate script file that I had here. I wanted to you about it, during DevCon, but I some reason I was too distributed Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Jan Eerdekens Sampsa Sohlman Il y a 8 années @Sampsa: thx! Never been so nervous before, glad you liked the presentation. As I mentioned in the presentation: I'm in no way, shape or form a Javascript/AngularJS expert... I just managed to get it working in a way that works, but isn't necessarily the best way. I'm sure there is room for improvement or better ways to do things.I did indeed use scriptlets as it was an easy way to also make sure some Liferay stuff was initialized, but it does cause a little duplication and you need to use differently named bootstrap methods.We'll have a nice chat about it the next time we see each other, which for me sadly won't be Devoxx... but there's always the next DevCon! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sampsa Sohlman Jan Eerdekens Il y a 8 années @Robert I don't know .. This was a PoC and I have not done since anything with Angular. @Jan your great DevCon presentation did fill nicely gaps of this blog post. Only thing you did use scriptlets instead of separate script file that I had here. I wanted to you about it, during DevCon, but I some reason I was too distributed Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Jan Eerdekens Sampsa Sohlman Il y a 8 années @Sampsa: thx! Never been so nervous before, glad you liked the presentation. As I mentioned in the presentation: I'm in no way, shape or form a Javascript/AngularJS expert... I just managed to get it working in a way that works, but isn't necessarily the best way. I'm sure there is room for improvement or better ways to do things.I did indeed use scriptlets as it was an easy way to also make sure some Liferay stuff was initialized, but it does cause a little duplication and you need to use differently named bootstrap methods.We'll have a nice chat about it the next time we see each other, which for me sadly won't be Devoxx... but there's always the next DevCon! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Jan Eerdekens Sampsa Sohlman Il y a 8 années @Sampsa: thx! Never been so nervous before, glad you liked the presentation. As I mentioned in the presentation: I'm in no way, shape or form a Javascript/AngularJS expert... I just managed to get it working in a way that works, but isn't necessarily the best way. I'm sure there is room for improvement or better ways to do things.I did indeed use scriptlets as it was an easy way to also make sure some Liferay stuff was initialized, but it does cause a little duplication and you need to use differently named bootstrap methods.We'll have a nice chat about it the next time we see each other, which for me sadly won't be Devoxx... but there's always the next DevCon! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Robert Chen Il y a 8 années Thank you, Jan and Sampsa, for your responses!Robert Xinsheng Chen Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sindhu h Il y a 7 années Hi Sampsa,I tried your sample. When I deploy just a war you have shared, the portlet looks fine. But if I edit or add angular variable i.e in main.js, portlet doesnt display the new ones or edited ones. Let me know what could be the issue? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Ujjainee Sarkar Il y a 7 années Hello SAMPSA , Can you please tell me which plugin do I need for working with liferay using angular js? I have seen going to marketplace that AngularJs Eclipse 1.2.0 is installed in my eclipse but in preferences it is not being shown. I have also seen that another plugin Angular IDE 2016 CI 9 is available in eclipse marketplace. What should I do to configure my angular js with liferay? Please if you can tell in details. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler