Examples of Angular.js and WebAPI CRUD

Question

I have an asp.net mvc4 web application, which, for example, allows me to manage members and resources of participants on the site. There are several different sections on their profile information on the member’s home page. I want to use angular.js and webapi (entityframework) so that they can edit their address data in place and save it without posting the page back. I suggest that it is best to start with a partial view that displays this address data as part of the main page view.

Are there any examples of such an installation?

Answer 1

Can you do this. First, to switch parts based on which section the user selects, you have two options:

1) Create a module and configure routes. Routes allow you to have a basic HTML page with an area in which you can switch partial "views" of HTML "inputs and outputs" based on the URL that you click in the application. AngularJS website has a tutorial where they do something similar . Check out the ng-view explanation.

2) You can create custom directives and extract an external HTML page. In the directive, you compile partial HTML code that allows you to use any directives that are on this page (ng-click, ng-class, etc.), and then render them where the div is declared on the original page. This is a bit more advanced, so first consider the ng-view example.

To send data back to the mvc application, all you need to do in angular declares a resource with a URL back to the mvc application where you publish the data, and then send it some data. Something like that:

$resource('api/updateUserData', {userName: userNameVar, userEmail: userEmailVar}, function(data){ //callback code where you do something with the returned data if any } ); 

There is a beautiful github project, called angular-app , which has a basic CRUD setting, shows you how to properly build the angular application itself, how to use tests, how to best structure angular files, etc. It may be a little more than you need for this small project, but it can at least give you some ideas on how to move forward if your application is growing.