Angular JS

[muddukrish...@gmail.com]

 Hello Folks,

we are in the world of angular JS . I have following questions regarding Angular +Hippo . Can you please help .

1.how do i design template which have angular  directives using the Hippo CMS content authoring tool if i need to manage pages which have static dynamic -- for example if i need to diplay a page where one of the different div areas has to be controlled through angular  -- how do i design such a content page in CMS authoring tool

 

2. do you have a HTML view  where you show the markup and we can add angular directives --  so i get to see  the preview and also make it angular directive friendly --  

[Mathijs den Burger]

Hi,

> we are in the world of angular JS .

Welcome to the world of Hippo! :)

> I have following questions regarding
> Angular +Hippo . Can you please help .
>
> 1.how do i design template which have angular directives using the Hippo
> CMS content authoring tool if i need to manage pages which have static
> dynamic -- for example if i need to diplay a page where one of the different
> div areas has to be controlled through angular -- how do i design such a
> content page in CMS authoring tool

The 'pages' of Hippo are rendered by the HST ("Hippo Site Toolkit")
using JSP or Freemarker templates. These templates can render
anything, including HTML that contains some additional Angular markup.
For an introduction into the HST I can recommend lesson 2 and up in
the Video Trail [1]. You can also follow the Developer Trail [2] to
get an idea of how the Hippo archetype project is setup and how to
change the markup in there.

> 2. do you have a HTML view where you show the markup and we can add angular
> directives -- so i get to see the preview and also make it angular
> directive friendly --

The HTML markup of rendered pages is located in JSP templates on the
file system, or Freemarker template in the repository. You can output
any markup you like with Hippo, so adding Angular directives is easy.
Just add the angular.js file and your own .js files to your project,
include them in the head of each page using a 'head contribution' [3]
and use the right Angular directives in your markup.

Setting up the right HST configuration is a different ballgame though.
Again, follow the video trail and/or developer trail to get started.
We also have a Developer Training to get you up to speed quickly [4].

Another option is to not let Hippo render the HTML, but only expose
the content in Hippo CMS via a REST API and expose it via a separate
Angular application. There's a blog post [5] that explains this setup,
including a demo application.

hope this helps,
Mathijs


[1] http://www.onehippo.org/7_8/trails/video-trail/video-trail
[2] http://www.onehippo.org/7_8/trails/developer-trail/hippo-baby-steps
[3] http://www.onehippo.org/7_7/library/concepts/web-application/hst2-tag-library.html
[4] http://www.onehippo.com/en/services/education/hippo-cms-developer-training.html
[5] http://www.onehippo.com/en/resources/blogs/2014/01/angularjs-and-content-management-systems.html