Angular.js is an amazing JavaScript exciting and there’s no question about that. But despite the popularity & the increasingly growing of the community, a lot of developers feels that Angular is just another way of wasting one’s time & productivity and amongst the least favourable issues that you will find is testing and debugging these are a nightmare to work with and you can find these reports scattered across the web quite easy.
Whatever the case, we are not here to observe whats the advantages and disadvantages of this framework but what we want is a way of extending our pre-existing Angular profile with additional widgets and tools. Today In this round we are taking a look at some of the most great and useful Angular.js directives to help you extend your applications without writing any of the code yourself.
1. Angular LazyTube
This AngularJS directive replaces any heavy iframes or links with a image preview that loads the player only on click. Useful when performance and page size is important or for sites with many embeded youtube videos.
2. Angular Lazy Image
Directive for loading responsive/ adaptive image when parent container (which is preventing reflow) is in viewport. Available as bower component for your project. JavaScript only component.
3. NG Sweet Alert
This Directive can be use in angular js application ,without writing a javascript code,All configuration can be done in HTML itself
4. 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, there’s is also non-Angular named embed.js
5. 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.
6. ElasticUI
ElasticUI is a set of AngularJS directives enabling developers to rapidly build a frontend on top of Elasticsearch. It builds upon the elastic.js implementation of the Elasticsearch DSL. The concept of ElasticUI is to have one “view” of your index to which you can add aggregations, sorting, paging, filters by adding directives in your html.
7. AngularStrap
AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application. With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!
8. Angular PDF Viewer
We all know that Angular can do many things, 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.
9. Object Table
This Angular directive enable data representation via tables. It makes possible search, filtering, pagination, compound sorting, editable cells, row templates, etc… Exhibits high performance. Without any dependencies – just pure Angular.
10. ngTagsInput
ngTagsInput is a highly customizable tags input directive built for the AngularJS framework, with no external dependencies. It provides a tags-input element so you can semantically express you’re using an input with tagging capabilities.
