2016-07-15 12 views
1

Hallo ich versuche gehalt zusammen mit Angular2 mit der Lieferung API gehaltgehalt + Angular2

zu verwenden i spezifische Daten zum Beispiel

Contentful.service.ts

HomePage() {    
    return this.http 
     .get('https://cdn.contentful.com/spaces/PRIVATE/entries?access_token=PRIVATE&sys.id=PRIVATE') 
     .map((res:Response) => res.json()); /* map response to var */ 
} 

Homepage bekommen component.ts

export class Home { 

pagename: string; 

    ngOnInit() { 

     this.http.HomePage() 
      .subscribe( 
       data => { 
         this.pagename = data.items[0].fields.pageName; 
       } 
     ); 
    } 
} 

Aber wenn ich mehrere Elemente habe, müsste ich deklarieren Geben Sie jedes data.item als Zeichenfolge an, die sehr lang werden würde. Und dann, wenn ich beschloss, ein neues Feld zu einem Inhaltstyp hinzuzufügen, kann dies in der Mitte des Arrays hinzugefügt werden, wodurch die aktuellen Bindungen, die ich habe, gebrochen werden müssen und alle wieder aktualisiert werden müssten.

Ich habe ein anderes Repo gesehen, wo sie in der Vorlage die Architektur verwenden, die ich suche, und ich weiß, ist die richtige Art zu tun, was ich tun muss.

z.B. homepage.template.html

<ul contentful-entries="'content_type=dog&limit=10'"> 
    <li ng-repeat="dog in $contentfulEntries.items"> 
    {{ dog.fields.name }} 
    </li> 
</ul> 

, die es bedeuten würde, ist kein Risiko für das Array zu brechen und TBH Strukturen den Code für Skala und das Hinzufügen zu. Aber die Repo, wo ich diesen

Exmaple Repo by jvandemo

gesehen habe, ist in AngularJS V1 geschrieben, und ich bin nicht sicher, wie diese Arbeit zu bekommen in Angular2 .. Ich bin immer noch lernen, und ich fühle mich, wenn jemand zeigen könnte Ich in die richtige Richtung und Beispiel könnte ich gehen und dieses Projekt erobern!

Idealerweise ein Beispiel Komponente und Service. Nehme ich auch an, dass das Contentful SDK angewendet werden muss?

Auch gibt es das Problem der Link-Beziehungen (wie contentful empfiehlt große Inhaltseinträge zu erstellen).

Inhaltlich werden die Felder in Elementen mit der verknüpften Beziehung zum Inhalt innerhalb des Felds mit dieser ID und diesem Inhalt aufgelistet. und alle Assets für das Einzelteil wird gestellt in includes/Assets

Eg

{ 
    "sys": { 
     "type": "Array" 
    }, 
    "total": 1, 
    "skip": 0, 
    "limit": 100, 
    "items": [ 
    { 
     "sys": { 
      "space": { 
      "sys": { 
      "type": "Link", 
      "linkType": "Space", 
      "id": "1ST_UNIQUE_ID" 
     } 
    }, 
    "id": "2ND_UNIQUE_ID", 
    "type": "Entry", 
    "createdAt": "2016-07-14T16:30:12.787Z", 
    "updatedAt": "2016-07-14T16:30:12.787Z", 
    "revision": 1, 
    "contentType": { 
     "sys": { 
     "type": "Link", 
     "linkType": "ContentType", 
     "id": "pressRelease" 
     } 
    }, 
    "locale": "en-US" 
    }, 
    "fields": { 
    "title": "Title of Review", 
    "excerpt": "Excerpt of review", 
    "content": "Content of Review", 
    "dateCreated": "2016-07-01", 
    "datePublished": "2016-07-14", 
    "featureImage": { 
     "sys": { 
     "type": "Link", 
     "linkType": "Asset", 
     "id": "3RD_UNIQUE_ID" 
     } 
    } 
    } 
} 
], 
"includes": { 
    "Asset": [ 
     { 
     "sys": { 
     "space": { 
     "sys": { 
      "type": "Link", 
      "linkType": "Space", 
      "id": "1ST_UNIQUE_ID" 
     } 
     }, 
     "id": "4TH_UNIQUE_ID", 
     "type": "Asset", 
     "createdAt": "2016-07-14T16:30:05.078Z", 
     "updatedAt": "2016-07-14T16:30:05.078Z", 
     "revision": 1, 
     "locale": "en-US" 
    }, 
    "fields": { 
     "title": "Image Title", 
     "description": "Image Description", 
     "file": { 
     "url": "//url-of-image.jpg", 
     "details": { 
      "size": 43098, 
      "image": { 
      "width": 1278, 
      "height": 928 
      } 
     }, 
     "fileName": "image.jpg", 
     "contentType": "image/jpeg" 
     } 
    } 
    } 
    ] 
} 
} 

Ich gehe davon aus, indem Sie die ID für den Artikel aufzublicken Sie brauchen, und dann alle Beziehungen, die Sie die ID des Vermögens und dann in Assets suchen? Aber ist dies wieder durch das SDK getan? oder muss ich diesen Code schreiben?

Ich bin verloren ...

jede Hilfe ist willkommen, danke.

Antwort

2

Ich arbeite bei contentful und ich bin verantwortlich für die JS SDKs.

Ich kann einige Lösungen sehen hier:

  1. Sie this Beispiel von uns gebauten folgen und von dort weiter, es oben auf Angular gebaut ist, können Sie auch die Abhängigkeiten usw. aktualisieren müssen .. .Wenn Sie Hilfe benötigen, zögern Sie nicht, ein Problem zu erstellen,

  2. Mit ngUpgrade können Sie Angular 1 Module auf Angular 2 und umgekehrt mehr Informationen here. Das ist eine schnelle und schmutzige Lösung

  3. Sie können den Code Gabel und gehen durch Angular migration guide

  4. Sie das contenful.js SDK verwenden können und es in einem Service-wickeln, dort finden Sie den Link Auflösung etc haben .. ., und füllen Sie Ihre Ansichten dann

ich kann Sie mit dem Beispielcode im Augenblick nicht zur Verfügung stellen, aber wir am Beispiel Projekten mit Angular 2 und anderen Frameworks arbeiten.

Bitte beachten Sie, dass das von Ihnen erwähnte Repo von Contentful nicht offiziell gepflegt wird.

Best, Khaled

+2

Hey, jeder Aktualisierung auf das? Gibt es jetzt Beispiele? – umbrel

+0

gibt es ein Tutorial, wie man das tut https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-in-an-angular-project/ –