Web application developers also have ready access to several pre-built directives/libraries for AngularJS making this framework even more interesting. Lets explore a few popular ones.
Angular Strap provides a set of native directives that allows you to use web components such as modal, popovers etc provided by bootstrap in your AngularJS application. It has no external dependencies except the Bootstrap CSS styles. It also provides animation support through the ngAnimate module and corresponding animation classes such as fade, slide, flip etc. Angular Strap is one of the must try modules if your UI has a stack of Angular.js and Bootstrap CSS!
Let’s face it, the official router provided by AngularJS only suffices for building simple application, but lacks features required by big and complex apps. UI-router is a powerful routing library which turns your application into a state machine. It provides states which are bound to views. Unlike the ngRoute module, UI-router allows you to have parallel as well as nested views. These states may or may not have routes.
Angular Loading Bar
As the name implies, this directive provides a loading bar at the top of the screen, similar to the one you may have encountered on YouTube. What makes this library standout from the rest is that it’s completely automatic. You only have to include the JS and CSS file, inject the dependency, and the loading/progress bar will show in your next $http call. Another important aspect is it also provides various configurable options to developers.
This library provides a convenient and clean way to display alert messages or notifications for your Angular applications. It uses standard bootstrap alert classes and also provides various configurable options. Notifications can be displayed inline or globally.
Pagination is an important aspect in any application. A page with a never ending scroll and list of items may not be appealing to users. Although there are quite a few pagination solutions available, dirPaginate stands out from the rest for its simplicity and ease of use. For using dirPaginate, you don’t have to set up any logic in your controller. All you need to do is just add an attribute, drop in your navigation and it works!
The UI-Grid library provides almost all features that you would typically need to implement on your grid system viz : Sorting, Searching, Pagination and much more. Ng-grid is being rewritten as UI Grid and is currently in beta stage. It requires no other dependency other than AngularJS. Explore more on UI-grid here
Even though, there are other libraries available for AngularJS, this blog post explores some of the most popular libraries/directives for the framework. In case you wish to share your experience on other AngularJS libraries or on this post, please leave your comments in the section below.