Web Development is Easy!

frameworks, tools and tips for web developers.

Interceptors in AngularJS and Useful Examples

The $http service of AngularJS allows us to communicate with a backend and make HTTP requests. There are cases where we want to capture every request and manipulate it before sending it to the server. Other times we would like to capture the response and process it before completing the call. Global http error handling can be also a good example of such need. Interceptors are created exactly for such cases. This article will introduce AngularJS interceptors and will provide some useful examples.

AngularJS Data Model

As we already know, AngularJS doesn’t come with an out of the box solution for data modeling. In the most abstract way, AngularJS lets us use JSON data as a model in the controller. As the time passed and my application grew, I realized that this modeling method isn’t powerful enough to fit my application’s needs. In this article I will present the way I dealt with data modeling in my AngularJS application.

Flexbox Accordion

I have made a css accordion using flexbox and I like to share it. This is how it looks like:

  • GooglePlus
  • LinkedIn
  • Picasa
  • Wikipedia

Easy Select Plugin

One day I was asked to add a text input component with an ability to choose a value from fixed list. After searching the web, I found several jQuery plugins that was able to solve my needs and much more. But, those components required many dependencies and weighed so much for my simple need. So I decided to write my own plugin. Easy Select requires jQuery only and takes 3kb minified (before gzip):

Select a continent:

Single Page Application Authentication

This article will guide you how to add user authentication to your single page application. On the back end side I will use Node.js and on the front end side I will use AngularJS. Although I used specific frameworks, you may apply the same technique for different back end and frond end frameworks (rails, Backbone, etc…).
The final application will look like this (without the horrible styling):

Pages Slider With JavaScript and CSS

In this article I will show you how to build a pages slider that looks like those on our smartphones. At the end we will get this:

Slide left to see this in action:

Backbone Cleanup

Backbone allows our users to browse our website without refreshing the page. Each page the user visits consists of several Backbone views which are replaced whenever the user navigates. Views reflect our data models and interact with each other. This can be done by listening and triggering events which add functionality to the page. Whenever the view is replaced, there is a need to clean up the removed view, unbind events and remove unmanaged structure.
This article suggests a solution to the views cleanup problem.