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.
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.
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.
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).
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.
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
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.