Tutorial WebApi - With AngularJS

Cool demo showing both WebApi and AngularJS.

It has a simple version (using just a AngularJS controller) and a more sophisticated edition using Services.

Download the App, learn a lot and have fun experimenting with it!

Important note: many buttons won't work on this demo-page, because you're not logged in and don't have edit-permissions. This is a security feature, it will work on your install.

WebAPI calls with parameters and data-updates without page-refresh

Here we're will use parameters. If there are just a few (like just an ID) we can put this in the Url.
The Server-Api must expect these in the Action-parameters (the method-definition)
When more parameters are needed (like when creating a new category) we move over to the post-body.
The following drop-down is automatically populated by the categories. I created a small AngularJS app to prefill it - if you would like to know more, read my AngulaJS series in the dnn-blogs.
Let's ask the server for details regarding one category.

Let's try:

Just quickly reload categories (no params needed for this)
get public details for the selected item - this will only use a single param in the URL
get secret details for the selected item - this will fail for anonymous users
Edit this category
Delete this category
Create a new category

Title:
Description:

Just rename (all params in URL)
Update name and description (params in url/post)

Create this new category using params in post