Creating a Simple AngularJS Grid Directive

In this tutorial, we’ll see how to get started with creating a simple AngularJS grid directive for displaying data in our web applications. We’ll make use of bootstrap for designing the grid.

First, clone the angular seed project and install the required dependencies.

git clone https://github.com/angular/angular-seed.git
cd angular-seed
npm install

Start the server and you should be able to browse the application.

npm start

Application should be running at http://localhost:8000/app.

Getting Started

If you browse your cloned application you should be able to see the default application with two views: view1 and view2.

Remove the view1 and view2 folders from the application. Open index.html and remove the script reference from view1.js and view2.js. Open app.js and remove the view1 and view2 modules from myApp.

Add a new home folder in the application. Add a file called home.html and home.js. Here is how the home.js file looks like:

'use strict';

angular.module('myApp.home', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'home/home.html',
    controller: 'HomeCtrl'
  });
}])

.controller('HomeCtrl', [function() {

}]);

Add a reference to the home.js in the index.html. Also inject the home module in the myApp AngularJS application in app.js file. Here is how app.js file looks like:

 'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.home'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/home'});
}]);` 

Inside the Home controller , define a list of employees as shown:

$scope.employees = [{
    firstName: 'Roy',
    lastName: 'Mendees',
    location: 'New Delhi'
}, {
    firstName: 'Hari',
    lastName: 'John',
    location: 'Chennai'
}, {
    firstName: 'Rahul',
    lastName: 'Kurup',
    location: 'Bangalore'
}, {
    firstName: 'Samson',
    lastName: 'Davis',
    location: 'Mumbai'
}, {
    firstName: 'Shilpa',
    lastName: 'Agarwal',
    location: 'Noida'
}]; 

Now we’ll make use of bootstrap to render our employees data in the home.html page. Install bootstrap using bower and include the style reference in the index.html page.

bower install bootstrap

Next in the home.html page add the following code to render the data from $scope.employees.

<div class="panel panel-primary">
    <div class="panel-heading">Employee Data Sheet</div>
     <table class="table">
        <thead>
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    Last Name
                </th>
                <th>
                    Location
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in info">
                <td>
                    
                </td>
                <td>
                    
                </td>
                <td>
                    
                </td>
            </tr>
        </tbody>
     </table>
</div>

In the above code, we have made use of the ng-repeat directive to iterate through the employees data and display it. Here is how it looks like:

Creating AngularJS Grid Directive

Now what we’ll do is, move the grid display code into a separate directive which can be used across the application without repeating the code. So, let’s start by creating a new folder called directives in the app folder. Inside directives folder create a file called directives.js.

Inside the directives.js we’ll define a new module called myApp.directives and create a new directive called myDataGrid. Here is how it looks like:

'use strict';

angular.module('myApp.directives',[])

.directive('myDataGrid',function(){
    return{
        restrict: 'E',
        scope:{
            info:'=info'
        },
        templateUrl : 'directives/grid.html'
    }
});

In the above code we created a simple element directive which would render the template from the specified templateUrl. We have also passed an info to the directive’s scope to be rendered in the HTML . For the above directive to work, move the home.html code to a separate file called grid.html inside the directives folder.

Add a reference to the directives.js script in the index.html page.

After that inject the myApp.directives module in the app.js file.

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.home',
  'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/home'});
}]);

In the home.html page, add the directive element and pass in the employee data as info attribute.

Refresh your application and you should be able to view your first AngularJS grid directive to display a set of JSON data. :)

Conclusion

In this tutorial, we created a simple AngularJS grid directive to display a set of JSON data. In the coming tutorials, we’ll see how to add a few more features to the above directive.

If you find any issues, corrections or if you have any suggestions, feel free to drop in a comment. Happy coding :)