Misko Hevery, a Google employee, started to work with AngularJS in 2009. The idea turned out very well, and the project is now officially supported by Google.Even though there are other frameworks like Backbone.js and Ember.js, AngularJs is slowly turning out to be the preferred framework of choice for building JavaScript applications.
AngularJS is a Javascript MVC framework to build properly structured web applications very easily. It lets you extend HTML vocabulary for your application. AngularJS also enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML.
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
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!
Angular UI-bootstrap
Similar to Angular Strap, Angular UI-bootstrap provides a set of bootstrap components in pure Angular JS with no dependency on jQuery or Bootstrap’s JavaScript. The only dependency being AngularJS and Bootstrap CSS. Developers have the option of choosing between the two: Angular UI-bootstrap or Angular strap in their application.
UI-router
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.
Angular Growl-2
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.
Angular Formly
This is a valuable module which allows you to render JavaScript forms .In simple terms, generate forms dynamically using JavaScript objects. Angular-Formly makes your forms more manageable and reusable and is very useful when your application has numerous forms. Additionally, it comes with several pre built templates. It also allows users to build their own custom templates and use them.
dirPaginate
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!
UI-Grid
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.
.png){kind=icon}