AngularJS with Kotti as backend

[FFFFFFFab]

Hi guys,

I'm learning Angular and I would test it with Kotti as backend but I don't know how to deal with it, what is the best approach to explore to make the two interact. The test I would make is a single page web app that allows to browse through resources tree and make CRUD operation without page reload. Actually, I don't know how to start : how to serve the frontend, with Kotti or independantly ? Can I override Document views by "REST views", or it's preferable to make a custom content type ?

If anybody could clear my mind, at least on the concept, approach to explore.

Thanks,

Fab.

[Andreas Kaiser]

Hey Fab,


some random notes on what I did in some projects…

On 14 Jan 2015, at 16:59, FFFFFFFab wrote:

> I'm learning Angular and I would test it with Kotti as backend but I
> don't
> know how to deal with it, what is the best approach to explore to make
> the
> two interact. The test I would make is a single page web app that
> allows to
> browse through resources tree

I've yet to find a truly generic way for tree browsing / traversal.
This is on my todo list for 2015 and Kotti 1.x. What I did recently is
adding a view which returns a JSON serializable representation of
``context.children_with_permission`` like this:

@view_config(context=Content, name='children',
xhr=True, renderer='json', request_method='GET')

> and make CRUD operation without page reload.

CRUD is easy – see below.

> Actually, I don't know how to start : how to serve the frontend, with
> Kotti or independantly ?

I serve it with Kotti, but manage / build static resources in my
application with Bower and Gulp (actually 2: 1 for each JS and CSS).

> Can I override Document views by "REST views", or it's preferable to
> make a custom content type ?

I do neither. I use Restangular and configure it with

RestangularProvider.setBaseUrl(kotti_context_url)
RestangularProvider.setDefaultHeaders({"X-Requested-With":
'XMLHttpRequest'})

This can also be done with "pure" Angular (either with the $resource or
$http), I currently don't remember how though.

This way you can have separate Angular applications for different
content types and just add some views to Kotti decorated with
``@view_config(xhr=True, renderer='json',
request_method='GET|POST|PUT|DELETE')``


HTH,

Andreas

[Andreas Kaiser]

On 14 Jan 2015, at 17:25, Andreas Kaiser wrote:

> I've yet to find a truly generic way for tree browsing / traversal.
> This is on my todo list for 2015 and Kotti 1.x. What I did recently
> is adding a view which returns a JSON serializable representation of
> ``context.children_with_permission`` like this:
>
> @view_config(context=Content, name='children',
> xhr=True, renderer='json', request_method='GET')

What's important: the 'id' attribute of the JSON object should have
Kotti's child.name as its value, as this is its "id" in the URL.

[Fabien Castarède]

Hi Andreas, thanks for your answer.

So, for example, the root of the site is always served by the default Document view, and it’s in its template (document.pt), or an override, that you make your ng-app ?

>
>
> HTH,
>
> Andreas
>
> --
> You received this message because you are subscribed to a topic in the Google Groups "Kotti" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/kotti/PdzJbAJ7qnM/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to kotti+un...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Andreas Kaiser]

On 14 Jan 2015, at 18:14, Fabien Castarède wrote:

> Le 14 janv. 2015 à 17:25, Andreas Kaiser <di...@binary-punks.com> a
> écrit :
>

> So, for example, the root of the site is always served by the default
> Document view, and it’s in its template (document.pt), or an
> override, that you make your ng-app ?

Depends on what you want or need. In one case the root has a custom
view which is set as the default view. The corresponding template
contains the Angular app. The view requires a permission that only
authenticated users have. So when visiting the site, you'll be
redirected to Kotti's default login form. After successful
authentication you'll be served the Angular App.

You could of course also have a default Document view for the root with
some info for anonymous users and serve your app from a different
context or view, i.e. under an arbitrary other URL.


HTH,

Andreas

[Fabien Castarède]

Ok, it’s more clear.

Last question : to render a menu with directs children and which allows to browse and display one of them, we can grab a json like you explained in your precedent mail, but how I would render this menu ? Would I render « Angular links » (#/child1, #/child2, #/child1/subchild1, etc…) and use the router feature of Angular ?

[Fabien Castarède]

So, I’ve tested with ngRoute and a static menu, it works. Now, I would have to try to render a dynamic menu and dynamically add routes in Angular, but it’s more about Angular.

Thanks Andreas for your tips, I’ll investigate.

Fab.