Client side Pagination through Custom Angular JS Filter

Angular JS is a powerful front-end framework and often I have tried and successfully delegated it responsibilities for which I might have written a good chunk of code on the server back-end. One such instance was pagination. If you are not familiar, pagination is a technique through which we present tabular data to the user by breaking it into pages.

In one of my projects, I encountered a use-case in which the size of the records coming in was not very very huge. I wanted to paginate the records to enhance the user experience and making round trips to the server to fetch each page felt like forever. It is then I decided to completely handover my pagination responsibilities to the front-end.

I could have done everything I needed to paginate the records on the controller with Loadash doing all the heavy lifting and filtering for me, but I felt guilty. It felt like treason to write something that “un-re-useable”. Beautiful software is not complex, it is simple.  So, I wanted to create a custom filter in Angular JS which would filter out the records for me and all I needed to do was to give it suitable parameters through my view. And then I can use the “all-famous” UI-Bootstrap controls for pagination to show the user what page are you on, how many pages are there altogether etc.

The bird’s eye view of the filter function was:

Input: 1) Complete list of records, 2) Requested page number (we will call this current page) and 3) Records per page

Output: List of records for the requested page

Here is how simple and tiny the filter came out to be …

Its usage is even simpler.

Hook it up as a filter to the ng-repeat expression as follows and it would to all the pagination stuff for you.

— Look for hints in the comments

Pretty simple huh ?

Its complete source can be found in this little github repository. Just clone the it and open up “index.html” and browse to the pagination demo.

It’s good, isn’t it ? — Big Boss

Javascript Testing – Clean object mocking through JSON files

Clean code is what is over my head for the past few days. Thanks to an excellent course by John Papa, Angular JS Patterns: Clean Code on Pluralsight, it has made think why there is a constant need to improve in the way we write code. One thing that struck my mind is the separation of concern, which is essential not only in understanding the code, but also in maintaining the code over long periods of time. I am a big fan of testing my javascript ( … you should be too) and previously I have made an attempt to write clean tests to make them readable, scaleable and all that magic. The motivation behind writing that was a line we hear usually once every sprint, “Hey, lets add this …. “. My previous post outlines one approach but this time I have decided to take it one level up.

So, I will be using an overly simplistic Angular JS controller as a “proof of concept” to demonstrate how we can make our tests cleaner. Have a look at this controller, it contains a call to a service, through which it receives data and upon resolution of the promise, it attaches it to the view via the “vm” variable.

Note: I am using the “Controller As” syntax so bye bye $scope and hello cleanliness.

To test this controller I needed to mock the call to the “dataservice” which returns a mocked response. There are 3 ways we can mock the response.

The Good: because it works!

Declare the mock object in the test file as a javascript variable. This approach is common but it makes the test file feel like spaghetti. Its hard to find stuff and you need to copy over the mock objects if they are used in more than one file. Yuck !

The Better: because we are getting there …

Declare the mock object in a mock Angular JS factory and expose it via a return object. This approach was blogged earlier here. The problem with this approach is that the mock Angular JS factory gets messier as the objects are added to it. It becomes one long/big file making it harder to maintain. Okay …. 

The Best: Bingo!

Declare the mock object in a JSON file, load it inside an Angular JS factory and expose it via a return object. I find this approach to be the best. Each object has its own file and is cleanly loaded into the Angular JS mock factory. The separation of objects into their own files make it a ton easier to maintain. That’s more like it ! 

In order to achieve the “Best” way to mock objects, we will make use of “jQuery-Jasmine” through which we will load the objects form the JSON file but it requires little bit of configuration so lets go through it step by step:

1. Install jquery-jasmine as a development dependency via npm

Run “npm install jquery-jasmine –save-dev” on the root of your project via terminal/bash/cmd.

2. Include jquery, jquery-jasmine as “files to be loaded”

Since I am using Karma to run my Jasmine tests, I only need a simple addition to the files array in my karma.conf.js file. See image below step 3.

3. Include the JSON files as “files to be loaded”

Similar to the previous step, add the JSON files to the files array in the karma.conf.js.

karma.conf.js

karma.conf.js

4. Let Jasmine know from where to load the JSON files from

