Today we’re taking a look at some of the most useful and used Angular.js directives to help you extend your applications, to help you give your applications a new feel and look without writing any of the hard code yourself.
15 Directives to Extend Your AngularJS Apps
With this directive you can forget about having to rely on heavy iframe’s that take forever to load, the LazyTube directive for Angular.js was built to help you load videos with ease, videos that will degrade gracefully and give your visitors a seamless experience.
Angular can do many things (as we will see throughout this post), and amongst them is the ability to allow your visitor to view PDF files directly from the browser, although modern browsers do provide this functionality, it’s still nice to be able to see content straight from its source, rather than download it separately.
Do you ever come across websites and blogs that share content, but also show how long on average it should take to consume/read that content? This directive is built to serve that exact purpose, in some cases it can prove to be very beneficial to know how long is it going to take to read something.
An automatic validation module for AngularJS which gets rid of excess html in favor of dynamic element modification to notify the user of validation errors.
An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string.
As with videos, images can sometimes prove to be very bandwidth consuming and on sites that serve a large amount of images, it might be a good idea to utilize the benefits of features such as lazy image loading. Works great with responsive images.
Any marketing website/project built on top of Angular.js should have this directive utilized, it allows you to create smart tunnels for acquiring leads through showing content only when a certain part of the website has been reached, usually indicating that the user is somewhat interested in your product.
Save yourself a ton of time by not having to build a separate library of notification bars and boxes, as this directive will give you everything you need to serve pleasant and smooth notifications to your visitors. The integration is done using Font Awesome and jQuery.
Have you ever seen the editor that the popular blogging site Medium uses? It’s quite a fascinating piece of work, and whilst many people don’t seem to enjoy it, having it on your own Angular application could mean that your users get access to something they’re already familiar with. That’s exactly what this Angular directive will provide to you, an easy to use replica of the Medium content editor.
The web technology over the years has evolved immensely, and perhaps this directive is the direct example of that; no longer do we need to rely on poorly styled HTML tables, now we’ve got access to things such as Object-tables, a smart tables directive for Angular. Check it!
A very simple directive that will allow you to create pressable buttons, inside of which you can integrate loading icons that further enhances the user experience.
Have you ever clicked on something and have had a popup box with content returned? This is that vModal was built for, to serve that exact function. Easy to use, smooth and stylish.