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.


8 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

vijay said...

I am really happy with your blog because your article is very unique and powerful information..Thanks for sharing this quality information with us. I really enjoyed read this article...
Salesforce Training in Chennai

Salesforce Online Training in Chennai

Salesforce Training in Bangalore

Salesforce Training in Hyderabad

Salesforce training in ameerpet

Salesforce Training in Pune

Salesforce Online Training

Salesforce Training

Links For You said...

Axure RP Pro Full Version With Crack user is style to the develop, answer, or the experience. Edit the custom groups, pages, & design. User easily Axure RP 8 Full Crack

Samia Beel said...

No fear of becoming hacked by any kind of hacker. Your Program from all undesirable points and provide tight protection to your a digital living. Kaspersky Internet Security Activation Code Free

iteducationcentre said...

Nice article.Thanks for sharing.
Full stack classes in Pune