I have a separate Angular JS module for my mocks, so the place where I declare my module is the place I use to declare the relative path of my tests which would be loaded on the browser.

Note: This path is something karma makes when it loads the tests from the file system onto the browser and can change in the upcoming releases.

 

Screen Shot 2014-11-10 at 12.06.06 am

This is it for the configuration, now we need to create an Angular JS factory which would load the JSON files and expose them as objects in our test files. Here is the JSON file and how we load it into our mock Angular JS factory …

And finally…. This is how the tests look like.

I must say, transitioning from good to better to best feels a lot satisfactory.

All of you can now safely get up from your chairs and do this ….

Smart way of testing Angular JS filters

Writing clean, scale-able and maintainable unit tests is as important as writing application source code with all those qualities. Pragmatic Programmer (yes, the famous book) says that developers are constantly in maintenance mode due to various reasons which means that the tests we write need to be updated constantly. One might think, why so much of overhead? While unit tests may contain tons of other advantages, to me, unit tests give me the confidence I need for refactoring.

Continue reading

Simple questions that helped us deliver 2 weeks before deadline

Although I am in the early years of my software development career, I am often exposed to discussions where we need to make a decision on the design of the application or the database. While working for a reputed security company based in the US, we were handed a task to design a windows console application which would be scheduled through the Windows Task Scheduler. Let’s say it was supposed to do task A, B and C through some .Net Web API.

Continue reading

A short guide on unit testing Angular JS Controllers

Unit testing becomes a challenging task when one is not used to doing it. I faced a similar scenario writing my first application in Angular JS. I took more 3x more time to write unit tests than writing the actual controllers, services etc. I was not sure what and how to unit test. In this post I will go through of what I think is a comprehensive unit test for a controller in Angular JS and for that I will be using Jasmine as my testing framework.

Continue reading

IIS and Grunt configuration for Angular JS application development with Windows Authentication

There are times when one works with a ‘not so popular’ stack of technologies. The stack which I am using for development is one of those. We have a SPA based on Angular JS which consumes .Net Web API through REST services. The icing on the cake is, it uses Windows Authentication, since it is an app designed to be used on the intranet. I had a few hiccups on setting up the development environment mainly due to:

Continue reading

Cleaner and maintainable object mocking in unit testing through angular modules

** Prior knowledge of unit testing angular apps with Jasmine and Karma is required to understand this post.


Modularity in Angular allows us to unit tests the pieces of application with ease. One can easily mock out services and objects and can unit test the angular component (service, controller, filter etc). But there are objects that need to be mocked out in more than one unit test and sometimes they can be big making the test file look really ugly. For instance, the $modal service can be used a lot in the application and we need to test our apps behavior every time a modal opens or closes. So we will need to mock the $modal service in each unit test and here is one way of doing it: Continue reading

Update data on ng-model on event triggers

Angular’s ng-model is famous for its 2 way binding. If there is an input box with an ng-model directive attached to it, angular invokes its digest cycle on each charachter we type, performing validations on the data (if any) and then updating the value on the scope if data is valid. Everything is so fast that it feels that data is validated real time. Sometimes we don’t need angular to update our model as we are typing. Sometimes, we need the user to fill out the complete form and once he performs a click on form submit, or presses enter or loses focus on the field, we want the user to be updated for invalid field entries. To accomplish such tasks, I came up with an up-gradation of the fpSubmit and fpModelUpdateOn directive. Continue reading

Directive to set a scope variable on scroll finish of a div/text area

I came across a problem today in which I had to enable some options (which are disabled on page load) once the text area/div which has a scroll attached to it has reached the end. Usually such are the requirements when you want the user to scroll through or read the complete text before he can continue with whatever hes doing. Since it might become a requirement for other projects as well, I decided to wrap it up inside a small and neat directive. Here is how to use it: Continue reading

Making save password work with Angular JS

With all the power Angular JS possesses, it has succumbed to a rather simple feature, that is the save password on the browsers. If you hit the ‘Save Password’ on the browser after filling in your credentials, the browser stores the information and restores it each time you visit the log in page so you can just press log in or hit enter to sign into the application. Trying that with Angular JS fails unless you add and remove a character to any input tag and try again, here is why … Continue reading