8 Useful Guidelines and Filters for AngularJS

While working with AngularJS one often requires some guidelines and filters, which greatly simplify the development process and add responsiveness to interface. Many of them are quite trivial and demand access to search engines. Most of them can be found by a quick search, but I put together in one place a few tools that we commonly use in our projects.

Email address validation

To verify the email address we use a simple regular expression. Note that it is only used to verify that a user has not entered obvious nonsense. If you follow the RFC standard, it is possible to encounter some difficulties. This is due to various factors: the constant updating of the domain zones list, the use of Internationalized Domains (IDN), the use of sensitive addresses and many others. So, our validation checks only the general structure of addresses (the presence of ‘@’ and dot), otherwise it relies on the adequacy of a user. If you really want to validate an email addresses, it is better to use a confirmation by e-mail than to come up with bulky regular expressions.

Finding an element in the array by value

The task of searching in an array by a value-specified field occurs quite often. For example, it can be used to find an element with a certain ID. The simplest function getByProperty eliminates the frequent use of cycles in a code.

Example of use:

Generating a unique identifier

While developing single-page applications (SPA, single page applications), it is sometimes required to create unique identifiers directly on the client side (front-end). For these identifiers to work properly with a server (back-end), you should create them in the usual UUID format . Here is a small feature that has never let down:

Processing pressing Enter at input

To improve the experience of your product, it is worth thinking about even minor details. For example, you should allow a user to still operate with his usual hot keys. After filling some data in the text field I want to confirm the action by pressing Enter, instead of taking your hands off the keyboard and drag the cursor to the button.

Here’s how to use this directive:

Representing bytes in a human-friendly format

Since BitCalm commonly uses file sizes measurement, we needed a tool to convert units in a convenient format on the fly. For this purpose the following filter for Angular was written

Here’s how it works:

Creating a nested scrolling

The situation where on the page with a scroll bar there is sub-element, which you can also scroll through, causes great inconvenience.scroll.png

When the cursor is over an area 2, both scroll bars will be scrolled which makes it impossible to comfortably view the content in this area. To solve this problem, we use a simple directive:

When you hover over the necessary item the standard action gets blocked and a simple operation is applied with the scrollTop feature.

Playing sound upon certain events

If your application requires producing sound upon specific events, it can be done with the help of the following directives:

Now, of all the places of an application you can send ‘playSound’ events using $emit and $broadcast. The element must have the attribute ‘msrc’ with the path to a file. Otherwise, the path can be sent to an event as an argument.

Determining of the tab browser activity

There are times for you to perform some action when the user switched from the tab with your application (the examples of actions are switching on audio alerts, enable browser-based notification, etc.). For this one may use the following function:

Two callback-functions, which come for an input, can perform any action upon the ‘focus’ or ‘blur’ events.

I hope this method will be as useful for your AngularJS work


Arif Khoja
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.
Arif Khoja on FacebookArif Khoja on GoogleArif Khoja on InstagramArif Khoja on LinkedinArif Khoja on Twitter

Leave a Reply

%d bloggers like this: