ng-Grid Pagination - AngularJS

Question

   <div ng-app="myapp">
    <div ng-controller="Ctrl">    
     <table ng-grid >
        <tr ng-repeat="todo in todos">
            <td >{{todo.name}}</td>
            <td >{{todo.estimate | number}}</td>
            <td width="50">{{todo.done }}</td>
            <td title="Create At">{{todo.created_at | date}}</td>
        </tr>
     </table>
    </div>
   </div>

And the javascript code is in http://jsfiddle.net/dalcib/J3fjc/ . I am new to AngularJS, I can understand the above html. Would someone please explain me what's really done there in the javascript?

It's one of the answers for How to do paging in AngularJS?.

Answer 1

From and Angular perspective, this is probably the most interesting javascript line:

angular.module('ngGrid', ['ngSkip']).directive('ngGrid', function() {

The line is doing two things. First defining an Angular module, and second, defining a new directive inside that module (named ngGrid). (As a side note, there is another very big project named ngGrid, and this does not seem to be related).

You'll see that inside the directive, an object is being built up and returned (direc). This defines the configuration of the directive. Once you read the Angular Directive documentation, the structure of the code should start to make sense.

I must say, you've picked a pretty sketchy example to start to understand. Perhaps, it would be better to start with the Angular Tutorial and build up from there.

A quick definition from the docs of what a directive is:

At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.