Random programming things I'd want to remember

Wednesday, March 12, 2014

ASP.Net Web API with Angular.js front-end example

I wanted to learn about Microsoft ASP.Net Web API and how I could use Angular.js framework as a front-end. I built a little application that demonstrates the basics.

This app was heavily influenced by this tutorial (especially parts 3-5), and this book's chapter on Web API.

The code is available on Github here.

The project has two controllers: HomeController and RecordController. HomeController is the ASP.Net MVC controller while RecordController deals with Web API. The Web API data infrastructure is in /Models folder. The script file is in /Scripts/Home/record.js. One last thing I need is a view, so there is a view RecordsApi.cshtml under /Views/Home

The view has all the regular angular directives. It uses /Scripts/Home/records.js file which has all the Angular.js stuff. I use $http service to communicate with the server.

In short, ajax calls are replaced with calls to the corresponding methods of Angular's $http service. The view is created as usual, API controller is the same as it would be for a regular Web API service, and models are done in the same way. The only difference you need to make if you want Angular.js front-end is to introduce angular script in the view and put all the directives in place.

Comments/questions are welcome.


4 comments:

Unknown said...

While I was in online Angularjs training I was introduced to this website by our instructors. Great insight about the subject through presentations along with nice content on this site purely related to data science and cloud. Thanks a lot for the info...

nivedhitha said...

very nice article Leading Angular js training in ameerpet

anirudh said...


I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting!!
Best DevOps Training Institute

divya said...

wonderful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. This article resolved my all queries
AWS training in chennai | AWS training in annanagar | AWS training in omr | AWS training in porur | AWS training in tambaram | AWS training in velachery