AngularJS has an awesome feature called directives if you didn’t know! 😉 AngularJS Directives in a nutshell provide the front-end developer with custom HTML DOM element representations. In short, this allows you to create your own HTML elements and include them in your ng-template markup partials. It’s hard to say which Angularjs Directives are top though. But here is a list of around 10 which we think should serve as good examples of how you might use the ng-directives in real world web apps. Enjoy.
1. Official AngularJS Directives
Before we look into some Angularjs directives which have been coded by the community (largely) it’s important to mention the directives which come as components in Angular core (around 30 directives). It’s always nice when the framework supports what you want to achieve out of the box! These directives can be used straight away in your ng templates and include useful directives like email inputs, change/blur, keypress events, copy/paste, mouse hover and more.
2. UI Bootstrap Directives
There are currently around 16 directives in the AngularUI Bootstrap including Accordion directive, Alert directive, Buttons directive, Carousel directive, Collapse directive, Datepicker directive, Dropdown directive, Modal directive, Pagination directive, Popover directive, Progressbar directive, Rating directive, Tabs directive, Timepicker directive, Tooltip directive and Typeahead directive.
3. UI Grid (formerly ng-grid) Directives
UI-gridis currrently in beta and is an upgrade to ng-grid (which is still active). UI-grid is a data grid for AngularJS, part of the AngularUI suite which provides you with Directives for tables, sorting, filtering, grouping and more. There is a great tutorial to get you up and running and familiar with the new features.
4. Angular Unicorn Directive
Do you ever get depressed at how few unicorns there are in your AngularJS app? I certainly do. But worry no more, dear friend. With this directive, adding a unicorn to your app has never been easier.
5. Angular Paste MS Excel Directive
A directive which allows for the copy and paste of Microsoft Excel data directly into the browser.
6. angular-placeholders Directive
Directives in angularjs for placeholder images in any size and text based on the placeholders module (https://github.com/joshdmiller/angular-placeholders/tree/master/src/img)
7. AngularJS Draw on Canvas Directive
Simple but nice directive to embed a HTML5 canvas drawing element on your page.
8. Angular File Upload Directive
An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers.
9. Allmighty Autocomplete Directive
Simple to use autocomplete directive in a module for AngularJS! Supports arrow keys to traverse suggestions as well as mouse input. You can load the suggestions from a remote REST API, it also supports promises.
10. Angular Leaflet Directives
This directive allows you to embed a map on your AngularJS application and interact bi-directionally with it via the AngularJS scope and the leaflet map library API.
There are literally too many Angularjs directives to filter through and find the best ones would be a difficult task. At least there are a few resources here which should get you some examples of directives. I’ll try link to some tutorial posts here so you can learn more about how to code directives and get the true power out of them.