This site uses cookies to offer you the most relevant web experience. To learn more, please read our privacy policy.Accept


Building efficient user interaction is critical for the success of any web application. A perfect example is the type-ahead feature in Google search interface which makes relevant auto-complete suggestions to make searching for results faster.

In order to drive the feature of type-ahead in webpages, all we need is JavaScript with the regular culprits HTML and CSS. As we know HTML helps render a webpage, CSS gives the look and feel to a webpage whereas JavaScript helps defines interactivity. Multiple interactive features, one like type-ahead, in a web application poses a greater challenge from design and operations perspective.

Type-ahead is a very common feature with a lot of open source JavaScript implementations. One of the most popular implementations is from twitter which helps keep HTML code readable, reusable and maintainable. However, finding third party libraries for building interactions specific to your business can become challenging. One alternative to implement such custom functionality is by using Angular Directives.

We have implemented many functionalities in RevX platform using Angular custom filters and custom directives. For example, we wrote a custom Angular filter for formatting the numbers in human readable strings (eg. $1000 to $1k or 60 minutes to 1h). The filter also supports adding the right currency symbol for price values, for eg. $ for USD. This custom filter is re-used across all of our UX dashboards and helps keep the formatting consistent across every page.

<!-- Code example : -->
<span>{{100000 | numFormat : 'currency' : '$'}}</span> 
$100K
<!-- numFormat is the custom angular filter -->

 

Angular JS Directives

These directives are a set of instructions for the HTML compiler to perform a specific functionality against a DOM element. One can build custom directives or custom HTML tags along with using many in-built directives provided by Angular like ng-show, ng-hide, ng-if, ng-repeat etc. Angular with these abilities provides a general framework that helps us build reusable functionalities for many common use cases rather than using individual libraries where each can only solve one use case at a time.

 

execution flow of AngularJS directive

Execution Flow of AngularJS Directive

 

Consider below example of a custom interaction we wanted to build for the Advertiser entity in our application. Whenever a user mouseover any of the advertiser’s name across any page in our web application, we wanted the user to see the advertiser’s detail in an overlay (see screenshot below).

 

interactive web app suing angularjs

 

We implemented a custom directive “advertiser-details” to wrap the JS, HTML and CSS functionality of opening the overlay on mouse over which shows the details of particular advertiser. The directive accepts an argument “adv Id” which is used to fetch details of specific advertiser.

<tr ng-repeat="advId in advListCompact">
 <td><advertiser-details id='{{advId}}'></advertiser-details></td>
</tr>

Below fiddle code explains the implementation of the feature:

 

Angular JS Filters

For any frontend developer, there are often key common use cases like formatting currencies, limiting the number to display, date format etc. Angular JS provides a lot of common filters by default. Developers can also write their own custom filters. Angular JS filters are very intuitive and readable from the developer’s perspective which makes code maintenance relatively easier. We can build the custom filters in different ways:

  • Static: One use case is to change the case of the letter using static filter
  • Filters in repeat: We can add our own custom filters in the ng-repeat. We have used it to filter out the advertisers from the list which belongs to the selected cities
  • Filters in repeat with argument: In the above use case we can also pass the city field as an argument to dynamically filter the advertisers

 

<!-- Static Filters -->
<h4>{{revx | toupper}}</h4>
revxApp.controller('MyCtrl', function($scope) {
  $scope.revx = "driving performance and brand experience";
});
Result:
DRIVING PERFORMANCE AND BRAND EXPERIENCE
<!-- Filter in repeat -->
<ul><li ng-repeat="adv in advertisers | advertisersOfBangalore">{{ adv }}</li></ul> 
revxApp.filter('advertisersOfBangalore', function () {  
  return function (advertisers) {  
    var filteredResult = [];  
    for (var i in advertisers) { 
    	if (advertisers[i].city == "bangalore") {  
          filteredResult.push(advertisers[i].name);  
      }  
    }  
    return filteredResult;  
  };  
});
Result:
<!-- See the result below in fiddle example... -->
<!-- Filter in repeat with argument-->
<ul><li ng-repeat="adv in advertisers | city : 'delhi'">{{ adv }}</li></ul> 
revxApp.filter('city', function () {  
  return function (advertisers,city) {  
    var filteredResult = [];  
      for (var i in advertisers) {  
        if (advertisers[i].city == city) {  
        	filteredResult.push(advertisers[i].name);  
        }  
      }  
    return filteredResult;  
  };  
});
Result:
<!-- See the result below in fiddle example... -->

Conclusion

Angular directives and Angular filters help in creating reusable and independent codes which reduces code footprint, enhances the code maintainability, reduces application development time and improve developer's productivity making Angular by far more popular for creating interactive web applications than vanilla JavaScript.

About RevX

RevX is an app retargeting platform that powers growth for mobile businesses through dynamic retargeting. The platform is built on integrated and transparent technology combining four key pillars - audience intelligence, programmatic media, personalized ads, and ROI optimization. Mobile marketers across verticals like e-Commerce, travel, lifestyle, hyperlocal and gaming use RevX to enhance user engagement by activating new users, converting existing users and re-activating lapsed users.

If you have any doubts, queries or ideas, do reach out to us at This email address is being protected from spambots. You need JavaScript enabled to view it.