Expand my Community achievements bar.

SOLVED

Components inside ng view of angularjs application

Avatar

Level 6

I have developed angular js app inside aem. I want to manage content in partial pages html. The sidekick and components are not working in partial page. It is working only in index page. Anyway to manage content in partial page also ?

1 Accepted Solution

Avatar

Correct answer by
Level 8

So to make this work your "partial HTML pages" must be complete AEM pages. I am assuming that by partial pages what you mean is that your Angular app is including basially and HTML chunk - say a div or a collections of div, but not a fully qualified page with html and body tags. So for example:

  • /content/site/en/angularapp - this is the index page for your single page app
  • /content/site/en/angularapp/rightside - this contains the content for the right side of the page
  • /content/site/en/angularapp/secondscreen - this contains the content displayed on the second screen of you single page app.

You create the rightside and secondscreen pages using a template similar to the campaign teaser template - it's just a simple page with nothing on it but a paragraph system. The template has to include all the normal AEM author client libraries on it to enable authoring. Then when you angular app includes them it uses a URL that looks something like /content/site/en/angularapp/secondscreen.content.html - where content is the name of the JSP/Sighty script that includes the paragraph system so that all you get is the HTML output by paragraph system and included components.

View solution in original post

3 Replies

Avatar

Level 10

Third party JS frameworks are usually used to develop components that are placed on sidekick.

Avatar

Correct answer by
Level 8

So to make this work your "partial HTML pages" must be complete AEM pages. I am assuming that by partial pages what you mean is that your Angular app is including basially and HTML chunk - say a div or a collections of div, but not a fully qualified page with html and body tags. So for example:

  • /content/site/en/angularapp - this is the index page for your single page app
  • /content/site/en/angularapp/rightside - this contains the content for the right side of the page
  • /content/site/en/angularapp/secondscreen - this contains the content displayed on the second screen of you single page app.

You create the rightside and secondscreen pages using a template similar to the campaign teaser template - it's just a simple page with nothing on it but a paragraph system. The template has to include all the normal AEM author client libraries on it to enable authoring. Then when you angular app includes them it uses a URL that looks something like /content/site/en/angularapp/secondscreen.content.html - where content is the name of the JSP/Sighty script that includes the paragraph system so that all you get is the HTML output by paragraph system and included components.

Avatar

Level 6

Adding parsys enables me to add components. But after adding it i am not able to edit the content again