First we configure AngularJS routing for our views. See this post to learn more about AngularJS routing.
userApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Partials/home.html', // this is the partial view for listing page
controller: 'UserCtrl'
})
.when('/create', {
templateUrl: 'Partials/create-edit.html', // this is the partial view for creating user page
controller: 'UserCtrl'
})
otherwise({
redirectTo: '/'
});
}]);
Create Functionality
Create the partial html page for creating a user.
<div> <span style="color:red" data-ng-show="error">An error has occured.</span> </div> <div> <label>First Name</label> <input type="text" data-ng-model="user.Firstname" /> </div> <div> <label>Last Name</label> <input type="text" data-ng-model="user.Lastname" /> </div> <div> <label>Organisation</label> <input type="text" data-ng-model="user.Organisation" /> </div> <div> <label>Position</label> <input type="text" data-ng-model="user.Position" /> </div> <div> <label>Email</label> <input type="text" data-ng-model="user.Email" /> </div> <button data-ng-click="submit(user)">Save</button>Note that there are some ng-model attributes on the input fields to instruct AngularJS to bind the value. The attributes were prefixed with 'data-' to be HTML5 compliant. ng-click attribute is also used to tell AngularJS to execute a function.
Then create our Web API method (this one is scaffoled by Visual Studio when creating a new controller):
// POST api/UserRegistration
[ResponseType(typeof(User))]
public async Task<IHttpActionResult> PostUser(User user)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.Users.Add(user);
await db.SaveChangesAsync();
return CreatedAtRoute("DefaultApi", new { id = user.UserId }, user);
}
Now, we create our AngularJS custom service to call the Web API method:
userApp.factory('userService', ['$resource', function ($resource) {
return {
createUser: function (user) {
return $resource('/api/UserRegistration').save(user);
}
}
}]);
Here AngularJS $resource service is used to interact with the Web API method. $resource service is useful for interacting with RESTful based services such as Web API. It is simpler to use than $http service. To use this service, ngResource module will need to be included as well in our application. In this JavaScript function, we call the save() method of the $resource service, passing user object as the argument. The service will invoke a HTTP POST call to the specified url.Finally we create our AngularJS controller:
userApp.controller('UserCtrl', ['$scope', '$location', '$routeParams', 'userService', function ($scope, $location, $routeParams, userService) {
$scope.submit = function (user) {
$scope.error = false;
userService.createUser(user).$promise.then(
//success
function (data) { $location.url('/'); },
//error
function (response) {
//console.log(response);
//console.log(response.status);
$scope.error = true }
);
}
}]);
Here we create a submit function that calls the user service that we have just created. The submit function is called by the save button in our partial view through ng-click attribute.Note that $promise is also used to determine what action to take if the service call is successful and if it has error. $promise is part of $resource service. If it is successful, $promise will return data object (similar to the one we passed to the service call). If it fails, it will return a HTTP response object. It might be useful to see the headers and status properties of the response object.
$scope.error variable is used to show an error message if an error has occurred. This variable is referred to by ng-show in our partial view.
Listing Functionality
We have already implemented the create user functionality, now let us do the listing function.
First, create the partial view.
<div>
<span style="color:red" data-ng-show="error">An error has occured.</span>
</div>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody ng-repeat="user in users">
<tr>
<td>{{ user.Firstname }}</td>
<td>{{ user.Lastname }}</td>
<td>{{ user.Email }}</td>
</tr>
</tbody>
</table>
Then the Web API method:
// GET api/UserRegistration
public IQueryable<User> GetUsers()
{
return db.Users;
}
Add our user service with this method:
getAllUsers: function () {
return $resource('/api/UserRegistration').query();
}
Here we use the $resource service's query() method that will invoke a HTTP GET call.Then add the following codes in our controller:
$scope.init = function () {
// Get all users
userService.getAllUsers().$promise.then(
//success
function (data) {
$scope.users = data;
},
//error
function (response) {
//console.log(response);
//console.log(response.status);
$scope.error = true;
}
);
}
In the coming post, we will see the edit and delete functionality.
