12 Step-By-Step How to Create a Grid using AngularJS

         By Carmel Schvartzman

In this tutorial we'll learn how to create a Grid in our AngularJS Blogs Application. You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 12 in this walkthrough to design an end-to-end AngularJS client MVC app.
In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.
We'll be creating a Grid that displays data returned by the REST back-end we created previously in Tutorial 10 , and it will be exposed like this:

1. We'll add the grid at the AngularJS View we created in the Tutorial 8, in a file named BlogList.htm:
   
   
2. Because this file will become just a template embedded inside another html file, we delete all of the html code except the table that will host the AngularJS grid. Type the names of the columns according to the field names:
   
3. Next, open the AngularJS Resource (created at Tutorial 11  
   ) in the file Blog.js, and copy the name of the Scope variable which holds the data returned from the server:
   
   
4. Add to the TBODY html tag the AngularJS Directive "ng-repeat": it means that FOREACH item in the posts's collection returned by the REST api, the AngularJS engine will build another TR:
   
5. Inside the ng-repeat directive, set that AngularJS should create one record for each of the "blog" items in the "blogsList" collection Scope variable which holds the data returned from the server:
   
   
6.  Type the names of the columns according to the field names returned by our REST back-end, enclosed by the "{{  }}" data binding AngularJS notation:
   
7. Finally, add some AngularJS code to display the dates in a more appropriate format:
   

The data exposed on our grid will appear as follows:


That's all!! 
Happy programming.....

כתב: כרמל שוורצמן