Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  Tutorial WebApi - With AngularJS
< class="co--hide"> 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

  1. Here we're will use parameters. If there are just a few (like just an ID) we can put this in the Url.
  2. The Server-Api must expect these in the Action-parameters (the method-definition)
  3. When more parameters are needed (like when creating a new category) we move over to the post-body.
  4. 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.
  5. Let's ask the server for details regarding one category.
2serve . 2invent . 2create is 2be.