Achievement Unlocked: Finished Learning Devise For Rails

Authors: Hafiz, Nia Mutiara, Giovanni Sakti

Lately, I was tasked to do the user authentication for one of our projects on Rails. The Devise gem is one of the most used gem for this purpose. A colleague recommended this book to gain a preliminary but essential understanding of Devise.

This book is truly helpful! It does not only contain the basics but some of the best practices as well. 🙂


Yay! 🙂 Will be doing a blogpost (and a test project too) soon on it 😀


Angular JS Services (An Overview)

AngularJS services are objects or functions that can hold state across the whole application. Unlike controllers that can be destroyed and created anytime, together with the states and values they hold, services can hold data across your application and can be reused across controllers. AngularJS services usually contain business logic and are used to make server calls and fetch data. They are also usually independent of the views.

Screen Shot 2015-06-14 at 8.44.47 PM

Found above is a service that provides the add and subtract methods. A service is defined with:

.service(‘ServiceName’, [function( ) {

// service definition here


AngularJS services can come in three forms: Factories, Services, and Providers. They are all services and just differ in the way they are constructed and the values they return.

Let’s see the same service above in the form of a factory:

Screen Shot 2015-06-14 at 9.07.21 PM

A factory is defined with .factory instead of .service. As we can see, in a factory, the methods it provide are returned as part of the return object. We first declared the variable factory to be an empty hash, added methods to it, and eventually have it as our return value. In a service, the methods are defined on the service itself (using this as seen above).

Services in AngularJS are lazy loaded meaning they are only instantiated the first time they are needed in the angular application. Services are also singletons meaning the same instance that was instantiated during the first call, is the same instance that is passed everytime the service is needed.

Dependency Injection

Services are also heavily related with AngularJS Dependency Injection. Services can depend on other services too. To specifiy a dependency of a service you may do it like this:Screen Shot 2015-06-14 at 8.54.53 PM

Here in our MathService service, we injected BasicOperationsService as a dependency and pass it as a parameter to our function definition for use in our methods. In both our square and cube methods, we invoked the multiple function of BasicOperationService.

Most of the time you will find yourself needing a service in your controller which can be injected the same way:

Screen Shot 2015-06-14 at 8.56.56 PM

Here we have injected several dependencies, $scope, BasicOperationsService, MathService, and BasicOperationsServiceV2 into our controller and pass them as parameters for use inside our controller.

As you may have noticed, here we used the safe style of injecting dependencies and that is listing first the dependencies and then passing them as parameters to the function. More on Dependency Injection in my next post. 🙂

For the complete source code of the services and factories used in this post, you may refer to the ng-calc repository at my Github page at 🙂 It basically is a calculator that does the basic math operations (add, subtract, multiply, and divide) together with squares and cubes and is implemented using AngularJS services and factories.

Happy coding!

HTTP Error 413: Request Entity Too Large

Last week, we were working on an image uploader using the gem PaperClip. We set our PaperClip Size Validator to only accept images that are less than 2 Megabytes. In our file model:

Screen Shot 2015-06-13 at 10.38.30 PM

Testing on local setup, uploading a 1.7 MB works fine. But when we tried it on our staging environment (using Nginx), upload does not push through and we are given a HTTP Error 413: Request Entity Too Large.

Researching around the internet, we found out that it has something to do with the client_max_body_size config of Nginx. Following the instructions we found on the net, we looked for our nginx.conf file in /etc/nginx but the config for client_max_body_size is not there. Taking into account, that our server host multiple sites (one for public use and another for admin),  we checked out the sites-enabled folder (/etc/nginx/sites-enabled), and edited each of our sites’ config file.

The client_max_body_size setting can be found under the server block. It was initially set to 1 MB that is why 400KB files are allowed but 1.7 MB files are not on our staging setup.

We set each of our sites’ config files to have a client_max_body_size of 2 MB,

Screen Shot 2015-06-13 at 10.47.51 PM

And voila! Restarting nginx and our server the error went away. 🙂