15 Step-By-Step How to add Paging functionality to an AngularJS Grid

         By Carmel Schvartzman

In this tutorial we'll learn how to add Paging functionality to an AngularJS 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 15 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 add paging functionality to an AngularJS table, resulting in the following :

In order to add the paging functionality, find in your REST API the method which serves GET http requests. In the Rest API walkthrough we called that method "Blogs" in the "NatureController" controller:



Once you have found it, append to its parameters two new named "size" (the actual size of the page to render) and offset (the current record to send to the client):


Then , code that in case offset is bigger than 0, skip the records until you reach that #offset row:


If "size" has been set, TAKE from the collection the corresponding records.
Save the .cs file, rebuild the project, and press CTL-F5 to start running without debbugging. Now open some browser and type the app URL in it, to check the rendered data. The URL must be in the shape "localhost:YourPort/YourController/YourActionMethod":



After checking that it works and there are no bugs in the REST API back end, open the HTML file which holds the AngularJS View: "BlogList.htm":


After the grid, create a <button> tag to perform the paging. It will call the SeeMorePosts() javascript function when clicked, and it will be visible only when the CheckForMorePosts() functions resolve to true:


Next, let's prepare the AngularJS $resource to support paging functionality. Take a look at the AngularJS documentation at angularjs.org:



Open the "Blog.js" file, where we set our AngularJS controller, and find the $resource's "query" function, which send the requests to the RESTful API backend:



As we can see in the AngularJS documentation, such "query" function can be invoked with a bunch of arguments and also a "success" parameter, meant to hold the callback:



Therefore, append the two arguments we'll send to the API (take care to keep its case-sensitive definition):




Next, take a look at the callback block:



It just copies the returned data into the client side collection. We must change that to enable paging:


We'll need a $scope boolean variable named "thereAreMorePosts" which checks whether the response returned as many records as the $scope "size" will states. Just by now, hard code some size like "2": that will be the size of the page. In addition to that, each time there is a successful response, we'll APPEND the returned data to the client collection, using the "concat" method:


Now we create the $scope variables we need , at the AngularJS controller:



Save everything and refresh the app, to check we have no bugs, and the exposed records are as much as the page size sets (2 by now):




Now let's code the "SeeMorePosts()" function called when clicked the button. This function will update the page offset, before calling the controller method which actually invokes the Restful API:



Also, type the "CheckForMorePosts()" function which is used to toggle the button's visibility:





Take care to code those functions INSIDE the boundaries of the AngularJS controller:



Remember: the starting boundaries of the AngularJS controller are these:




 Again, save everything and refresh the browser, clicking the paging button:




....  until the returned data is lesser than the page size, to see the button dissappear:




Now, let's add several records to see how it works. Remind yourself of the "Blog" table structure, as pictured in the Entity Framework designer:



Go to the SQL Manager and open the "Blog" table:


Add some data, several new records to display on the AngularJS View:



Remember to copy the corresponding .jpg pictures to the "Orchids" project folder :




Go back top the browser, refresh the web page:


 We got 2 records, as the page size sets. Now push the button:



Now we got another 2 records, making 4 on the whole. Again, click the button to see another 2 records added to the View:


Finally, only one record is added, and therefore the button dissapears:






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

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

10 Step-By-Step How-to create an REST API back-end

         By Carmel Schvartzman

In this tutorial we'll learn How to create an REST API back-end using ASP.NET MVC, in order to load the data with the Controller in our AngularJS Blogs Application. That AngularJS controller will get a Resource via dependency injection. 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 10 in this walkthrough to design an end-to-end AngularJS client MVC app. This is the starting of the REST API: here we'll learn to create a REST for just GET requests, which returns all the posts of the Blog. In further tutorials we'll add the REST API methods to perform CRUD operations, such as CREATE, UPDATE, DELETE or FETCH A SINGLE POST.

In Visual Studio 2012 you can use the Web API template to get the REST API in place. However, we'll use an plain ASP.NET MVC application and manually create the REST interface. This way we'll get a REST API using JSON (JavaScript Object Notation) and not XML, which is the default of the Web API template.

By the end of this short tutorial we'll have the following JSON data displayed in the browser:

1. In order to create the REST API let's open Visual Studio and use the ASP.NET MVC project we deployed in previous tutorials. Next, add a new Controller as follows:

2. In the "Add Controller" dialog, type the name of the controller. Remember that the "Controller" term is part of the MVC convention, so type "Nature" + "Controller" in order to design our REST API:


3. We get a method called "Index" that returns an ActionResult object:

4. Because we want our API return JSON, change the returned value to "JsonResult". Also, let's call the method "Blogs", because it will return the blog posts saved in the database. Notice we stated that the method can get an optional "Id" argument : that will allows us to use this method for both fetching ONLY ONE post ( if we send an ID to the method ) or ALL the posts ( if we don't ):

5. As for the returned object, type "Json" and you'll get the following intellisense aid:

As you see, the Json object returns JsonResult, which in turn serializes the data to JSON format.

6. Notice we will use the "2 of 6" option of the Json overloaded constructor. Because we want the method to react to a GET http request, we must state that as the JsonRequestBehavior of the function:

Therefore, select the "AllowGet" option:

7. Change the comments to remind yourself that this method answers HTTP GET requests, and that the REQUEST URL must be "http://localhost:XXXXX/Nature/Blogs":

Also, because we use an BOTTOM-UP approach, let's test our REST API returning just a string, to see how it works. So give the Json constructor a POCO object containing just a field "data" instantiated to the string "test". It will be serialized by the JsonResult to the JSON { "data":"test" }.

8. Go to the "DEBUG" menu and select "START WITHOUT DEBUGGING" or press CTL-F5. That will launch the AspNet Development Server using some default port ( in my case, you can see it uses the port 17564) . Open the browser and type "localhost:XXXXX/nature/blogs/"  ( replace the XXXXX with the port you are using ) :

You can see that our REST API reacts to a GET browser  request.

9. Open your SQLSERVER Management Studio and type some demo data to the Blog table: (reference to the tutorial  to create the database tables):

10. As you can remember from our previous tutorial on adding an Entity Framework , we can use the NatureModel we created there, so add the following "using" directives:

11.  Next, let's initialize the Context:

12. Now it's time of replace the test data we just used with the true posts. Declare a generic List of Blog objects, and fetch all the blogs as follows:

13. And construct the Json object this time using the true data:

14. Rebuild your project ( F6 ) and switch to the browser. Refresh it and instead of the test data ( { "data":"test" } ) we'll see the true data in JSON notation:

As we stated above,  in further tutorials we'll add the REST API methods to perform CRUD operations, such as CREATE, UPDATE, DELETE or FETCH A SINGLE POST.

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

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

3 Step-By-Step How-to add an Entity Data Model

            By Carmel Schvartzman

 In this tutorial we'll add an Entity Data Model to the .NET MVC 4 application which serves as a backend to our 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 3 in this walkthrough to design an end-to-end AngularJS client MVC app.

1. Mouse over the "Models" folder and right-click >> Add >> New Item:

2. Select "Data" and ADO.NET Entity Data Model:

Name the E.D.M. as "NatureModel".

3. Our Data Model will contain data from  the database:

4. Choose the data connection appropriate to your SQL SERVER, and name the saved connection in the Web.Config file as "NatureEntities":

5. We'll want to include in our model the tables we created previously on STEP 1 of this walkthrough:

6. After you pressed "Finish", you can open the EDMX (Entity Data Model x) file to see the Entity Model:

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

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