Just a few days ago we saw a release of Angular 1.4.0 — a community driven release that covers a list of over 400 GitHub commits, adding improvements to features such as animations, and accessibility. The official press release covers most of the ground, it’s worth hanging around the official repository as well.
Angular.js is an amazing JavaScript framework, there is no question about that, but despite the popularity and increasingly growing community, a lot of developers in the community feel that Angular is just another way of wasting one’s time and productivity. Amongst the least favorable issues you will find that testing and debugging are a nightmare to work with. You can find these reports scattered across the web quite easily, here’s one of them; a deep look at why you shouldn’t opt for Angular at all.
Whatever the case, we’re not here to observe the advantages and disadvantages of this framework, what we want is a way of extending our preexisting Angular profile with additional widgets and tools to help us become better developers. 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.
angular-lazytube
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 PDF Viewer
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.
angular morris chart
If you know of the amazing JavaScript library morris.js, then you will love this directive. It’s a direct wrapper for allowing you to utilize the benefits of morris.js into your Angular.js projects. Get your charts on!
ng-readingtime
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.
Angular-auto-validate
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.
ngEmbed
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.
ng-lazy-image
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.
scroll-trigger
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.
angular-atomic-notify
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.
Angular Grid
Angular Grid is an Angular.js built directive that uses Angular where necessary, but supports native JavaScript everywhere else. A grid built using this directive that’s built only using Angular will prove to be significantly slower than one using native language. Feature rich, light weight, minimal footprint, no external dependencies. Angular Grid will make your applications run faster.
ngMeditor
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.
Object-table
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!
Ng-sweet-alert
The great thing about this alert directive is that you don’t have to write any additional JavaScript code to use it, it will naturally integrate using the HTML stuff that it comes equipped with. Smooth design, and by testing the example, the transitions seems smooth as well.
vButton
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.
vModal
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.
Directives for Your Angular.js Apps
In terms of modifications, Angular.js stands out with the easily adjustable directives that can be built from scratch in just a few minutes; there is support for all modern technologies, and using directives in your apps is like using libraries for any other programming language.
On top of these directives, we have previously shared Angular.js related content that covered an easy way of building a multilingual Angular.js app, as well as a more popular post that covered a list of free books for learning the Angular.js framework. We also recommend to check out our recent feature of the best resources for learning ReactJS; a sort of a rival to Angular, but certainly worth checking out.
Good Article!
You’ve got a nice site there, Rahil. Get in touch with me/us if you ever want to share your content with a larger audience.
Thanks Alex, and thanks for the invitation as well, I’ll let you know.
Nice job putting together this list of such useful directives! Hopefully my own directive, ngTagsInput, will be part of a select group like this some day. :)
Hi Michael,
looks good. I’m still waiting for the initial heat to settle for this post before I decide to update it, would love to hear a few more suggestions from the community members as well. Thanks for feedback!
Very informative and good place to start with .. thanks for putting together
Hey Rakesh,
awesome, glad you enjoyed it. Thanks for stopping by!
Thanks for this article
Murali,
thanks for the comment and taking the time to read, awesome! :)
Alex, what a very odd way of providing helpful tools to others.
So you have to say Angular is “really good”, but I feel compelled to tell you that a few people on the planet think it’s “really bad”. But, oh BTW, here’s some directives you can use.
Very strange. :\
Do you mind sharing why you chose this approach?
Hi Jeff,
opinions differ, at the end of the day it’s only opinions, which frankly are based on personal experiences, and majority of experiences that I have come across have been really good, but even then — you might disagree with my limited scope and keep fighting a never-ending loop! This post is clearly meant for people who are aware of Angular.js as a development framework, the name “directives” itself is something that only the Angular community uses, making arguments within the first few paragraphs on the post about whether it is good or bad sounds quite silly to me, and a much better fit would be to create a separate post: “The Pros and Cons of Angular.js” how about it Jeff? I would love to have your writing published with us. :)
Angularjs is really cool. It makes my life easy. And thanks a lot Alex for sharing such a useful directives in one post.
Thanks for the positive feedback, Azat. Glad you enjoyed it!
Excellent and interesting article about the angularjs. It is very useful for us. Thanks for sharing..
Thanks!
Awesome post…
Many of the directives are useful in my application :)
Ashish, glad it’s useful to you, thanks! :)
I am the creator of ngEmbed. Thanks for including it. For anyone who want’s to use it without Angular, there’s also a jquery version named embed.js (https://github.com/ritz078/embed.js)
Hey Ritesh,
no worries man, feel free to send in more stuff that you’re working on (context wise), and thanks for linking out to the jQuery version as well!
This is a solid list of directives. My coworkers developed an Angular directive for including interactive charts that may offer more options than Morris, for anyone who is using charts in their project. You can view it and a demo at https://github.com/zingchart/ZingChart-AngularJS
Hi Merrily,
interesting! How are you guys doing sales wise, what’s the demand for something like ZingChart’s? Either way, thanks for linking out to the directive, will take a look at it.
Nice article.Thanks for bringing different directives at one place.
Very Nice article, Alex. The Angularjs community is really growing in leaps and bounds and these list of directives just makes application development easier and faster.
Excellent site…..you are giving very much use full information.
Thanx alot :)
Thanks for sharing this article, Its very helpful
This help a lot.