Back to blog home page

Part II: ng-grid and a Real REST API

Posted by on Sep 16, 2014

In our previous blog, we walked through the steps of how to build an ng-grid solution using a “fake” REST API.  This tutorial will use a real REST API that can connect to any given database.  We will demonstrate how you can perform CRUD operations easily and seamlessly.  See it in Plunker before you get started: http://plnkr.co/edit/6jdCzZ?p=preview

Assumptions

1. You finished reading Part 1: ng-grid and a Simple REST API. You will need to refer to this blog to get started.

2. In this blog we will use an example REST from Backand.  You can view the app here:  http://restdemo.backand.net.  This is the Angular user preview.   In order to manage the REST API you will need to connect to the following console: https://restdemo.backand.com.  In order to access the user preview you will need to use the following credentials:

User Name: guest@backand.com
Password: guest1234

Angular Service for CRUD

In order to connect to the REST  you need an Angular service for the logic in order to perform the CRUD operations. Start by creating a file named backandService.js for your Angular Factory.

The REST service requires you to perform a simple authentication that gives back an authentication token for use in the CRUD operations. Let’s begin by writing a function in the backandService.js for performing the authentication.

Here is the code:

The following lines of code are used to extract the authorization token from the response and then add it to Angular’s $http default headers. From now on whenever you use $http to do a network request to the REST service, the request will have the ‘Authorization’ header with the respective value:

Now that you have the authentication in place let’s start writing methods for performing the Create, Read, Update and Delete actions.

As explained in the previous blog post, you are using $q to return a promise object to whoever calls the backandService. And you will be resolving/rejecting the promise object as soon as you get the response from the REST service.

Add the following four methods to backandService.js for performing the Create, Read, Update and Delete capabilities:

Since you will be repeating the code for the $http call and resolving/rejecting the promise object over and over in the four functions, you can separate it out into a generic function inside your backandService.js and make the CRUD methods use it to reduce lines of code. Add this code inside backandService.js:

In your createEmployee, getEmployees, updateEmployee and deleteEmployee functions, all you are doing is building the http configuration object that will contain the details like the REST endpoint, request type, data to be sent etc. You will then send this http configuration over to your generic method sendRequest to perform the actual $http network call and take care of resolving/rejecting the object as per the response.

To expose the new CRUD methods you wrote in your backandService.js to any consumers, let’s update the returning object at the bottom of your code to the following:

R – Read

Now that you have the Angular service to perform the CRUD operation ready, let’s go ahead and integrate this with your controller. You will start by adding the backandService dependency to homeController.js:

For now, as was done in the previous blog, you will leave the view for the ng-grid. Let’s update the gridOptions to incorporate features to support the CRUD operations. Add this code inside homeController.js for ng-grid configuration:

Now let’s go back to backandService’s authenticate and getEmployees methods in order to perform the authentication and get the employees list. You configured your grid to look for employees object in $scope for its data. Add the following code to homeController.js:

Now, your ng-grid should look something like this:

image 1_partII_small

You now have the READ in the CRUD working.

C – Create & U – Update

You will now use the backandService’s createEmployee, updateEmployee functions to add the CREATE, UPDATE capabilities to ng-grid. You can achieve this by following these steps:

1. Add an “Add Item” button in the view file i.e home.html:

2. Add an empty object to $scope.employees on this button click:

You have now configured your ng-grid to make the cells editable. In fact, ng-grid broadcasts an event when any cell is edited inside ng-grid. Listen to this event and make a call to Backand’s REST service using backandService. If you correctly wire these together, you should have the CREATE and UPDATE actions working.

Add the following code inside your homeController.js. As ng-grid broadcasts the ‘ngGridEventEndCellEdit’, you will check if the ID of the object that the event was fired on is null. If it is null then it is a new employee object. If it is not null, you are performing an update on the existing employee object. The check for ID will tell you whether to perform a CREATE or an UPDATE action.

With this addition, you now have the CREATE and UPDATE operations working.

D – Delete

All you are left with now is to implement the DELETE operation. In your gridOptions, you set a property called “showSelectionCheckbox” to true. This will show a checkbox against every row. Ng-grid also gives you an option to save the selected items to a variable in your homeController’s scope. You set the property called “selectedItems” in gridOptions to “$scope.selectedRows”. This enables ng-grid to save a list of selected rows to the selectedRows variable in homeController’s scope. You can use these to incorporate the DELETE functionality into your app.

Let’s start with adding a “Delete Item” button to your view. Update the home.html file to read the following:

Now you need to add the following code to homeController.js in order to hook up the newly added button with the DELETE action:

You are now looping over the selectedRows object and sending a DELETE command over to the REST service using backandService.  With this, you have a fully working CRUD inside your Angular app using Backand’s REST service.

Using Your Own Database

If you would like to use your own database for this tutorial, please go to backand.com.   After you connect your database, use your credentials and app name.  For any table that you would like to perform CRUD, you will need to swap out ‘Employee’ with the name of your table.  You can check out our GitHub for the Backand generic solution.

References

Backand: www.backand.com
Documentation: http://angular-ui.github.io/ng-grid/
Code: https://github.com/angular-ui/ng-grid
Blog Code: https://github.com/backand/ng-grid-backand-rest-demo

Build your Bootstrap + Angular app with Backand today. — Get started now.

 

аноним на спрашивай ру бесплатноодноклассники через анонимайзерescort girl dubai

  • Pingback: Learn How to Implement Typeahead with ng-grid()

  • Pingback: How to Execute Autocomplete in ng-grid()

  • Majid Lotfi

    Hi, I just bdownload the code, run grunt, went to port 9000, there is only the header nav, when I click in Home there is nothing, black page.

    Do we need to enter our username and password for backand :

    var data = toQueryString({
    grant_type: ‘password’,
    username: ‘akramakom@gmail.com’,
    password: ‘malta122’,
    appname: ‘restdemo’,
    });
    Thanks, your help is appreciated.

  • Not working.