This post will show how to perform typical CRUD (create, read, update and delete) operations in AngularJS when consuming a RESTful web service.
A prerequisite for this demo is a working RESTful web service. For a basic introduction on creating a Java based RESTful web service, see my introduction on how to consume a RESTful web service with AngularJS created by a Java backend. For completeness sake I’ve added a Java based sample at the end of this post.
Frontend (AngularJS)
Views (Partials)
We will create three views.
The first view will display all users (user-list.html):
The view also provides links to edit (ng-click="editUser(user.id)") and delete (ng-click="deleteUser(user.id)") specific users as well as a link to create a new user (ng-click="createUser()").
Next we will create three controllers corresponding to the three views.
UserListCtrl
UserListCtrl provides three functions editUser, deleteUser and createUser.
editUser and createUser merely redirect to a different partial view using AngularJs’s $location function.
deleteUser calls the UserFactory service method delete (which we will create shortly).
Furthermore the $scope.users is filled with the result from the UsersFactory.query() function.
Note that all required dependencies are injected into the controller’s signature (function ($scope, UsersFactory, UserFactory, $location)).
controller.js
123456789101112131415161718192021222324
varapp=angular.module('ngdemo.controllers',[]);app.controller('UserListCtrl',['$scope','UsersFactory','UserFactory','$location',function($scope,UsersFactory,UserFactory,$location){// callback for ng-click 'editUser':$scope.editUser=function(userId){$location.path('/user-detail/'+userId);};// callback for ng-click 'deleteUser':$scope.deleteUser=function(userId){UserFactory.delete({id:userId});$scope.users=UsersFactory.query();};// callback for ng-click 'createUser':$scope.createNewUser=function(){$location.path('/user-creation');};$scope.users=UsersFactory.query();}]);/* ... */
UserDetailCtrl and UserCreationCtrl
UserDetailCtrl provides the function updateUser, which in turn invokes the service method UserFactory.update. The $scope.user is filled with the result from calling UserFactory.show. cancel is just a convenient link redirecting back to the user-list view.
UserCreationCtrl provides the function createNewUser, calling UsersFactory.create.
Again, both controllers use $location to redirect back to the user-list partial view.
controller.js
123456789101112131415161718192021222324252627
/* ... */app.controller('UserDetailCtrl',['$scope','$routeParams','UserFactory','$location',function($scope,$routeParams,UserFactory,$location){// callback for ng-click 'updateUser':$scope.updateUser=function(){UserFactory.update($scope.user);$location.path('/user-list');};// callback for ng-click 'cancel':$scope.cancel=function(){$location.path('/user-list');};$scope.user=UserFactory.show({id:$routeParams.id});}]);app.controller('UserCreationCtrl',['$scope','UsersFactory','$location',function($scope,UsersFactory,$location){// callback for ng-click 'createNewUser':$scope.createNewUser=function(){UsersFactory.create($scope.user);$location.path('/user-list');}}]);
Don’t forget to map the views to the corresponding controllers in app.js using the $routeProvider: