collection-json / collection-json.js

Collection+JSON Client for JavaScript
MIT License
39 stars 10 forks source link

Angular Demo #4

Open jchannon opened 10 years ago

jchannon commented 10 years ago

Hi,

We're looking hard into CJ but we're still at the concept stage but it be awesome if we could see a demo on the client using Angular.

I've been in touch with @glennblock and have built a Nancy server side response processor https://github.com/jchannon/Nancy.CollectionJson to return CJ links so it'd be nice to do a demo to see the full lifecycle from server to client.

Would you be able to put an online demo up somewhere?

camshaft commented 10 years ago

If you are using angular I would highly recommend using ng-hyper-cj instead. It makes it really easy to get data on the page. Say you had a CJ resource that looked something like:

{
  collection: {
    version: '1.0',
    href: '/api'
    items: [
      {
        href: '/api/users/123',
        data: [
          {name: 'given-name', value: 'Joe'}
        ],
        links: []
      },
      {
        href: '/api/users/456',
        data: [
          {name: 'given-name', value: 'Mike'}
        ],
        links: []
      },
      {
        href: '/api/users/789',
        data: [
          {name: 'given-name', value: 'Robert'}
        ],
        links: []
      }
    ]
  }
}

You can easily access that data in your angular templates:

<div data-hyper=". as users">
  <div data-ng-repeat="user in users">
    <h3 data-hyper-bind="user.given-name"></h3>
  </div>
</div>

which will output:


<div>
  <div>
    <h3>Joe</h3>
  </div>
  <div>
    <h3>Mike</h3>
  </div>
  <div>
    <h3>Robert</h3>
  </div>
</div>

Check out ng-hyper for more docs. I'd love to hear feedback!

camshaft commented 10 years ago

If you're looking for a demo you can check out

These are all using hyper+json as the media type but it's the same usage for CJ