0

I want to know the challenges or Angular JS implementaion in SDL Tridion driven web site. If I implement the Angular JS in it, will I face any issue in Experience Manager for the same.

  • 2
    You need to show some effort in searching on google and then try to understand the result information. Still if you didn't get then you should share the search information and ask for suggestions. – Siva Charan Jun 3 '14 at 15:51
  • I'm voting to close this question as off-topic because it is too vague. Not a real question! – Quirijn Feb 4 '15 at 11:38
7

There's Angular, and then there's Angular.

If you're going the full SPA route, then you definitely will want to look into leveraging the Content Delivery WebService (or a custom variation of this if you're inclined to maintaining large code bases yourself) and use a library like JayData to provide you the data access layer. Write a couple of simple templates to publish your content as JSON and start plugging away.

If however you're looking into using Angular purely as the "layout" engine, then you can go an even simpler route. Use the same approach of the simple JSON template, and just make sure that the Pages you request contain the content for the current page as JSON data (somewhat similar to what SquareSpace does). This approach would likely allow you to work with XPM as well, as the page could contain all the information required about page ID, component presentations and fields on the server-side too, allowing XPM to "understand" what content you're displaying.

I would say: start playing with it, define a bit better what you're trying to achieve (using Angular just because it's the cool thing is not the right approach), and try to figure out first how you'd do it without Tridion. Once you know that, adapting Tridion to fit the model you want shouldn't be much trouble.

| improve this answer | |
6

In my recent experience attempting to integrate a JSON web service generated from Tridion with an AngularJS page for demo purposes, the only real trouble I've found is setting up a page to use Experience Manager. XPM uses HTML comments with dynamic ID's but in my case, the content for those ID's is coming from an AngularJS repeat loop. I have been so far unable to find a way to output comments from Angular in a way that is compatible with XPM.

It was necessary to use bind html unsafe, to get the comment to output to the page correctly, but that seems to require using a parent container, which doesn't work because the comment needs to be outside of that container to work with the other components on the page.

I tried creating a directive, but it seems that directives require a "root node" which the HTML comment doesn't count as.

The inability to use XPM isn't a deal breaker though, in my opinion.


Update

Eventually I realized I was trying to generate the comments in an Angular way when instead I needed to be using Angular directives to output the comments with jQuery.

<div tcm-presentation="{{item.id}}">...

.directive('tcmPresentation', ['$routeParams', function ($routeParams) {
    return {
        link: function ($scope, $element, $attr) {
            var comment = '<!-- Start Component Presentation: {"ComponentID" : "'+$attr.tcmPresentation+'", "ComponentTemplateID" : "tcm:123-456-798", "IsRepositoryPublished" : false } -->';
            $element.prepend(comment);
        }
    };
}])
| improve this answer | |
  • Hey, Trav--in terms of the JavaScript between Angular and XPM, did Angular add its directives in time for XPM? Do you have to refresh the page to make XPM work? – Alvin Reyes Feb 11 '15 at 7:26
  • Also, to get Session Preview working (if preferred) the JSON in the XPM comment need's time stamps as well. – Alvin Reyes Feb 11 '15 at 22:15
  • 1
    The directives are all there in time for XPM. No refresh. I tested adding the time stamps in as hard coded values at first and again yesterday but I saw a looping "The preview for this page is not up to date" error so I removed them. There are a few things that need to happen on our backend before I can add them back to test with real time stamp values. – Travis Feb 12 '15 at 14:31
4

Have a look at the great article written by Will Price regarding using Tridion with Angular: http://www.tridiondeveloper.com/client-side-templating-with-json-odata-and-angular

This is a relatively new concept, so there is great opportunity here to try out the framework and share your lessons-learnt with the community. Regarding XPM integration, it would be reasonable to expect challenges with your JS conflicting with XPM's JS in extreme scenarios.

| improve this answer | |
3

As I understand it, Angular JS is much more aimed at web application development rather than websites. For example, I'd expect it to be more likely used to develop an admin area or even a GUI extension rather than your average product website.

Assuming you have already used it, from what little I understand, it's likely that XPM might get confused with the results of some of the directive attributes used by Angular. Particularly repeat as this likely wouldn't be recognised by the XPM JavaScript and there could be differences in the times for loading so the XPM JS might execute before Angular was.

For example:

<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
  </ul>
</div>

From here: https://docs.angularjs.org/api/ng/directive/ngRepeat

I think AngularJS isn't really what would be the challenge here. If you had a requirement that needed AngularJS or its ilk to solve, it's quite likely that XPM would be a challenge to implement for this requirement no matter what framework you chose or even if it was pure JavaScript.

| improve this answer | |
2

I've not worked on the two together, but I have experience with each separately.

Angular.js is best for a SPA (Single Page Application). It shines with DOM manipulation as a result of forms, or other tools that the end-user might use to manipulate content on a page. As a platform for delivering content to a page (traditional MVC) - I would not recommend it. Angular is client-side JavaScript, and despite how fast it is, it's still not going to perform as well as a server-side MVC.

Angular directives will run after the angular.js library has been loaded. If you're using experience manager, you will run into some problems. XPM reads JSON that's put in HTML comments around component templates. So as a content-delivery tool, angular will break experience manager - because those JSON comments need to be there server side, not client side.

Angular.js will work best in client-driven, data-focused, DOM manipulation scenarios: forms that a user submits, sorting complex tables, etc. When you need to create a tool that isn't content, but data, Angular will work well for you.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.