2

I am using Angular to build a UI based on following structure

index.html (contains ng-view to load partial html views)

  • view1.html
  • view2.html

DXA is installed in Content Delivery on Java platform.

When browsing to index.html, the response from the angular call to view1 is in JSON which causes the page to break. Internally angular uses ng-view to load the html page, but since page is returned inside a JSON, it breaks the page.

Here is the JSON response that comes back from the angular ng-view call:

{
      "Id": "tcm:319-177663-64",
      "Title": "termLife-gettingStartedView | My Site",
      "Meta": {
        "og:type": "article",
        "og:title": "tlq-gettingStartedView",
        "description": "tlq-gettingStartedView",
        "twitter:card": "summary",
        "og:locale": "en-ca",
        "og:url": "http://www.somesite/view1.html"
      },
      "Regions": [
        {
          "Name": "Main",
          "Entities": [
            {
              "Id": "177651",
              "XpmMetadata": {
                "ComponentID": "tcm:319-177651",
                "ComponentModified": "2016-05-31T12:33:23",
                "ComponentTemplateID": "tcm:319-174294-32",
                "ComponentTemplateModified": "2016-05-26T05:57:50",
                "IsRepositoryPublished": "true"
              },
              "XpmPropertyMetadata": { "code": "tcm:Content/custom:PlainCodeText/custom:code" },
              "MvcData": {
                "ControllerAreaName": "Core",
                "ControllerName": "Entity",
                "ActionName": "Entity",
                "AreaName": "Core",
                "ViewName": "CDACodePlainTextCV",
                "RegionAreaName": "Core",
                "RegionName": "Main"
              },
              "Code": "\n<div id=\"getStarted\">\n    <!--H1 Header-->\n    <div class=\"td-layout-row td-layout-grid15\">\n <div class=\"td-layout-row\">\n <h1 class=\"td-margin-bottom-none td-margin-top-none\">Some text</h1>\n  <p </div>\n</div>\n"
            }
          ],
          "XpmMetadata": { },
          "MvcData": {
            "ControllerAreaName": "Core",
            "ControllerName": "Region",
            "ActionName": "Region",
            "AreaName": "Core",
            "ViewName": "Main"
          }
        }
      ],
      "XpmMetadata": {
        "PageID": "tcm:319-177663-64",
        "PageModified": "2016-05-30T12:44:24",
        "PageTemplateID": "tcm:319-174945-128",
        "PageTemplateModified": "2016-05-26T05:57:08",
        "CmsUrl": "http://somecms.com/"
      },
      "MvcData": {
        "ControllerAreaName": "Core",
        "ControllerName": "Page",
        "ActionName": "Page",
        "AreaName": "Core",
        "ViewName": "CDAPlainCodeTextPV"
      }
    }

HTTP Request

GET /some-site/View1.html HTTP/1.1 
Host: www.somesite.com 
Connection: keep-alive 
Pragma: no-cache Cache-Control: no-cache 
Accept: application/json, text/plain, */* 
User-Agent: Mozilla/5.0 (Windows NT
    6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36 
Referer: http://www.somesite.com/index.html 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8 
Cookie:

If I directly access the Partial View in the browser, the page is rendered correctly. But when Angular requests this View using ng-view directive the response is returned inside JSON property.

GET /some-site/View1.html HTTP/1.1
Host: www.somesite.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Cookie: 
2

DXA can/will return such raw JSON data instead of rendered HTML if you explicitly ask for it: either by including ?format=json In the URL or by means of an Accept: application/json HTTP header.

How does the HTTP Request which is sent to the server look?

| improve this answer | |
  • I have added the HTTP request details to the question. Thanks Rick. – Raghav May 31 '16 at 19:00
  • Assuming that the first HTTP request is the one sent by Angular: you can see that it requests application/json format and that's what DXA returns. It is possible to disable this feature on the CM side, though. See: docs.sdl.com/LiveContent/content/en-US/SDL%20DXA-v4/… – Rick Pannekoek May 31 '16 at 20:14
  • Yes, the HTTP request header is responsible for the content coming back as JSON. I will have to explore options on CMS side. But I cant control how Angular <ng-view> internally controls the request. – Raghav May 31 '16 at 21:00
  • @Raghav apart from disabling the JSON feature as Rick suggested, you could also try to append ?format=html to every URL, to ensure it overrides the accept header in the request. – Bart Koopman Jun 1 '16 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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